به روز رسانی div و Partial View با استفاده از Ajax beginform در mvc

سه شنبه 19 آبان 1394

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

به روز رسانی div  و Partial View با  استفاده از Ajax beginform  در mvc

در این مقاله با استفاده از فرم  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 به صفحه اضافه میشود.

 

فایل های ضمیمه

برنامه نویسان

نویسنده 3355 مقاله در برنامه نویسان

کاربرانی که از نویسنده این مقاله تشکر کرده اند

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید