Update/Insert/Delete Item List (Obsolete, please use the SortableListFor helper instead)

Thanks to the support offered by the MVCControlToolkit for the IUpdateDisplay interface  one can enrich the Edit Views of Lists with support for addition and deletion of elements without writing  any code in the controller. Suppose we want to edit the Keywords of the previous example keeping them in separate TextBoxes. We need the possibility to edit and delete each keyword, and the possibility of adding a new keyword. 

The following code snippet renders the already  existing elements of the list with a delete-item operation support:

<%: Html.RenderEnumerableFor(m => m.Keywords, "Keyword", true, ItemType.AutoDelete) %>

  1. The first argument selects the property, as usual,
  2. The second argument is the name of a strong typed template to be used to render each item, 
  3. The third argument specifies if support for additions and deletions is required
  4. The ItemType enumeration specifies how deletions are handled
    • ItemType => AutoDelete: Items are considered deleted when they are removed from the DOM. In case of string fields deletion is caused by empty fields, in case of simple types deletion is caused by default value, otherwise some simple javascript is needed to remove the items from the DOM. 
    • ItemType => Simple: Items are never removed. If a data item is removed from the DOM a null (or defaut in case of value type) value is inserted into the List.
    • ItemType => HandlesDelete: Each item is embedded into a wrapper with two properties: Item and Deleted(bool initially set to false). In this case, typically, the Delete property is rendered into a hidden input. To delete the element some javascript code sets this hidden input to true.  If a data item is removed from the DOM without setting Deleted  a null (or defaut in case of value type) value is inserted into the List.

The "Keyword" template below shows how it is easy to modify the list with the help of the new ManipulationButtons

 

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<string>" %>
<%@ Import Namespace=" MVCControlsToolkit.Core" %>
<%@ Import Namespace=" MVCControlsToolkit.Controls" %>
<div id='<%=Html.PrefixedId("Container") %>'>
<%: Html.TextBoxFor(m => m) %><%= Html.ManipulationButton(ManipulationButtonType.Remove, "Delete", 
                                  Html.PrefixedId("Container"), null, ManipulationButtonStyle.Link) %>
</div>

 

 

The PrefixedId Helper just add the template prefix to an id, to avoid name conflicts.

The following code snippet add also a TextBox for inserting a new keyword:

<%: Html.RenderAddItemFor<RegisterModel, List<string>, string>(m => m.Keywords, "KeywordInsert", ItemType.AutoDelete) %>

 Arguments of the helper are the same, but The ItemType requires some explanation:

  • ItemType => AutoDelete: In case of string fields, if the imput field is not empty a new item is created. In case of simple types, if the imput field is different from the default a new item is created. In case of complex types if the item is not removed from the DOM a new tem is created.
  • ItemType => Simple: a new item is always created.
  • ItemType => HandlesDeleteEach item is embedded into a wrapper with two properties: Item and Deleted(bool initially set to true). In order to create the new element some javascript code needs to set tofalse the Deleted field that is initially set to true; This is the most used since it can take advantage of the new ManipulationButtons

The "KeywordInsert" template below shows how it is easy to modify the list with the help of the new ManipulationButtons

 

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<EnumerableUpdater<string>>" %>
<%@ Import Namespace=" MVCControlsToolkit.Core" %>
<%@ Import Namespace=" MVCControlsToolkit.Controls" %>
<div>
<%= Html.ManipulationButton(ManipulationButtonType.Show, "Insert New", 
                                  Html.PrefixedId("Container"), null, ManipulationButtonStyle.Link) %>
<span id='<%=Html.PrefixedId("Container") %>' style="visibility:hidden">
<%: Html.TextBoxFor(m => m.Item) %><%= Html.ManipulationButton(ManipulationButtonType.Hide, "Cancel", 
                                  Html.PrefixedId("Container"), null, ManipulationButtonStyle.Link) %>
</span>
<%: Html.HiddenFor(m => m.Deleted) %>
</div>

 

 

Also here the PrefixedId Helper just add the template prefix to an id, to avoid name conflicts.

Please note that the manipulation buttons not only show/hide a dom element but also set/unset the the Deleted property of the EnumerableUpdater of type HandlesDelete that wraps the item.

That's all! You don't need  any further code! 


Last edited Nov 20, 2010 at 3:54 PM by frankabbruzzese, version 6

Comments

No comments yet.