javascript - 在asp.net mvc中使用jquery ajax提交帖子后更新部分 View

Question

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

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

这是我的 Controller :

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

Answer 1

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

这会阻止表单提交。