ViewList and ViewListFor Helpers 

This control needs reference to MVCControlToolkit.Controls.Core-x.x.x.js 

The ViewList and VieListFor  helpers and the associated Selection Buttons, allow the selection of one of several contents to be shown in the View: only the input fields of  the selected content are posted. The joint use of  ViewList and DataFilter helper enables users to choose among several data filtering options. While the joint use of ViewList and   NullableUpdater or ReferenceTypeUpdater enables users to choose among mutually exclusive inputs.

 VieList and VieListFor helpers define a Choice Set. Each Choice Set can be composed by generic html elements, and only one element of the Choice Set can in the selected state(exactly like radio buttons). In order to insert an element in a Choice Set it is enough to assign it the CSS class that is defined in the VieList or ViewListFor helper.

For instance:


@Html.ViewListFor(m => m.Selection, "choiceTest", "isChangedToDo")


The above instruction defines a Choice Set whose CSS class is "choiceTest". "isChangedToDo" is another CSS class that is applied to the Selection Button that is associated to the currently selected element.

if the ViewList is located within an item of some item control, we can't use the same name "choiceTest" for all items because each item must have its own choice test. In order to make this name unique we can prefix it with the id-prefix of the each item with the help of the PrefixeId extension method: 


@Html.ViewListFor(m => m.Selection, "choiceTest", Html.PrefixedId("isChangedToDo"))


Selection Buttons allow the selection of the selected  item, that is the only item that will be shown,  and one can have several Selection Buttons that select the same element of the Coice Set placed in different areas of the View.

For instance:


@Html.SelectionButton("choice 1", "choice1", Html.PrefixedId("choiceTest"), Html.PrefixedId("choice1_button"), ManipulationButtonStyle.Link) 


defines a Selection Button whose id is Html.PrefixedId("choice1_button")(the id of the button is not relevant, but can be provided in order to reference it in some javascript code), that works with the Choice Set defined by the CSS class "choiceTest"(the same one defined in the other previous example), the text that will appear on the button is "choice 1"(the first parameter of the helper) and the "selection" associated with this button is "choice1"(the second parameter of the helper). A "selection" is just a string that univocally identifies a DOM element in the Choice Set. More specifically a selection string x refers to a DOM element whose id is Html.PrefixedId(x), thus, in our example the selection button refers to a DOM element whose id is Html.PrefixedId("choice1").  Please notice that the content of the m.Selection field is supposed to be the selection not the id of its associated DOM element, thus in our case "choice1" not Html.PrefixedId("choice1").

Finally, the appearence of the button can be specified by means of the ManipulationButtonStyle enumeration. When "choice1" is selected the  "isChangedToDo" CSS style will be applied to its associated DOM element.  

Each element can be selected not only with a Selection Button but also with a checkbox.  A set of checkboxes can be associated with a Choice Set by assigning to each checkbox the class obtained by postfixing the CSS class name defined in the ViewList or VieListFor helper with "__checkbox". Thus, for instance in the example above the checkbox associated with the "choice1" element is: 

<input id="Checkbox6" type="checkbox" class='<%: Html.PrefixedId("choiceTest_checkbox") +" "+ Html.PrefixedId("choice1_checkbox")%>' />

Please notice that there is another CSS class attached to the checkbox, namely: "choice1_checkbox". This CSS name is obtained by postfixing the id of the element the checkbox is associated to, with "_checkbox".

The whole code of the example is:

@Html.ViewListFor(m => m.Selection, Html.PrefixedId("choiceTest"), "isChangedToDo")
@:Html.SelectionButton("choice 1", "choice1", Html.PrefixedId("choiceTest"), Html.PrefixedId("choice1_button"), ManipulationButtonStyle.Link) 
@Html.SelectionButton("choice 2", "choice2", Html.PrefixedId("choiceTest"), Html.PrefixedId("choice2_button"), ManipulationButtonStyle.Link)
@Html.SelectionButton("choice 3", "choice3", Html.PrefixedId("choiceTest"), Html.PrefixedId("choice3_button"), ManipulationButtonStyle.Link)
<input id="Checkbox6" type="checkbox" class='@(Html.PrefixedId("choiceTest_checkbox")+" "+Html.PrefixedId("choice1_checkbox"))' />
<input id="Checkbox7" type="checkbox"  class='@(Html.PrefixedId("choiceTest_checkbox")+" "+Html.PrefixedId("choice2_checkbox"))'/>
<input id="Checkbox8" type="checkbox"  class='@(Html.PrefixedId("choiceTest_checkbox")+" "+Html.PrefixedId("choice3_checkbox"))'/>
<div id="fatherChoices">
   <div id='@Html.PrefixedId("choice1")'  class="choiceTest"></div>
   <div id='@Html.PrefixedId("choice2")'  class="choiceTest">choice 2</div>
   <div id='@Html.PrefixedId("choice3")'  class="choiceTest">choice 3</div>

The "choice1" element contains a DataFilter helper that render some input elements to "build" a Linq expression filter. The content of such imput elements will be posted to the server and will be inserted into the filter only if "choice1" is selected, because not-selected elements are detached from the DOM.

The above example is included in the binary distribution of the Mvc Controls Toolkit. If you run it you will see that whenever one click a Selection Button not only the appearence of the selection Button changes but also the checkbox associated with the selected element becomes selected. In general when an element becomes selected all the selection tools associated with it change accordingly.

The difference between ViewList and VieListFor is that the first parameter of the VieListFor is an expression that defines a ViewModel property where to store the selection  in case the developer would decide to make the choice "transparent" to the Controller. 

Last edited Jun 22, 2014 at 11:53 AM by frankabbruzzese, version 19


No comments yet.