Link to home
Create AccountLog in
Avatar of Tom Knowlton
Tom KnowltonFlag for United States of America

asked on

multiple references to the same partial view on the same page - but each partial view uses different data.

IMPORTANT:  I want to avoid the use of a Controller to handle the data.  I prefer to provide the data through ViewData[] dictionary.

Open in new window


I have a partial view which makes use of ViewData[] in order to know what items to add into the list items for an unordered list.


However, if I try to use the partial view more than once on the same page, it does not work.  The second partial view uses the previous ViewData values.  There are also concerns about duplicate ID and CSS classes, especially since the CSS classes are what is used to find the <li> HTML elements and provide the data for those elements.


Here is my current approach:


In the page that is making use of the partial views, I set the ViewData[] dictionary with the columns I want to use:

  ViewData["cats"] = "StopCount,PickupCount,MilesDriven,RouteHoursOver12,RouteHoursZero,CartsZero,StoreNotSet,NotVerified";

Open in new window

  


Then I reference the partial view later on like this:

 @Html.Partial("../Shared/mods/_TruckingInstructions", @ViewData["cats"])

Open in new window



or if I have a second partial view further down in the same page that needs different data, I do this:

. . .
. . .


 @{
     ViewData["cats"] = "";

@* notice I am leaving out the first entry, "StopCount" so that it is an "empty string" and results in the removal of that <li> element from the DOM *@
     ViewData["cats"] = ",PickupCount,MilesDriven,RouteHoursOver12,RouteHoursZero,CartsZero,StoreNotSet,NotVerified";
 }
  
  @Html.Partial("../Shared/mods/_TruckingInstructions", @ViewData["cats"])


. . .
. . .

Open in new window



In the "_TruckingInstructions" partial view, I use a hidden <div> to hold the data:

<div class="tempdata">
    @ViewData["cats"]
</div>

Open in new window



Then I make use of JavaScript / jQuery to fill the relevant <li> elements with data (or remove them from the DOM):


sample <li> element:

 <li class="li-pickup-count li-pickup-count-color col-1"></li>

Open in new window


Here is the JavaScript:

 //get the text from the ViewData[] dictionary passed in from the calling page
 var myData = $(".tempdata").text();
//split the data into an array of 8 strings
 var cats = myData.split(",");


 var stopcount = cats[0].trim();
 var pickupcount = cats[1].trim();
 var milesdriven = cats[2].trim();
 var rho12 = cats[3].trim();
 var rhz = cats[4].trim();
 var cartszero = cats[5].trim();
 var storenotset = cats[6].trim();
 var notverified = cats[7].trim();


 hideOrShowTruckingInstr(".li-stop-count", stopcount);
 hideOrShowTruckingInstr(".li-pickup-count", pickupcount);
 hideOrShowTruckingInstr(".li-miles-driven", milesdriven);
 hideOrShowTruckingInstr(".li-route-hours-gt-12", rho12);
 hideOrShowTruckingInstr(".li-route-hours-zero", rhz);
 hideOrShowTruckingInstr(".li-carts-zero", cartszero);
 hideOrShowTruckingInstr(".li-store-not-set", storenotset);
 hideOrShowTruckingInstr(".li-not-verified", notverified);  

Open in new window


and also:


function hideOrShowTruckingInstr(element, tempvalue) {
    if (tempvalue !== "") {
        $(element).text(tempvalue);
    }
    else {
        $(element).remove();
    }
}

Open in new window



For ONE reference to the partial view -- this all works great.



But I want to support 10 or more partial view references to the identical partial view, all of them on the SAME same "parent" page.




ASKER CERTIFIED SOLUTION
Avatar of David H.H.Lee
David H.H.Lee
Flag of Malaysia image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account