در این مقاله قصد داریم قدم به قدم چگونگی تغییر تصویر را در MVC با کلیک بر روی دکمه های Next و Preview با استفاده از Ajax بررسی کنیم.

در این مقاله قصد داریم یک آلبوم ایجاد کرده و قدم به قدم چگونگی تغییر تصویر را در  MVC با کلیک بر روی دکمه های  Next  و  Preview  با استفاده از  Ajax  بررسی کنیم.

 یک پروژه  MVC ایجاد کرده و در پوشه  Script  خود ، Microsoft jQuery Unobtrusuve Ajax را قرار دهید.

برای نصب آن می توانید از دستور زیر استفاده کنید.

Install-PackageMicrosoft.jQuery.Unobtrusive.Ajax

کنترلر ،  View  و مدل خود را ایجاد کنید.

دو اسکریپت مهم زیر را در پروژه خود قرار دهید.

 viewmodel  را به پروژه خود اضافه کنید و متد  GetList رابرای گرفتن داده ها از دیتابیس  به آن اضافه کنید.

    public class ImageModel   
    {  
        public ImageViewModel SelectedImage;  
        public ImageModel()   
      {  
      
        }  
      
        public List < ImageViewModel > GetList()   
        {  
            List < ImageViewModel > list = new List < ImageViewModel > ();  
            list.Add(new ImageViewModel   
            {  
                Id = 1, Path = "~/Content/Images/IMG_7785.jpg"  
            });  
            list.Add(new ImageViewModel   
            {  
                Id = 2, Path = "~/Content/Images/IMG_7788.jpg"  
            });  
            list.Add(new ImageViewModel   
            {  
                Id = 3, Path = "~/Content/Images/IMG_7790.jpg"  
            });  
            list.Add(new ImageViewModel   
            {  
                Id = 4, Path = "~/Content/Images/IMG_7799.jpg"  
            });  
            list.Add(new ImageViewModel   
            {  
                Id = 5, Path = "~/Content/Images/IMG_7847.jpg"  
            });  
            list.Add(new ImageViewModel   
            {  
                Id = 6, Path = "~/Content/Images/IMG_7849.jpg"  
            });  
            return list;  
        }  
      
    }  

partial View  را درون  view  اصلی  فراخوانی کنید.

 Ajax.BeginForm  دارای پارامترهای زیر است :

 Action Name

Controller Name

AjaxOption (mention HttpMethod=post, UpdateTagetId="Target Div to Update")

 Ajax.BeginForm و دو  button به صورت زیر اضافه کنید.

برای دکمه های بعدی و قبلی ، دو مقدار متفاوت  و نام مشترک  ButtonType قرار داده می شود.

در پایان،  View  به صورت زیر خواهد بود:

@model DropdownGrid.Models.ImageModel  
  
@ {  
    ViewBag.Title = "Albam";  
}  
  
< 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("_PartialImage", Model);  
    } < /div> < /fieldset>  
  
< fieldset >  
    @using(Ajax.BeginForm("GetNextOrPrevImage", "Image", new   
    {  
            SelectedId = Model.SelectedImage  
        },  
        new AjaxOptions   
            {  
            HttpMethod = "Post", UpdateTargetId = "dvCategoryResults"  
        })) {  
  
        < input type = "submit"  
        value = "<"  
        id = "btnPrev"  
        name = "ButtonType" / >  
            < input type = "submit"  
        value = ">"  
        id = "btnNext"  
        name = "ButtonType" / >  
    }   
< /fieldset>

در کنترلر کد ها به صورت زیر خواهد بود :

public class ImageController: Controller   
{  
    public ActionResult Index() {  
        ImageModel _objuserloginmodel = new ImageModel();  
        ViewBag.SelectedId = 0;  
        TempData["SelectedId"] = 0;  
  
        _objuserloginmodel.SelectedImage = _objuserloginmodel.GetList()[0];  
        return View(_objuserloginmodel);  
    }  
  
    [HttpPost]  
    public ActionResult GetNextOrPrevImage(ImageViewModel SelectedImage, string ButtonType)   
    {  
        ImageModel _objuserloginmodel = new ImageModel();  
        List < ImageViewModel > GetList = _objuserloginmodel.GetList();  
  
        int id = System.Convert.ToInt32(TempData["SelectedId"]);  
  
        if (ButtonType.Trim() == ">")  
            _objuserloginmodel.SelectedImage = GetList[++id < GetList.Count ? id : --id];  
        else if (ButtonType.Trim() == "<")  
            _objuserloginmodel.SelectedImage = GetList[--id > -1 ? id : ++id];  
  
        TempData["SelectedId"] = id;  
        return PartialView("_PartialImage", _objuserloginmodel);  
    }  
} 

div  شما با کلیک بر روی دکمه ها با استفاده از  Ajax.BeginForm بروز رسانی می شود.  نتیجه به صورت زیر می باشد.