Update A Div And Partial View Using Ajax.BeginForm On Form Submit

Here are the steps:

Step 1: Verify you have Microsoft jQuery Unobtrusive Ajax in your script folder,



If not then install package using the following command in Nuget:

Install-PackageMicrosoft.jQuery.Unobtrusive.Ajax

You may refer the following link to install.

Step 2: Create Controller, Model and View in your MVC application.

Step 3: Include the following two important script file in your project.



Step 4: Create Partial view which you want to update in the Ajax.Begin form submit button. You may add this at the end of BeginForm,



Step 5: Add Ajax.BeginForm.

It has the following parameters:

1. Action Name
2. Controller Name
3. AjaxOption (mention HttpMethod =post , UpdateTargetId = “Traget Div to update”.
   
   
   

My Ajax.BegineForm is like the following:



And My Final View is as below:

@model DropdownGrid.Models.StudentDetailsModel
@{
ViewBag.Title = "Index";
}
< h2 >
  Index
  < /h2>

    < script type = "text/javascript"
    src = "@Url.Content("~/Scripts/jquery - 1.10.2. js ")" >

      < /script>

        < script type = "text/javascript"
          src = "@Url.Content("~/Scripts/jquery.unobtrusive - ajax.min.js ")" >

            < /script>

            < br >

            < br >

            < br >

            < br >

            < fieldset >

            < div id = "dvCategoryResults" >
              @
              {
                Html.RenderPartial("_PartialStudent", Model);
              }
      < /div>

        < /fieldset>

        < fieldset >

        @using(Ajax.BeginForm("CreateStudent", "GetStudents",
                              new AjaxOptions
                              {
                              HttpMethod = "Post", UpdateTargetId = "dvCategoryResults"
                              }))
        {
          < table >

            < tr >

            < td >
            @Html.LabelFor(M =>
                           M.SelectedStudent.Id)
            < /td>

            < td >
            @Html.TextBoxFor(M =>
                             M.SelectedStudent.Id)
            < td >

            < /tr>

            < tr >

            < td >
            @Html.LabelFor(M =>
                           M.SelectedStudent.Name)
            < /td>

            < td >
            @Html.TextBoxFor(M =>
                             M.SelectedStudent.Name)
            < td >

            < /tr>

            < tr >

            < td >
            @Html.LabelFor(M =>
                           M.SelectedStudent.Address)
            < /td>

            < td >
            @Html.TextBoxFor(M =>
                             M.SelectedStudent.Address)
            < td >

            < /tr>

            < tr >

            < td >
            @Html.LabelFor(M =>
                           M.SelectedStudent.Class)
            < /td>

            < td >
            @Html.TextBoxFor(M =>
                             M.SelectedStudent.Class)
            < td >

            < /tr>

            < tr >

            < td >
            @Html.LabelFor(M =>
                           M.SelectedStudent.Section)
            < /td>

            < td >
            @Html.TextBoxFor(M =>
                             M.SelectedStudent.Section)
            < td >

            < /tr>

            < /table>

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

        }
    < /fieldset>

Hence you will get your div with partial view updates on submit button using Ajax.BeginForm.



On Submit button my partial view updates without postback.