Here are the steps:

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

jQuery Unobtrusive Ajax

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.

script file

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,

fieldset

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

    AjaxOption

My Ajax.BegineForm is like the following:

Ajax.BegineForm

And My Final View is as below:

  1. @model DropdownGrid.Models.StudentDetailsModel
  2. @{
  3. ViewBag.Title = "Index";
  4. }
  5. < h2 >
  6. Index
  7. < /h2>
  9. < script type = "text/javascript"
  10. src = "@Url.Content("~/Scripts/jquery - 1.10.2. js ")" >
  12. < /script>
  14. < script type = "text/javascript"
  15. src = "@Url.Content("~/Scripts/jquery.unobtrusive - ajax.min.js ")" >
  17. < /script>
  19. < br >
  21. < br >
  23. < br >
  25. < br >
  27. < fieldset >
  29. < div id = "dvCategoryResults" >
  30. @
  31. {
  32. Html.RenderPartial("_PartialStudent", Model);
  33. }
  34. < /div>
  36. < /fieldset>
  38. < fieldset >
  40. @using(Ajax.BeginForm("CreateStudent", "GetStudents",
  41. new AjaxOptions
  42. {
  43. HttpMethod = "Post", UpdateTargetId = "dvCategoryResults"
  44. }))
  45. {
  46. < table >
  48. < tr >
  50. < td >
  51. @Html.LabelFor(M =>
  52. M.SelectedStudent.Id)
  53. < /td>
  55. < td >
  56. @Html.TextBoxFor(M =>
  57. M.SelectedStudent.Id)
  58. < td >
  60. < /tr>
  62. < tr >
  64. < td >
  65. @Html.LabelFor(M =>
  66. M.SelectedStudent.Name)
  67. < /td>
  69. < td >
  70. @Html.TextBoxFor(M =>
  71. M.SelectedStudent.Name)
  72. < td >
  74. < /tr>
  76. < tr >
  78. < td >
  79. @Html.LabelFor(M =>
  80. M.SelectedStudent.Address)
  81. < /td>
  83. < td >
  84. @Html.TextBoxFor(M =>
  85. M.SelectedStudent.Address)
  86. < td >
  88. < /tr>
  90. < tr >
  92. < td >
  93. @Html.LabelFor(M =>
  94. M.SelectedStudent.Class)
  95. < /td>
  97. < td >
  98. @Html.TextBoxFor(M =>
  99. M.SelectedStudent.Class)
  100. < td >
  102. < /tr>
  104. < tr >
  106. < td >
  107. @Html.LabelFor(M =>
  108. M.SelectedStudent.Section)
  109. < /td>
  111. < td >
  112. @Html.TextBoxFor(M =>
  113. M.SelectedStudent.Section)
  114. < td >
  116. < /tr>
  118. < /table>
  120. < input type = "submit"
  121. value = "Submit" / >
  123. }
  124. < /fieldset>
Hence you will get your div with partial view updates on submit button using Ajax.BeginForm.

index

On Submit button my partial view updates without postback.