Jquery MVC 5使用Ajax发布并返回PartialView调用在发布后获得？_Jquery_Ajax_Asp.net Mvc

Jquery MVC 5使用Ajax发布并返回PartialView调用在发布后获得？

jquery ajax asp.net-mvc

Jquery MVC 5使用Ajax发布并返回PartialView调用在发布后获得？,jquery,ajax,asp.net-mvc,Jquery,Ajax,Asp.net Mvc,我仍在学习如何在Ajax中使用局部视图，但我不明白为什么我的场景会在文章之后调用GET。这实际上导致了页面刷新，破坏了Ajax更新的全部目的我有一个Razor页面，它使用部分视图以表格式写出记录。在页面底部有一个文本框，允许用户提交新的注释，其想法是将该注释插入数据库，然后只更新表这是我的.cshtml页面的大部分。为了简洁起见，已删除了一些标签和文本框 <form id="logForm"> @Html.AntiForgeryToken() <div i

我仍在学习如何在Ajax中使用局部视图，但我不明白为什么我的场景会在文章之后调用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>

这是我在控制器中的帖子

[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），并有效地执行服务器端POST。这会导致页面闪烁，并将滚动页面移动到顶部。

您的提交按钮位于

表单

标记内。单击submit将触发一个普通表单submit。在执行ajax时，需要防止这种默认行为。目前你没有这样做，因此它是一个正常的表单提交以及

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

$(function(){

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

       // your existing ajax code
   });

});

<>而不是将提交按钮单击事件，您可以考虑将Ajax代码作为事件处理程序连接到<代码>提交< /代码>事件。

$(function(){

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

});

现在这个代码将用于按钮点击和表单提交，使用回车键

另一个选项是从回调方法（连接到提交事件/单击事件）执行

返回false

。