jquery ajaxでフォームを送信

Question

私はMVCを習得しようとしています。コントローラのアクションにフォームを送信すると、このアクションは送信されたデータを返します。シンプルに聞こえますが、私は何の成功もなく何時間も試しています。 私の見解：

@using (Html.BeginForm("BlogComment","Blog")) 
{ 
    @Html.ValidationSummary(true) 
    <legend class="AddAComment">Add a comment</legend> 

    <div class="commentformwrapper"> 

     <div class="editor-text"> 
     <span class="editor-label">User Name:</span> 
     </div> 

     <div class="editor-text"> 
     <input type="text" id="username" /> 
     </div> 

     <div class="editor-text"> 
     <textarea id="comment" rows="6" cols="23"></textarea> 
     </div> 

     <div class="editor-field"> 
     <input type="hidden" id="hiddendate" /> 
     </div> 

     <input type="submit" id="submit" value="Create" /> 

    </div> 
} 

私のコントローラ：

[HttpPost] 
public ActionResult CommentForm(Comment comment) 
{ 
    Comment ajaxComment = new Comment(); 
    ajaxComment.CommentText = comment.UserName; 
    ajaxComment.DateCreated = comment.DateCreated; 
    ajaxComment.PostId = comment.PostId; 
    ajaxComment.UserName = comment.UserName; 

    mRep.Add(ajaxComment); 
    uow.Save(); 
    //Get all the comments for the given post id 

    return Json(ajaxComment); 
} 

と私のJS：

$(document).ready(function() { 

     $('form').submit(function() { 

      $.ajax({ 
       url: '@Url.Action("CommentForm")', 
       type: "POST", 
       dataType: "json", 
       contentType: "application/json; charset=utf-8", 
       data: { 
        PostId: $('.postid').val(), 
        UserName: $('#username').val(), 
        DateCreated: new Date(), 
        CommentText: $('#comment').val() 
       }, 
       success: function (result) { 

        alert("success " + result.UserName); 
       }, 
       error: function (result) { 
        alert("Failed"); 
       } 
      }); 
      return false; 
     }); 
    }); 

Answer 1

基本的には、JavaScriptのオブジェクトリテラルを直接渡しています。したがって、データをコントローラに渡す前に、JSON形式でなければなりません（application/jsonを指定したので、$ .ajax呼び出しを参照してください）。
SO、あなたはFYI、これを行うには、クライアント側のコードを必要としないJSON.stringify（）

data: JSON.stringify({ 
         PostId: $('.postid').val(), 
         UserName: $('#username').val(), 
         DateCreated: new Date(), 
         CommentText: $('#comment').val() 
        }), 

OR

var someObj = { 
      PostId: $('.postid').val(), 
      UserName: $('#username').val(), 
      DateCreated: new Date(), 
      CommentText: $('#comment').val() 
     }; 

     $.ajax({ 
      /// your other code 
      data: JSON.stringify(someObj), 
      // your rest of the code 

     }); 

Answer 2

代わりの

data: { 
      PostId: $('.postid').val(), 
      UserName: $('#username').val(), 
      DateCreated: new Date(), 
      CommentText: $('#comment').val() 
     }, 

は

をお試しください

$('form').submit(function() { 
    var obj = { 
     PostId: $('.postid').val(), 
     UserName: $('#username').val(), 
     DateCreated: new Date(), 
     CommentText: $('#comment').val() 
    }; 

    $.ajax({ 
     ..., 
     data: JSON.stringify(obj), 
     ..., 
    }); 

    return false; 
}); 

サーバーに送信する前にデータを文字列に変換する必要があります。 JSON.stringifyその仕事をします

Answer 3

が欠落しています。

MVCでajaxメソッドを正常に使用するには、次の操作を行う必要があります。 web.configファイル内のAppSettingsにこのキーを追加します。

<appSettings> 
    <add key="UnobtrusiveJavaScriptEnabled" value="true" /> 
    </appSettings> 

と同様に控えめなAjaxのスクリプトが含まれています

<script src="/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script> 

は、その後、フォームの周りのdivコンテナを作成し、Ajax.BeginFormでHtml.BeginFormを交換

<div id="ajaxReplace"> 
@using (Ajax.BeginForm("BlogComment", "Blog", null, new AjaxOptions { UpdateTargetId = "ajaxReplace", OnSuccess = "doFunctionIfYouNeedTo", OnFailure = "ShowPopUpErrorIfYouWant" })) 
{ 
@Html.ValidationSummary(true) 
     <legend class="AddAComment">Add a comment</legend> 

     <div class="commentformwrapper"> 

      <div class="editor-text"> 
      <span class="editor-label">User Name:</span> 
      </div> 

      <div class="editor-text"> 
      <input type="text" id="username" /> 
      </div> 

      <div class="editor-text"> 
      <textarea id="comment" rows="6" cols="23"></textarea> 
      </div> 

      <div class="editor-field"> 
      <input type="hidden" id="hiddendate" /> 
      </div> 

      <input type="submit" id="submit" value="Create" /> 

     </div> 

    } 
</div> 

次に、あなたのコントローラであなたはこのようなものを返します：

return PartialView(ajaxComment); 

これにより、これを手動で行うためのスクリプトを保存する手間が省け、意図したとおりにフレームワークを使用することができます。また、データアノテーションの検証とそれに付随するすべてのジューシーなものに役立ちます。

これは何らかの形で役立ちます。

Answer 4

これを試してみてください：

モデル

public class Comment 
{ 
    public string CommentText { get; set; } 
    public DateTime? DateCreated { get; set; } 
    public long PostId { get; set; } 
    public string UserName { get; set; } 
} 

見るとJS

@model SubmitMvcForWithJQueryAjax.Models.Comment 

@using (Html.BeginForm("BlogComment","Blog")) 
{ 
    @Html.ValidationSummary(true) 
    <legend class="AddAComment">Add a comment</legend> 

    <div class="commentformwrapper"> 

     <div class="editor-text"> 
     <span class="editor-label">User Name:</span> 
     </div> 

     <div class="editor-text"> 
      @Html.EditorFor(m => m.UserName) 
     </div> 

     <div class="editor-text"> 
      @Html.TextAreaFor(m => m.CommentText, new { rows="6", cols="23"}) 
     </div> 

     <div class="editor-field"> 
      @Html.HiddenFor(m => m.DateCreated)   
     </div> 

     <div class="editor-field"> 
      @Html.HiddenFor(m => m.PostId)   
     </div> 

     <input type="submit" id="submit" value="Create" /> 

    </div> 

} 

<script type="text/javascript"> 
    $(document).ready(function() { 

     $('form').submit(function() { 
      var serializedForm = $(this).serialize();      
      $.ajax({ 
       url: '@Url.Action("CommentForm")', 
       type: "POST",          
       data: serializedForm, 
       success: function (result) { 

        alert("success " + result.UserName); 
       }, 
       error: function (result) { 
        alert("Failed"); 
       } 

      }); 
      return false; 
     }); 
    }); 

</script> 

コントローラ

public class CommentController : Controller 
{ 
    // 
    // GET: /Comment/ 

    public ActionResult Index() 
    { 
     return View(new Comment()); 
    } 

    [HttpPost] 
    public ActionResult CommentForm(Comment comment) 
    { 
     Comment ajaxComment = new Comment(); 
     ajaxComment.CommentText = comment.UserName; 
     ajaxComment.DateCreated = comment.DateCreated ?? DateTime.Now; 
     ajaxComment.PostId = comment.PostId; 
     ajaxComment.UserName = comment.UserName; 

     //mRep.Add(ajaxComment); 
     //uow.Save(); 
     //Get all the comments for the given post id 

     return Json(ajaxComment); 


    } 

}