Post
Ask Question

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,

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>  
  8.       
  9.     < script type = "text/javascript"    
  10.     src = "@Url.Content("~/Scripts/jquery - 1.10.2. js ")" >  
  11.         
  12.       < /script>  
  13.           
  14.         < script type = "text/javascript"    
  15.           src = "@Url.Content("~/Scripts/jquery.unobtrusive - ajax.min.js ")" >  
  16.               
  17.             < /script>  
  18.               
  19.             < br >  
  20.               
  21.             < br >  
  22.               
  23.             < br >  
  24.               
  25.             < br >  
  26.               
  27.             < fieldset >  
  28.               
  29.             < div id = "dvCategoryResults" >  
  30.               @    
  31.               {    
  32.                 Html.RenderPartial("_PartialStudent", Model);    
  33.               }     
  34.       < /div>  
  35.           
  36.         < /fieldset>  
  37.           
  38.         < fieldset >  
  39.           
  40.         @using(Ajax.BeginForm("CreateStudent", "GetStudents",    
  41.                               new AjaxOptions    
  42.                               {    
  43.                               HttpMethod = "Post", UpdateTargetId = "dvCategoryResults"    
  44.                               }))    
  45.         {   
  46.           < table >  
  47.               
  48.             < tr >  
  49.               
  50.             < td >  
  51.             @Html.LabelFor(M =>  
  52.                            M.SelectedStudent.Id)   
  53.             < /td>  
  54.               
  55.             < td >  
  56.             @Html.TextBoxFor(M =>  
  57.                              M.SelectedStudent.Id)   
  58.             < td >  
  59.               
  60.             < /tr>  
  61.               
  62.             < tr >  
  63.               
  64.             < td >  
  65.             @Html.LabelFor(M =>  
  66.                            M.SelectedStudent.Name)   
  67.             < /td>  
  68.               
  69.             < td >  
  70.             @Html.TextBoxFor(M =>  
  71.                              M.SelectedStudent.Name)   
  72.             < td >  
  73.               
  74.             < /tr>  
  75.               
  76.             < tr >  
  77.               
  78.             < td >  
  79.             @Html.LabelFor(M =>  
  80.                            M.SelectedStudent.Address)   
  81.             < /td>  
  82.               
  83.             < td >  
  84.             @Html.TextBoxFor(M =>  
  85.                              M.SelectedStudent.Address)   
  86.             < td >  
  87.               
  88.             < /tr>  
  89.               
  90.             < tr >  
  91.               
  92.             < td >  
  93.             @Html.LabelFor(M =>  
  94.                            M.SelectedStudent.Class)   
  95.             < /td>  
  96.               
  97.             < td >  
  98.             @Html.TextBoxFor(M =>  
  99.                              M.SelectedStudent.Class)   
  100.             < td >  
  101.               
  102.             < /tr>  
  103.               
  104.             < tr >  
  105.               
  106.             < td >  
  107.             @Html.LabelFor(M =>  
  108.                            M.SelectedStudent.Section)   
  109.             < /td>  
  110.               
  111.             < td >  
  112.             @Html.TextBoxFor(M =>  
  113.                              M.SelectedStudent.Section)   
  114.             < td >  
  115.               
  116.             < /tr>  
  117.               
  118.             < /table>  
  119.               
  120.             < input type = "submit"    
  121.               value = "Submit" / >  
  122.                   
  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. 


Similar Articles