如何通过jQuery提交表单并刷新PartialView

* does it so well, submit a comment and it gets refreshed on the screen using jQuery. How is it done?

*做得很好,提交注释,然后使用jQuery在屏幕上刷新。怎么做?

I was dissecting the code to learn.

我正在剖析代码来学习。

Looks like it is happening here: in the html below, the link click event is bound by jQuery to load a textarea to a dynamic form. How is the submit button wired and how is the data sent to the server?

看起来它发生在这里:在下面的html中,链接点击事件由jQuery绑定,以将textarea加载到动态表单。如何连接提交按钮以及如何将数据发送到服务器?

<div class="post-comments">
    <div id="comments-1122543" class="display-none comments-container">
        <div class="comments">                
        </div>        
        <form id="form-comments-1122543" class="post-comments"></form>        
    </div>    
    <a id="comments-link-1122543" class="comments-link" title="add a comment to this post">add comment</a>
</div>

and the javascript:

和javascript:

var j = function (s, v) {
    var r = $("#form-comments-" + s);
    if (r.length > 0) {
        var u = '<table><tr><td><textarea name="comment" cols="68" rows="3" maxlength="' + q;
        u += '" onblur="comments.updateTextCounter(this)" ';
        u += 'onfocus="comments.updateTextCounter(this)" onkeyup="comments.updateTextCounter(this)"></textarea>';
        u += '<input type="submit" value="Add Comment" /></td></tr><tr><td><span class="text-counter"></span>';
        u += '<span class="form-error"></span></td></tr></table>';
        r.append(u);
        r.validate({
            rules: {
                comment: {
                    required: true,
                    minlength: 15
                }
            },
            errorElement: "span",
            errorClass: "form-error",
            errorPlacement: function (y, z) {
                var A = z.parents("form").find("span.form-error");
                A.replaceWith(y)
            },
            submitHandler: function (y) {
                disableSubmitButton($(y));
                g(s, $(y))
            }
        });
        var t = $("#comments-" + s + " tr.comment:first td.comment-actions").width() || -1;
        t += 9;
        r.children("table").css("margin-left", t + "px")
    } else {
        var w = "no-posting-msg-" + s;
        if ($("#" + w).length == 0) {
            var x = $("#can-post-comments-msg-" + s).val();
            v.append('<div id="' + w + '" style="color:maroon">' + x + "</span>")
        }
    }
};

2 个解决方案

#1

This is how I ended up replicating the functionality;

这就是我最终复制功能的方式;

<div id="issueComments">
<% Html.RenderPartial("CommentHistory", Model.Comments); %>
<a id="comments-link-<%= Html.Encode(Model.Issue.IssueId) %>" class="comments-link" title="add a comment to this issue">Add comment</a>
<div id="issue-comment-form">
<form id="form-comments-<%= Html.Encode(Model.Issue.IssueId) %>" class="post-comments" method="post">
<table><tr><td><textarea class="wmd-ignore" name="comment" cols="68" rows="3" id="form-comment-<%= Html.Encode(Model.Issue.IssueId) %>"></textarea>
<input type="submit" value="Add Comment" /></td></tr><tr><td><span class="text-counter"></span>
<span class="form-error"></span></td></tr></table>
</form></div>
</div>

The jQuery

<script type="text/javascript">
$("#form-comments-<%= Html.Encode(Model.Issue.IssueId) %>").submit(function(evt) {
   var frm = $("#form-comments-<%= Html.Encode(Model.Issue.IssueId) %>");
   evt.preventDefault();
   var action = frm.attr("action");
   var serializedForm = frm.serialize();
   var comments = jQuery.trim($("#form-comment-<%= Html.Encode(Model.Issue.IssueId) %>").val());
     if (comments.length < 1)
        return;
      // POST HERE
   $.ajax({
       type: "POST",
       url: "/Issue/" + "SaveIssueComment",
       dataType: "html",
       data: {
         comment: comments,
         issueId: issueId
        },
       success: function(v) {
       $("div#issueComments").html(v);                
        },
       error: function(v, x, w) {
        //Error
        }
     });
    });
</script>

#2

You can use AJAX to send the form to the server and easily update the contents of the page with JavaScript.

您可以使用AJAX将表单发送到服务器,并使用JavaScript轻松更新页面内容。

If you are using jQuery there is a method for sending forms using HTTP POST method as well as method to serialize the form data:

如果您使用的是jQuery,则有一种使用HTTP POST方法发送表单的方法以及序列化表单数据的方法:

$.post('/url', $('#formId').serialize(), function () {
    // do something after submiting the form i.e. update current page layout
});

#1