Part 4 : Dynamic Partial View Using Java Script

Previously on Part 3, I have explain on how we could code on loading partials when needed.  Part 3 method is best used on partials that deals with forms and require model parse on loading the view.  On this Part 4 tutorial, I'll explain on how we could code dynamic partials that do not require loading delay.

This tutorial will load partial on page load but will set the partial on hidden(but if you would like to display a default partial to being viewed, I'll explain on this later).  Some would ask why should I use Partial view instead dump all the codes on one .cshtml files? My answer is simple, to structured and organized my view.  This way, I wont have trouble  when I need to debug my view codes in future.

First, let's write our javascript.  You could either write this code on different file and save it in javascript format or just embed the code on main .cshtml file.  Both will work without any problem. 

   1: function JSgenSet(y) {

   2:     if (y == "1") {

   3:         document.getElementById("partial1").style.display = "inherit"

   4:         document.getElementById("partial2").style.display = "none"

   5:         document.getElementById("partial3").style.display = "none"

   6:         document.getElementById("partial4").style.display = "none"

   7:     }

   8:     else if (y == "2") {

   9:         document.getElementById("partial1").style.display = "none"

  10:         document.getElementById("partial2").style.display = "inherit"

  11:         document.getElementById("partial3").style.display = "none"

  12:         document.getElementById("partial4").style.display = "none"

  13:     }

  14:     else if (y == "3") {

  15:         document.getElementById("partial1").style.display = "none"

  16:         document.getElementById("partial2").style.display = "none"

  17:         document.getElementById("partial3").style.display = "inherit"

  18:         document.getElementById("partial4").style.display = "none"

  19:     }

  20:     else if (y == "4") {

  21:         document.getElementById("partial1").style.display = "none"

  22:         document.getElementById("partial2").style.display = "none"

  23:         document.getElementById("partial3").style.display = "none"

  24:         document.getElementById("partial4").style.display = "inherit"

  25:     }

  26: }

From the javascript above, we can tell that I am using Id of div to get display styles set either to inherit or none.  Which in this case, inherit will display the div and none will hide the div.  By default, I would now show any of the div in my view.  For my View, this is my code.

Code for main Index.cshtml:

   1: @{

   2:     ViewBag.Title = "Home Page";

   3: }

   4: <h2>@ViewBag.Message</h2>

   5: <p>

   6:     Below I will load my partial view and by default there will be no message what so ever. Click one of the links below to view the partial.

   7: </p>

   8: @* This is my Link to load the partial. You could do it on success function on Ajax too *@ | 

   9: <a onclick="javascript:JSGenSet(1)">Partial 1</a> |

  10: <a onclick="javascript:JSGenSet(2)">Partial 2</a> |

  11: <a onclick="javascript:JSGenSet(3)">Partial 3</a> |

  12: <a onclick="javascript:JSGenSet(4)">Partial 4</a> |

  13:  

  14: @* Below is my partial div(S) *@

  15: <div id="1" style="display:none;">@Html.Partial("_1")</div>

  16: <div id="2" style="display:none;">@Html.Partial("_2")</div>

  17: <div id="3" style="display:none;">@Html.Partial("_3")</div>

  18: <div id="4" style="display:none;">@Html.Partial("_4")</div>

Code for Partial View _1.cshtml

   1: @{

   2:     ViewBag.Title = "Partial 1";

   3: }

   4:  

   5: <h2>Partial 1</h2>

Code for Partial View _2.cshtml

   1: @{

   2:     ViewBag.Title = "Partial 2";

   3: }

   4:  

   5: <h2>Partial 2</h2>

Code for Patial View _3.cshtml

   1: @{

   2:     ViewBag.Title = "Partial 3";

   3: }

   4:  

   5: <h2>Partial 3</h2>

Code for Partial View _4.cshtml

   1: @{

   2:     ViewBag.Title = "Partial 4";

   3: }

   4:  

   5: <h2>Partial 4</h2>

Now, you should press F5 (On Visual Studio 2010) and see how it works in real.

So, it's simple isn't it? This can also be done with PHP and other web programming language and it's useful to display a page which do not have forms to submit.  I'll cover more on how we could make dynamic partial view to display partials with forms and POST the forms value by forms on submit and still preserve the current viewing on my next tutorial.

Until then, please enjoy your MVC 3 exploration and happy programming.  Don't forget to leave comments on how to improve my skills and also please Like this post on Facebook and Blogger.

Blogger Labels: Part,code,method,tutorial,Some,Partial,files,Both,JSgenSet,From,View,Index,ViewBag,Title,Home,Page,Message,Click,links,Link,Ajax,Html,Patial,Visual,Studio,language,POST,exploration,comments,Facebook,Blogger,codes,skills,partials,cshtml,javascript,getElementById,onclick

Thank you for your unbelievable support on Negative Zero - Permission to read and write blog for nearly 4 years. Don't forget to like Negative Zero on Facebook.

Post(s) you might like to read :