First you need to understand how to display multiple partial view in single event follow my below assignment.

Now while displaying the partial view you need to do below change while displaying partial view:

Code

Hence My View has been changed as below way:

  1. @model MutiplePartialViewFadeInFadeOutEffect.Models.MyMultipleUpdateViewModel
  3. @{
  4. ViewBag.Title = "Display Mutiple Partial View Demo";
  5. }
  7. <h2>Index</h2>
  8. <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.10.2.js")"></script>
  9. <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"></script>
  12. <script>
  13. function GetData(url, onSuccess) {
  14. $.ajax({
  15. type: "GET",
  16. cache: false,
  17. url: url,
  18. dataType: "json",
  19. success: function (data, textStatus, jqxhr) {
  20. onSuccess(data.Json, data.Html);
  21. },
  22. error: function (data, text, error) {
  23. alert("Error: " + error);
  24. }
  25. });
  26. return false;
  27. }
  28. function fadeInEffect(json, html) {
  29. $("#PartialViewDiv1").html(html[0]).hide().fadeIn(4000);
  30. $("#PartialViewDiv2").html(html[1]).hide().fadeIn(4000);
  31. }
  32. function fadeOutEffect() {
  33. $("#PartialViewDiv1").fadeOut('slow');
  34. $("#PartialViewDiv2").fadeOut('slow');
  35. }
  37. </script>
  39. <input type="button" onclick="GetData('/DisplayMutiplePartialView/CreatePartialView', fadeInEffect);" value="Multiple Partial View With Fade In effect" />
  40. <input type="button" onclick="fadeOutEffect()" value="Multiple Partial View With Fade Out effect" />
  41. <br>
  42. <br>
  43. <div id="PartialViewDiv1"></div>
  44. </br>
  45. </br>
  46. <div id="PartialViewDiv2"></div>
Hence using above code you will get FadIn and FadOut effect for multiple partial view in MVC using jQuery.

Run the application you will and click on buttons you will start displaying FadIn and FadOut effect in MVC.

Index