Updating part of view after submitting a post using jquery ajax in asp.net mvc

Question

I'm working on a form in my application, which I want to post using ajax. The posting works fine and my controller receives the data, but I'd like to just post a success message back to my view instead of refreshing the entire page. Do I have to return a partial view with the information for this, or can I just return a message from my controller? I can't seem to figure out how to do this properly.

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

Here's my 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

Simply add return false; the end of the $('#wellform').submit(function () {... (after the ajax function, not inside it) and it should work, I tried it out in jsfiddle.

What this does it prevent the form from submitting.

Answer 2

you doesn't need a partial view to do that, your page will refresh each submit because it doing the usual event, try add event.preventDefault() http://api.jquery.com/event.preventdefault/

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