Client Side Handling of Simple Server Controls

These functions need reference to MVCControlToolkit.Controls.Core-x.x.x.js.

Referring to Dom nodes from javascript.

In order to interact with the Html elements generated by some Mvc Controls Toolkit server control one needs to know their ids.  The basic tool to solve this problem is the PrefixedId Html helper that computes the full id of a dom element. If the dom element is created with an html helper element through a Lambda Expression, such as for instance Html.TextBoxFor(m => m.Name), then we can get its id with something like Html.PrefixedId(m => m.Name). Anagously, if the Html element is created with something like Html.TextBox("Name", Model.Name) one can use another overload of the PrefixedId helper that accepts the propery name as a parameter, so we have something like Html.PrefixedId("Name"). In both cases the PrefixedId compute the right id also if the Html element is contained in a row of a grid, or, in general, in a template of a server control.

One can use the PrefixedId helper also to give an unique id to an html element that is in the template of an items control such as a TreeView or a DataGrid. If, for instance, one would like to give an unique id to all links that are contained a specific column of all rows of a Datagrid one can write something like:

 

<a id='@item.PrefixedId("MyLink")', href=....>...</>

 

Then we can use the same PrefixedId in the same way to refer to that link from javascript. 

One can also use simply: @item.PrefixedId(string.Empty) that yields the prefix used for all ids in the template or View we are in. Then, we can add to it the ids of the DOM elements we would like to manipulate from javascript. In this case we have to add also an underscore, thus for our previous example we have to add '_MyLink' to the prefix returned by  @item.PrefixedId(string.Empty).

Finally it is worth to know the standard name given by the Mvc Controls Toolkit  to each item container  of all items controls:

  • SortableList:  @item.PrefixedId('Container')
  • TreeView: @item.PrefixedId('SubContainer'). In this case the name is SubContainer because there is another container that surround each item, that is handled automatically by the Mvc Controls Toolkit.
  • DataGrid: @item.PrefixedId('Edit_Container') for the edit mode container, and @item.PrefixedId('Display_Container') for the display mode container

Thus if we want run some initialization code when each item is added to the DOM we can write something like:

 

<script language='javascript' type='text/javascript'>
initializeRow('@item.PrefixedId("Container")');
</script>

 

Then, in the initialize function we can use selecors like: $('#'+prefix'+' input.MyCssClass'). Where prefix is the name of the prameter of initializeRow.

As an alternative we can write something like:

 

<script language='javascript' type='text/javascript'>
initializeRow('@item.PrefixedId(string.Empty)');
</script>

 

Then we can use id based selectors like: $('#'+prefix+'_MyLink').

 

Referring to Complex Server Controls from javascript.

In case the server control is composed by several Html nodes as in the case of DateTimeInput, TypedTextBox, and TypedEditDisplay, there is no specific id one can use to manipulate the control from javascript. In such cases the Html.PrefixedId(m => m.MyProperty) returns an id that we call a virtual id that cannot be used with the standard Dom manipulation javascript function, but that we can pass to ad hoc javascript functions of the Mvc Controls Toolkit both to set/get the value stored in the control and to attach a change handler to it.

The Mvc Controls Toolkit client side function to set the value of a server control are:

version >= 3.0.0

  • mvcct.widgets.DateTimeInput.setById(id, value, format, valueType)
  • mvcct.widgets.TypedTextBox.setById(id, value, format, valueType)
  • mvcct.widgets.TypedEditDisplay.setById(id, value, format, valueType)

version < 3.0.0

  • MvcControlsToolkit_DateTimeInput_SetById(id, value, format, valueType)
  • MvcControlsToolkit_TypedTextBox_SetById(id, value, format, valueType)
  • MvcControlsToolkit_TypedEditDisplay_SetById(id, value, format, valueType)

Where:

  • id: the virtual id as returned by the PrefixedId helper;
  • valueType: an integer encoding the type of the value. It must be one of the type constants reported in the Client Side Helpers Function section. It is used just by the TypedTextBox and by the TypedEditDisplay. In the case of the DateTimeInput it is not used and it can be null, since the type is implicitely assumed to be: MvcControlsToolkit_DataType_DateTime .
  • value: the value to set the server control to. Its javascript  type must be consistent with the valueType. Thus, for instance, in case of a date or time it must be a javascript Date object.
  • format: the format string to use to display the value. It is not used by any of the above controls and it must always be the empty string '', since each of them has already a format string associated to it. It has been introduced just for possible future extensions.

The Mvc Controls Toolkit client side function to get the value of a server control are:

version >= 3.0.0

  • mvcct.widgets.DateTimeInput.getById(id, valueType)
  • mvcct.widgets.TypedTextBox.getById(id, valueType)
  • mvcct.widgets.TypedEditDisplay.getById(id, valueType)

version < 3.0.0

  • MvcControlsToolkit_DateTimeInput_GetById(id, valueType)
  • MvcControlsToolkit_TypedTextBox_GetById(id, valueType)
  • MvcControlsToolkit_TypedEditDisplay_GetById(id, valueType)

Where the meanig a constraints on the parameters are as for the set functions. The value returned is of the javascript type consistent with valueType.

Available also versions with set and get instead of setById and getById, that accepts the html node instead of its id.

Finally the functions to bind and unbind a change handler are:

version >= 3.0.0

  • mvcct.widgets.DateTimeInput.bindChange(id, handler)/mvcct.widgets.unbindChange(id, handler)
  • mvcct.widgets.TypedTextBox.bindChange(id, handler)/mvcct.widgets.unbindChange(id, handler)
  • mvcct.widgets.bindChange(id, handler)/mvcct.widgets.unbindChange(id, handler)

version < 3.0.0

  • MvcControlsToolkit_DateTimeInput_BindChange(id, handler)/MvcControlsToolkit_DateTimeInput_UnbindChange(id, handler)
  • MvcControlsToolkit_TypedTextBox_BindChange(id, handler)/ MvcControlsToolkit_TypedTextBox_UnbindChange(id, handler)
  • MvcControlsToolkit_TypedEditDisplay_BindChange(id, handler)/MvcControlsToolkit_TypedEditDisplay_UnbindChange(id, handler)

Where id is the virtual id and handler is a standard jQuery event handler. Please notice that in order to succesfully unbind an handler one has to pass exactly the same handler pointer previously passed to the bind method.

Last edited Jun 22, 2014 at 11:58 AM by frankabbruzzese, version 13

Comments

No comments yet.