در این مقاله با استفاده از فرم Ajax.BeginForm برای به روز رسانی Partial view در Div اقدام میکنیم. برای این کار باید فایل های محبوب Ajax مایکروسافت را نصب کنید. شما میتوانید از Nuget استفاده کنید.

در این مقاله با استفاده از فرم  Ajax.BeginForm برای به روز رسانی  Partial view  در Div اقدام میکنیم. برای این کار باید فایل های محبوب Ajax مایکروسافت را نصب کنید. شما میتوانید از Nuget استفاده کنید.

در Nuget می توانید با دستور زیر این فایل ها را نصب نمایید.

Install-PackageMicrosoft.jQuery.Unobtrusive.Ajax

در مرحله بعد شما باید Controller و Models و view خود را در  mvc  ایجاد نمایید.

دو فایل جاوا اسکریپتی مهم را به layout خود اضافه نمایید که تصویر ان را در زیر مشاهده میکنید.

یک partial view ایجاد کنید برای وقتی که میخواهیم فرم ajax.beginform را با زدن کلید ارسال به روز رسانی کنیم.

تصویر زیر نشان میدهد که ما چگونه این را به پایان صفحه خود اضافه کرده ایم.

 در زیر کد  صفحه index را مشاهده میکنید.

@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>

برنامه را اجرا نمایید و ببینید چگونه اطلاعات به صورت ajax به صفحه اضافه میشود.