在ASP.NET MVC中使用jquery ajax提交帖子后更新視圖的一部分

Question

我正在我的應用程序中處理表單，我想使用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);
}

Answer 1

只需添加return false; $('#wellform').submit(function () {... （在ajax函數之后，不在其內部）的末尾，它應該可以工作，我在jsfiddle中進行了嘗試。

這會阻止表單提交。

Answer 2

您不需要局部視圖即可執行此操作，您的頁面將刷新每個提交，因為它會執行通常的事件，請嘗試添加event.preventDefault() http://api.jquery.com/event.preventdefault/

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