Question

我还在学习如何使用部分视图与Ajax，但我不明白为什么我的场景在POST后调用GET。这有效地导致页面刷新并且破坏了Ajax更新的整个目的。

我有一个Razor页面，它使用局部视图以表格格式写出记录。页面底部有一个文本框，允许用户提交新评论，其目的是将该评论插入数据库，然后只更新表格。

这是我的.cshtml页面的大部分内容。为简洁起见，已删除了一些标签和文本框。

<form id="logForm">
    @Html.AntiForgeryToken()

    <div id="exceptionTable">
        @Html.Partial("_DailyLogExceptionsTable", Model)
    </div>

    <div class="well">
        <div class="row voffset3">
            <div class="col-md-7">
                Enter Exception Log comment
                @Html.TextAreaFor(m => m.ExceptionComment, new { cols = 200, @rows = 4, @maxlength = "100", @class = "form-control", @placeholder = "100 character limitation" })
                @Html.ValidationMessageFor(m => m.ExceptionComment, null, new { @class = "text-danger" })
            </div>
        </div>

        <div class="row voffset3">
            <div class="col-md-12 form-group">
                <button id="btnSubmit" class="btn btn-primary">
                    <i class="fa fa-arrow-circle-right" aria-hidden="true"></i> Submit
                </button>
                &nbsp;&nbsp;
                <a href="@Url.Action("ScheduleDetails", "Home")" class="btn btn-default">
                    <span class="fa fa-reply" aria-hidden="true"></span> Cancel
                </a>
            </div>
        </div>
    </div>

    <div style="text-align:center;display:none" id="loaderDiv">
        <img src="~/Content/Images/InternetSlowdown_Day.gif" width="150" />
    </div>

</form>

这是我的部分视图，它只包含一个表（_DailyLogExceptionsTable）。

if (Model.listExceptions.Count > 0)
{
    <div class="row voffset3">
        <div class="col-md-12">
           <table class="table">
                @foreach (var item in Model.listExceptions)
                {
                    //write out rows
                }
            </table>
        </div>
    </div>
}

这是我的jQuery函数。

$("#btnSubmit").click(function () {

    $("#loaderDiv").show();

    var data = $("#logForm").serialize();

    $.ajax({
        type: "POST",
        url: "/Exception/DailyLog",
        data: data,
        success: function (response) {
            $("#loaderDiv").hide();

            $("#exceptionTable").html(response);
        },
        error: function (xhr) {
            if (xhr.status == 500) {
                alert('Error Code: ' + xhr.status + '\nError: Internal Server Error.');
            }
            else {
                alert('Error Code: ' + xhr.status);
            }
        }
    })

});

这是我在控制器中的POST。

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult DailyLog(ExceptionLogDailyViewModel vm)
{
    try
    {
        DAL.CommentInsertBySupervisor(vm, UserId);

        //repopulate the exceptions/comments.
        vm.listExceptions = DAL.GetEmployeeExceptionsByDate(vm.CurrentEmployeeId, vm.ShiftDate);        
    }
    catch (Exception ex)
    {
        //log error
    }   

    return PartialView("_DailyLogExceptionsTable", vm);
}

当我调试时，我可以看到它调用POST并按原样重新填充局部视图，然后在POST完成后立即进入GET，创建一个新的ViewModel并使用返回视图（vm）并有效地执行服务器端帖子。这会导致页面闪烁并将页面滚动移动到顶部。

Answer 1

您的提交按钮位于form标记内。点击提交将触发正常表单提交。在执行ajax时，您需要阻止此默认行为。目前你没有这样做，因此它也提交了一个正常的表格。

您可以使用jQuery preventDefault方法执行此操作

$(function(){

   $("#btnSubmit").click(function (e) {
       e.preventDefault();

       // your existing ajax code
   });

});

您可以考虑将ajax代码连接为submit事件的事件处理程序，而不是连接提交按钮单击事件。

$(function(){

   $("#logForm").submit(function (e) {
       e.preventDefault();
       var data = $(this).serialize();
       var url = $(this).attr("action");
       // your existing ajax code
   });

});

现在，此代码适用于按钮点击和使用回车键按

提交表单

另一种选择是从你的回调方法（你连接到提交事件/点击事件）中做return false

使用Ajax发布MVC 5并在POST后返回PartialView调用GET？

1 个答案: