Changing The Image On Previous And Next Button Using Ajax In MVC 5

Here are the steps, 

Step 1: Verify you have Microsoft jQuery Unobtrusive Ajax in your script folder.

jQuery Unobtrusive

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

Step 4: Create the viewmodel, add method GetList and you may take this from DB. I have given hardcoded vales.
  1. public class ImageModel   
  2. {  
  3.     public ImageViewModel SelectedImage;  
  4.     public ImageModel()   
  5.   {  
  6.   
  7.     }  
  8.   
  9.     public List < ImageViewModel > GetList()   
  10.     {  
  11.         List < ImageViewModel > list = new List < ImageViewModel > ();  
  12.         list.Add(new ImageViewModel   
  13.         {  
  14.             Id = 1, Path = "~/Content/Images/IMG_7785.jpg"  
  15.         });  
  16.         list.Add(new ImageViewModel   
  17.         {  
  18.             Id = 2, Path = "~/Content/Images/IMG_7788.jpg"  
  19.         });  
  20.         list.Add(new ImageViewModel   
  21.         {  
  22.             Id = 3, Path = "~/Content/Images/IMG_7790.jpg"  
  23.         });  
  24.         list.Add(new ImageViewModel   
  25.         {  
  26.             Id = 4, Path = "~/Content/Images/IMG_7799.jpg"  
  27.         });  
  28.         list.Add(new ImageViewModel   
  29.         {  
  30.             Id = 5, Path = "~/Content/Images/IMG_7847.jpg"  
  31.         });  
  32.         list.Add(new ImageViewModel   
  33.         {  
  34.             Id = 6, Path = "~/Content/Images/IMG_7849.jpg"  
  35.         });  
  36.         return list;  
  37.     }  
  38.   
  39. }  
Step 5: Call the Partial view in main view inside the Div,

Div

Step 6: Add Ajax.BeginForm

It has the following parameters,
  1. Action Name
  2. Controller Name
  3. AjaxOption (mention HttpMethod =post , UpdateTargetId = “Traget Div to update”

    Also add Two button Prev and next My Ajax.BegineForm is as below.

For the btnPrev and btnNext two different values are given and common Name is given as ButtonType. Both the conditions are manipulated in the controller.

controller

And My Final View is as below,

  1. @model DropdownGrid.Models.ImageModel  
  2.   
  3. @ {  
  4.     ViewBag.Title = "Albam";  
  5. }  
  6.   
  7. < h2 > Index < /h2> < script type = "text/javascript"  
  8. src = "@Url.Content("~/Scripts/jquery - 1.10 .2.js ")" > < /script> < script type = "text/javascript"  
  9. src = "@Url.Content("~/Scripts/jquery.unobtrusive - ajax.min.js ")" > < /script>  
  10.   
  11.   
  12. < br >  
  13.     < br >  
  14.     < br >  
  15.     < br >  
  16.   
  17.     < fieldset >  
  18.     < div id = "dvCategoryResults" >  
  19.     @ {  
  20.         Html.RenderPartial("_PartialImage", Model);  
  21.     } < /div> < /fieldset>  
  22.   
  23. < fieldset >  
  24.     @using(Ajax.BeginForm("GetNextOrPrevImage""Image"new   
  25.     {  
  26.             SelectedId = Model.SelectedImage  
  27.         },  
  28.         new AjaxOptions   
  29.             {  
  30.             HttpMethod = "Post", UpdateTargetId = "dvCategoryResults"  
  31.         })) {  
  32.   
  33.         < input type = "submit"  
  34.         value = "<"  
  35.         id = "btnPrev"  
  36.         name = "ButtonType" / >  
  37.             < input type = "submit"  
  38.         value = ">"  
  39.         id = "btnNext"  
  40.         name = "ButtonType" / >  
  41.     }   
  42. < /fieldset>  
Controller Code
  1. public class ImageController: Controller   
  2. {  
  3.     public ActionResult Index() {  
  4.         ImageModel _objuserloginmodel = new ImageModel();  
  5.         ViewBag.SelectedId = 0;  
  6.         TempData["SelectedId"] = 0;  
  7.   
  8.         _objuserloginmodel.SelectedImage = _objuserloginmodel.GetList()[0];  
  9.         return View(_objuserloginmodel);  
  10.     }  
  11.   
  12.     [HttpPost]  
  13.     public ActionResult GetNextOrPrevImage(ImageViewModel SelectedImage, string ButtonType)   
  14.     {  
  15.         ImageModel _objuserloginmodel = new ImageModel();  
  16.         List < ImageViewModel > GetList = _objuserloginmodel.GetList();  
  17.   
  18.         int id = System.Convert.ToInt32(TempData["SelectedId"]);  
  19.   
  20.         if (ButtonType.Trim() == ">")  
  21.             _objuserloginmodel.SelectedImage = GetList[++id < GetList.Count ? id : --id];  
  22.         else if (ButtonType.Trim() == "<")  
  23.             _objuserloginmodel.SelectedImage = GetList[--id > -1 ? id : ++id];  
  24.   
  25.         TempData["SelectedId"] = id;  
  26.         return PartialView("_PartialImage", _objuserloginmodel);  
  27.     }  
  28. }  
Hence you will get your div with partial view updates on submit button using Ajax.BeginForm.
partial view
On Submit button you can see the partial view updates without postback whole form.


Similar Articles