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

我正在应用程序中开发一个表单，我想使用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>

---

只需添加

返回false

submit（函数（）{…（在ajax函数之后，而不是在它里面）的末尾，它应该可以工作，我在JSFIDLE中试用过

---

它阻止表单提交的原因。

您不需要部分视图来完成此操作，您的页面将刷新每次提交，因为它执行常规事件，请尝试添加

事件.preventDefault（）

---

您遇到任何错误吗？

console.log（msg）

在您的成功和错误中，检查其中是否有任何内容请再次阅读我的问题。它工作正常，但我只想用一条确认消息更新我的视图，上面写着“信息已保存”或类似内容。

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

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