jQuery経由でフォームを送信してリフレッシュする方法PartialView

Question

Stackoverflowがうまくいき、コメントを送信すると、jQueryを使用して画面上で更新されます。 どうしたのですか？

私は学習するコードを解剖していました。

ここで起こっているようです：下記のhtmlでは、リンククリックイベントはjQueryによってバインドされ、テキストエリアを動的フォームにロードします。 送信ボタンはどのように配線されており、データはどのようにサーバーに送信されますか？

<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> 

と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>") 
     } 
    } 
}; 

Answer 1

これは私が機能を複製することになった方法です。

<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> 

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> 

Answer 2

あなたはJavaScriptでページの内容をサーバーにフォームを送信し、簡単に更新するために、AJAXを使用することができます。

あなたはjQueryのを使用している場合methodは、フォームデータをシリアル化するためにHTTP POSTメソッドと同様にmethodを使用してフォームを送信するためにそこにある：

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