User Name:


User Email:




This information will only be saved for the purposes of communicating with those who have provided this information voluntarily regarding our services.We will never sell your name or email address to anyone.
© 2018 - First Crazy Developer (Abhishek Kumar)
  

crazydeveloper Ajax.BeginForm with MVC 4

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>

crazydeveloper Home Page 21 April 2015

Become a Fan