提交表单与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，你缺少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方法，您需要执行以下操作。此键加入的AppSettings在web.config中：

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


    } 

}