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. {
  7. }
  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. }
  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
  3. @ {
  4. ViewBag.Title = "Albam";
  5. }
  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>
  12. < br >
  13. < br >
  14. < br >
  15. < br >
  17. < fieldset >
  18. < div id = "dvCategoryResults" >
  19. @ {
  20. Html.RenderPartial("_PartialImage", Model);
  21. } < /div> < /fieldset>
  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. })) {
  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;
  8. _objuserloginmodel.SelectedImage = _objuserloginmodel.GetList()[0];
  9. return View(_objuserloginmodel);
  10. }
  12. [HttpPost]
  13. public ActionResult GetNextOrPrevImage(ImageViewModel SelectedImage, string ButtonType)
  14. {
  15. ImageModel _objuserloginmodel = new ImageModel();
  16. List < ImageViewModel > GetList = _objuserloginmodel.GetList();
  18. int id = System.Convert.ToInt32(TempData["SelectedId"]);
  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];
  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.