Partial postback in MVC via an AJAX call.

Partial postback in MVC via an AJAX call.

 Using Ajax.BeginForm in your MVC View gives you an easy way of doing a partial postback via an AJAX call.  In its simplest form, our view would look something like this:

@model MyProject.Models.Person

 

<div id="myForm">

    @using (Ajax.BeginForm(new AjaxOptions())

    {

        <fieldset>

            <legend>This is a demo form.</legend>

            @Html.LabelFor(model => model.Name)

            @Html.TextBoxFor(model => model.Name)

 

            <input type="submit" value="Save" />

        </fieldset>

    }

</div>

The BeginForm method has several overloads which allow you to pass in the name of the Action, Controller, and many other options.  See the full list of overloads here.

The AjaxOptions object that gets passed into BeginForm gives us some additional properties we can set.  Here is another example that will POST the form to our api/Person Controller and when the request is complete, it will call the personSavedComplete JavaScript function.

@using (Ajax.BeginForm(new AjaxOptions

{

    HttpMethod = "POST",

    Url = "api/Person",

    OnComplete = "personSavedComplete"

}))

Setting form values from JavaScript

Now let's say we want to set a value in the form from a JavaScript function.  For our example, this is an application that displays departments within a company and our form above lets you add a new Person to a Department.  If you are using a client-side framework like KendoUI, you may be selecting the Department in client-side JavaScript code, but we need to send the DepartmentId back to the server when we post the form. To do this, we will create a hidden form field that is associated with the Person.DepartmentId field in our Model:

<fieldset>

    <legend>This is a demo form.</legend>

    @Html.LabelFor(model => model.Name)

    @Html.TextBoxFor(model => model.Name)

     

    @Html.HiddenFor(model => model.DepartmentId)

    <input type="submit" value="Save" />

</fieldset>

When the Razor syntax gets rendered as HTML, the Html.HiddenFor element will be converted into a hidden input tag:

<input id="DepartmentId" name="DepartmentId" type="hidden" value="" />

Now we can set the value in JavaScript using the DepartmentId ID, but also constrain the JQuery ID lookup by using the context of our form:

$('#DepartmentId', $('#myForm')).val(selectedDepartmentId);

When the form gets posted, the DepartmentId value will be included in the Person Model that is sent to the Controller.

For an in-depth look at JavaScript, check out our book, JavaScript Nuts and Bolts.

Full Postback instead of Partial Postback with Ajax.BeginForm

If you have all of this set up and are finding that the entire page is posting back instead of a partial postback of your form, the most common problem is that the JQuery Unobtrusive Ajax script is not being included.  Be sure to have this script included in your _Layout.cshtml page:

<script src="~/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"> </script>

 Calling partial view using Ajax in ASP.NET MVC 4

Step 1: First create partial view. For demonstration I have created “_server” partial view in Shared folder.

Step 2: Create action in your controller. Here I have created action “Server” in Home controller.

public PartialViewResult Server()

 {

            return PartialView("_server");

 }

 

Step 3: Now come to your View and call Partial View. For demonstration, I have call partial view from Index view and write below line of code.

 

Using ActionLink

 

<div id="atag">

@Ajax.ActionLink("Click", "Server", "Home", new AjaxOptions { UpdateTargetId = "atag" })

</div>

 

Using Submit Button

 

<div id="btnsubmit">

@using (Ajax.BeginForm("Server", "Home", new AjaxOptions { UpdateTargetId = "btnsubmit" }))

        {

            <input type="submit" value="Click" />

        }

</div>

Add below script that required for execute Ajax attribute

<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>

<script src="../../Scripts/modernizr-2.5.3.js" type="text/javascript"></script>