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

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

 

فایل های ضمیمه
دانلود نسخه ی PDF این مطلب