>

_with & _foreach

The Data Moving Plug-In offers Html extensions to render enhanced knockout.js control flow operators: if, ifnot, with, and foreach. These operators have been enhanced as follows:

  • They work with generic Data Moving Plug-in templates, instead of simple Html knockout templates. This means we may use Razor, HtmlHelper<T> extensions, and Data Moving controls inside them.
  • All input fields and controls are automatically bound to the Client Side ViewModel associated with the ClientHelper we used to define them.
  • All input fields and controls are given names and ids that conforms to the Mvc naming conventions. For instance the input field containing the name of the third customer in a foreach will have a name of the type: htmlPrefix.Customer[3].Name. 
  • Both client side and server side validation  work properly with all content created by the control flow statements. Server side validation works both if errors are returned by means of a standard page rendering, or if they are returned by a json update to the server handled by either an  updatesManager or a viewModelUpdatesManager. Moreover, both client side and server side validation errors take advantage of all Data Moving-Plug-in enhancements of the standard Asp.net validation engine.

The _with extension may work in detail-mode to display detail views of data contained in Items Conrols (Grids and TreeViews). In this case, validation errors are synchronized with the item being displayed in the detail view.

Below an example of usage of a _with helper:

@ch._with0(m => m.CurrentDetail,
    @<text>
        <p>
        <span class='ui-widget-header'>@item.LabelFor(m => m.Name)
               </span>
        :
        @item.TypedEditDisplayFor(m => m.Name, simpleClick: true)
        @item.ValidationMessageFor(m => m.Name, "*")
        </p>
        <p>
        <span class='ui-widget-header'>@item.LabelFor(m => m.Surname)
              </span>
        :
        @item.TypedEditDisplayFor(m => m.Surname, simpleClick: true)
        @item.ValidationMessageFor(m => m.Surname, "*")
        </p>
        <p>
        <span class='ui-widget-header'>@item.LabelFor(m => m.EMail)
              </span>
        :
        @item.TypedEditDisplayFor(m => m.EMail, simpleClick: true)
        @item.ValidationMessageFor(m => m.EMail, "*")
        </p>
        <p>
        <span class='ui-widget-header'>@item.LabelFor(m => m.Address)
              </span>
        :
        @item.TypedEditDisplayFor(m => m.Address, simpleClick: true)
        @item.ValidationMessageFor(m => m.Address, "*")
        </p>
        <p>
        <span class='ui-widget-header'>
             @item.LabelFor(m => m.CanBeTeamLeader)
        </span>
        :
        @item.CheckBoxFor(m => m.CanBeTeamLeader)
        </p>
    </text>
ExternalContainerType.koComment,
  forceHtmlRefresh: true, isDetail: true)