在asp.net mvc中使用jquery ajax提交帖子后更新部分视图答案

【问题标题】：Updating part of view after submitting a post using jquery ajax in asp.net mvc在asp.net mvc中使用jquery ajax提交帖子后更新部分视图
【发布时间】：2014-07-14 23:54:54
【问题描述】：

我正在我的应用程序中处理一个表单，我想使用 ajax 发布该表单。发布工作正常，我的控制器接收数据，但我只想将成功消息发布回我的视图，而不是刷新整个页面。我是否必须返回包含此信息的部分视图，或者我可以只从我的控制器返回一条消息？我似乎无法弄清楚如何正确地做到这一点。

<div class="panel panel-gray">
<div class="panel-body">
    <form method="POST" action="@Url.Action("SaveWellDetails", "WellManagement")" id="wellform" class="form-horizontal">
            <div class="form-group">
                @Html.LabelFor(m => m.Id, new { @class = "col-md-3 control-label"})
                <div class="col-md-9">
                    @Html.TextBoxFor(m => m.Id, new { @class = "form-control", disabled = "disabled", id = "WellId", name = "WellId" })
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(m => m.Name, new { @class = "col-md-3 control-label" })
                <div class="col-md-9">
                    @Html.TextBoxFor(m => m.Name, new { @class = "form-control" })
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(m => m.Location, new { @class = "col-md-3 control-label" })
                <div class="col-md-9">
                    @Html.TextBoxFor(m => m.Location, new { @class = "form-control" })
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(m => m.WellNumber, new { @class = "col-md-3 control-label" })
                <div class="col-md-9">
                    @Html.TextBoxFor(m => m.WellNumber, new { @class = "form-control" })
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(m => m.WellType, new { @class = "col-md-3 control-label" })
                <div class="col-md-9">
                    @Html.TextBoxFor(m => m.WellType, new { @class = "form-control" })
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(m => m.SpudDate, new { @class = "col-md-3 control-label" })
                <div class="col-md-9">
                    @Html.TextBoxFor(m => m.SpudDate, new { @class = "form-control" })
                </div>
            </div>
            <div class="panel-footer">
                <input type="submit" id="submit" class="btn btn-primary" value="Save Changes" />
                <div class="pull-right" id="wellsavesection">
                    <div id="processing_small" hidden="hidden">
                        <img src="~/Content/Kendo/Flat/loading_2x.gif" />
                    </div>
                </div>
            </div>
    </form>
</div>
<script type="text/javascript">
    $(document).ready(function() {

        $('#wellform').submit(function () {
            console.log("wellId = " + $("#WellId").val());
            $("#processing_small").show().hide().fadeIn('slow');
            $.ajax({
                url: '@Url.Action("SaveWellDetails", "WellManagement")',
                type: "POST",
                dataType: "json",
                data: {
                    wellId: $('#WellId').val(),
                    name: $('#Name').val(),
                    location: $('#Location').val(),
                    wellNumber: $('#WellNumber').val(),
                    wellType: $('#WellType').val(),
                    spudDate: $('#SpudDate').val()
                },
                error: function (msg) {
                    $('#wellsavesection').hide().html('<div class="alert alert-danger"><strong>Ouch!</strong> ' + msg.statusText + '</div>').fadeIn('slow');
                },
                success: function (msg) {
                    $('#wellsavesection').hide().html('<div class="alert alert-success"><strong>Success!</strong> Form Saved.</div>').fadeIn('slow').delay(1500).fadeOut();
                }
            });
        });
    });
</script>

这是我的控制器：

[HttpPost]
public ActionResult SaveWellDetails(string wellId, string name, string location, string wellNumber, string wellType, DateTime spudDate)
{
    try
    {
        var wellConctract = new WellContract
        {
            Id = Convert.ToInt32(wellId),
            Name = name,
            Location = location,
            WellNumber = wellNumber,
            WellType = wellType,
            SpudDate = spudDate
        };
        WellService.UpdateWell(wellConctract);
    }
    catch (Exception e)
    {
       Log.Error(e);
       return new HttpStatusCodeResult(HttpStatusCode.BadRequest, e.Message);
    }

    return Json(new {success = true}, JsonRequestBehavior.AllowGet);
}

【问题讨论】：

您遇到什么错误？ console.log(msg)在你的成功和错误中检查里面是否有任何东西
再次阅读我的问题。它工作正常，但我想用一条确认消息更新我的视图，上面写着“已保存信息”或类似内容。

标签： javascript jquery asp.net ajax asp.net-mvc

【解决方案1】：

只需在$('#wellform').submit(function () {... 的末尾添加return false;（在ajax 函数之后，而不是在其中），它应该可以工作，我在jsfiddle 中尝试过。

这是什么阻止了表单提交。

【讨论】：

【解决方案2】：

您不需要部分视图来执行此操作，您的页面将刷新每次提交，因为它执行通常的事件，请尝试添加 event.preventDefault() http://api.jquery.com/event.preventdefault/

 $('#wellform').submit(function (ev) {
    ev.preventDefault();
    // put your code below here
.....
});

【讨论】：