ClientBlockRepeater

The ClientBlockRepeater is a repater to be use just in Client Blocks

 

public static MvcHtmlString ClientBlockRepeater<T, F>(
            this HtmlHelper<T> htmlHelper,
            Expression<Func<T, IEnumerable<F>>> expression,
            object template,
            ExternalContainerType itemsContainer = ExternalContainerType.div,
            object htmlAttributes = null,
            F itemPrototype = null,
            string overrideTemplateName=null,
            string afterAdd = null,
            string beforeRemove = null,
            string afterRender = null,
            string afterAllRender = null,
            object templateOptions = null,
            bool applyClientValidation = true,
            bool fastNoJavaScript = false,
            string templateEngine=null,
            string templateChoice=null
            )
            where F: class
            where T:class

 

The collection specified by expression is rendered by using the the template template for each collection item, and inserted in a container whose tag is specified by the itemContainer parameter. The htmlAttributes parameter specifies the Html attributes of the container.  template can be also an array of templates; in this case the template used to render each item is selected by the javascript function passed in the templateChoice parameter. 

The template provided is compiled into a client side template and used on the client side. If overrideTemplateName is null the template will be given the name Html.PrefixedId(expression)+"Template", otherwise overrideTemplateName will be used as template name.

This name is used also as basic name to compute all template names when we provide an array of templates.  More specifically the basic name is postfixed with the index in the array of each template. Thus, the template at index 0 in the array has the name BasicName0, the one at index 1 has name BasicName1, and so on.

The javascript function templateChoice to select the right template for each element can be specified either through its name or with a string like function(item){.....}. It is optional since we need to specify it just in case we provide multiple arrays. The function templateChoice receives an item as argument,and it must return the complete name of the template to use.

If itemPrototype is provided it will be serialized in json and used to define a javascript prototype for the objects F of the collection on the client side. It will be put in a javascript global variable having the same name of the template. Thus, for instance, to create a new element of the collection specified by expression on the client side it will be enough to call new templateName(); where templateName is the name that was given to the template.

beforeRemoveAfterAddafterRender, and afterAllRender are javascript functions that are specified either as  names of methods of the ViewModel, or with the lambda format (function(....){....}).

beforeRemove and AfterAdd are called respectively before removing an Html node and after having created it. They are passed the Html node as argument.

afterRender, and afterAllRender are called, respectively, after having instantiated each template and after all template rendering job triggered by a modification of the ViewModel array is terminated. They are a good opportunity to initialize each single item, for instance by applying to it some jQuery UI, and to initialize the whole collection of Html nodes, for instance by calling .sortable("refresh") if we would like to handle all elements as a jQuery UI sortable. afterRender is passed the array of all Dom nodes created as a result of the template instantiation. afterAllRender is passed two arguments: the root element of all Html nodes, and the ViewModel.

The newly created elements are parsed for unobtrusive validation only if applyClientValidation is true.

fastNoJavascript declares that the template doesn't contain any javascript. In this case the template instantiation is simpler and faster.

templateEngine is passed to use a template engine different from the default template engine, see here for more information.

There is also a different overload of the ClientBlockRepeater where the template can be specified through its previously assigned name:

 

public static MvcHtmlString ClientBlockRepeater<T, F>(
            this HtmlHelper<T> htmlHelper,
            string templateName,
            Expression<Func<T, F>> expression,
            ExternalContainerType itemsContainer = ExternalContainerType.div,
            object htmlAttributes = null,
            string afterAdd = null,
            string beforeRemove = null,
            string afterRender = null,
            string afterAllRender = null,
            object templateOptions = null,
            bool applyClientValidation = true,
            bool fastNoJavaScript = false,
            string templateEngine=null
            )

 

For more information on client side templates please see here: Client-Side Templates 

Below an examplke of use of the ClientBlockRepeater:

 

<table >
                  <thead>
                      <tr>
                      <td><strong>Product</strong></td>
                      <td><strong>Price</strong></td>
                      <td><strong>Discount</strong></td>
                      <td><strong>Select Product</strong></td>
                  
                      </tr>
                  </thead>
                  @{  Html.DeclareStringArray(new string[] { "", Url.Content("~/Content/discount25.png"), Url.Content("~/Content/discount35.png") }, "discountUrls");
                      Html.DeclareStringArray(new string[] { "", "25%", "35%" }, "discountAlts");}
                   @Html.ClientBlockRepeater(m => m.Products,
                       _S.H<ProductViewBase>(
                            @<tr>
                                    <td>
                                    @item._D(m => m.Description)
                                    </td>
                                    <td>
                                    @item._D(m => m.Price)
                                    </td>
                                    <td>@item._D(m => m.Discount, null, "discountAlts", "discountUrls")</td>
                                    <td><a href="#" data-bind="click: function() { productsClientView.buyProduct($data) }">Buy</a> </td>
                             </tr>
                        ),
                        ExternalContainerType.tbody,
                        new { id = "ProductsContainer" }) 
                  </table>

Where we used also the advanced feature of the _D helper to render an enumeration with an array of images.  The repeater is used to fill the TBody of an html table.

Last edited Jun 22, 2014 at 10:42 AM by frankabbruzzese, version 8

Comments

No comments yet.