我正在尝试学习 MVC，我想做的一件事是向我的 Controller 中的操作提交表单，该操作将返回提交的数据。听起来很简单，但我已经尝试了几个小时都没有成功。 我的观点:

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

我的 Controller :

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

最佳答案

您不需要编写任何客户端代码来执行此操作，仅供引用。

要在 MVC 中成功使用 ajax 方法，您需要执行以下操作。将此 key 添加到 web.config 中的 appsettings:

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

以及包含不引人注目的 ajax 脚本:

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

然后围绕您的表单创建 div 容器并将 Html.BeginForm 替换为 Ajax.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>

然后在你的 Controller 中你会返回这样的东西:

return PartialView(ajaxComment);

这将使您无需维护脚本来手动执行此操作，并引导您按预期使用框架。它还将帮助您完成数据注释验证以及随之而来的所有有趣的事情，

我希望这能以某种方式有所帮助。

关于c# - 使用 jquery ajax 提交表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16122949/