Click here to Skip to main content
15,868,016 members
Articles / Web Development / ASP.NET

Dynamically adding controls on a hierarchical structure on MVC

Rate me:
Please Sign up or sign in to vote.
5.00/5 (13 votes)
6 Aug 2012Ms-PL4 min read 87.1K   3.4K   31   8
How to dynamically add controls on a hierarchical structure on MVC.

Introduction

Building a hierarchical UI in MVC is most of the time very hard when you want to edit it and submit data to server. Depending on how complicated is it can be quite hard to post data to server. The solution which I'll present will show an example of how we can edit a hierarchical structure like:

Image 1

Having this kind of structure on UI, it is hard to dynamically add controls and POST the data to server. Usually in this cases you need to manually iterate all UI controls and create the object you want to POST it to server. The target for this solution is to have the object (the ViewModel for that view) automatically created and POST to server, so we don’t need to do any parsing. Basically we will be able to add items (e.g. Category item, SubCategory item or Product item) on UI and when the form is posted to server then the ViewModel is automatically created for us. The server will receive the object like:

Image 2

Solution

The View Model classes used for this example are: 

C#
public class OrderViewModel
{
    public OrderViewModel()
    {
        Categories = new List<CategoryViewModel>();
    }
    public string Name { get; set; }

    public List<CategoryViewModel> Categories { get; set; }
}  

public class CategoryViewModel
{
    public CategoryViewModel()
    {
        Subcategories = new List<SubCategoryViewModel>();
    }
    public string Name { get; set; }
    public List<SubCategoryViewModel> Subcategories { get; set; }
}

public class SubCategoryViewModel
{
    public SubCategoryViewModel()
    {
        Products = new List<ProductViewModel>();
    }
    public string Name { get; set; }
    public List<ProductViewModel> Products { get; set; }
    public string PreviousFieldId { get; set; }
}

public class ProductViewModel
{
    public string Name { get; set; }
    public double Price { get; set; }
    public string PreviousFieldId { get; set; }
}

For UI we need to create PartialViews for each of those ViewModels. Until now everything is simple and straight forward, but the problem will start to appear when you do those partial views. For example: for Category View you would do something like:  

C#
<div>
    <div class="editor-label">
        <div>
              Categories
        </div>
    </div>
    <fieldset>
        <div>
           Name:@Html.TextBoxFor(t => t.Name)
        </div>
           @Html.Partial("SubcategoriesPartial", Model.Subcategories)
    </fieldset>
</div>

For the SubcategoriesPartial partial view you would do something like: 

C#
<div>
    <fieldset>
        <div>
            <div class="editor-label">
                <div>
                    Subcategories
                </div>
            </div>
            <div class="editor-label">
                <div>
                    @Html.ActionLink("Add another subcategory...", 
                      "AddSubCategory", null, new { @class = "addSubcategoryItem" })
                    @foreach (var subcategory in Model)
                    {
                        @Html.Partial("SubcategoryPartial", subcategory)
                    }
                </div>
            </div>
        </div>
    </fieldset>
</div>

And SubcategoryPartial partial view is:

XML
<fieldset>
        <div>
            <div class="editor-label" style="float: left; width: 70px;">
                Name:
            </div>
            <div style="float: left">
                @Html.TextBoxFor(m => m.Name)
            </div>
        </div>
        <div style="clear: both">
            <div class="editor-label" style="float: left; width: 70px">
                <div>
                    Products:
                </div>
            </div>
            <div style="float: left">
                <fieldset>
                    <div>
                        @Html.ActionLink("Add product...", "AddProduct", null, new { @class = "addProductItem" })
                        @foreach (var prod in @Model.Products)
                        {
                            @Html.Partial("ProductPartial", prod)
                        }
                    </div>
                </fieldset>
            </div>
        </div>
</fieldset>

And so on you will do the UI. Unfortunately this is OK only if you want to display the data. When you want to allow the user to edit this data (adding more/editing categories, subcategories or products) then those views are not done well. If you have those Views then when you submit the form to server, the MVC framework won’t be able to recreate the OrderViewModel because the id’s for each controls are not generated correctly.

In this case the input tags generated for category and subcategory name will look like: 

C#
For Category Name:
<input id="Name" type="text" value="category 0" name="Name">
 
For SubCategory Name:
<input id="Name" type="text" value="SubCategory 0" name="Name"> 

As you can see there is no way to differentiate between category name and subcategory name because both generated input controls have the same name and id. In order to differentiate between those, each input control must have a proper id which will look like:  

C#
For Category Name:
<input id="Categories_0__Name" type="text" value="category 0" name="Categories[0].Name">
 
For SubCategory Name:
<input id="Categories_0__Subcategories_0__Name" type="text" value="SubCategory 0" name="Categories[0].Subcategories[0].Name"> 

As you can see in this case you can differentiate between those input controls and the ViewModel can be generated when you submit the form to server. This approach is good only when you allow edit of existing items (not adding ore removing items from those view model collections). In case of you want to add or remove items you will need to generate the correct index for each control which is very hard to keep track of all used indexes for each collection.

Another approach will be to replace the index with a GUID and use the generated GUID as it is an index from the collection. Using this latest approach the input controls will look like: 

XML
For Category:
<input type="hidden" value="8b9309b2-ad7b-45c0-9725-efd1cc56a514" autocomplete="off" name="Categories.index">
<input id="Categories_8b9309b2-ad7b-45c0-9725-efd1cc56a514__Name" type="text" 
  value="category 0" name="Categories[8b9309b2-ad7b-45c0-9725-efd1cc56a514].Name">
 
For SubCategory:
<input type="hidden" value="ecafcc7c-f1e1-4a2c-af3f-fd1b1ff376cc" 
  autocomplete="off" name="Categories[8b9309b2-ad7b-45c0-9725-efd1cc56a514].Subcategories.index">
<input id="Categories_8b9309b2-ad7b-45c0-9725-efd1cc56a514__Subcategories_ecafcc7c-f1e1-4a2c-af3f-fd1b1ff376cc__Name" 
  type="text" value="SubCategory 0" 
  name="Categories[8b9309b2-ad7b-45c0-9725-efd1cc56a514].Subcategories[ecafcc7c-f1e1-4a2c-af3f-fd1b1ff376cc].Name"> 

Basically you need to generate a hidden field for each generated GUID to specify where that Id will be used and use that Id as it is an index. With this approach you can add/edit/remove items and the ViewModel will be generated correctly when you submit the data to server.

Now we need to create a Html helper (Html extension method) which will be able to generate those GUIDs and will put those Ids on correct elements. To do this we need to modify the TemplateInfo.HtmlFieldPrefix only for elements within a code block (within each collection items).

The code for those helper methods is: 

C#
public static class HtmlModelBindingHelperExtensions
{
    private const string IdsToReuseKey = "__HtmlModelBindingHelperExtensions_IdsToReuse_";

    public static IDisposable BeginCollectionItem(this HtmlHelper html, string collectionName)
    {
        var idsToReuse = GetIdsToReuse(html.ViewContext.HttpContext, collectionName);
        string itemIndex = idsToReuse.Count > 0 ? idsToReuse.Dequeue() : Guid.NewGuid().ToString();

        var previousPrefix = html.ViewData.TemplateInfo.HtmlFieldPrefix;
        // autocomplete="off" is needed to work around a very
        // annoying Chrome behaviour whereby it reuses old values after
        // the user clicks "Back", which causes the xyz.index
        // and xyz[...] values to get out of sync.
        html.ViewContext.Writer.WriteLine(string.Format("<input " + 
          "type=\"hidden\" name=\"{0}.index\" autocomplete=\"off\" 
          value=\"{1}\" />", !string.IsNullOrEmpty(previousPrefix) ? 
          string.Concat(previousPrefix.Trim('.'), ".", collectionName) : 
          collectionName, html.Encode(itemIndex)));

        return BeginHtmlFieldPrefix(html, string.Format("{0}[{1}]", collectionName, itemIndex));
    }

    public static IDisposable BeginHtmlFieldPrefix(this HtmlHelper html, string htmlFieldPrefix)
    {
        return new HtmlFieldPrefix(html.ViewData.TemplateInfo, htmlFieldPrefix);
    }

    private static Queue<string> GetIdsToReuse(HttpContextBase httpContext, string collectionName)
    {
        // We need to use the same sequence of IDs following a server-side validation failure,  
        // otherwise the framework won't render the validation error messages next to each item.
        string key = IdsToReuseKey + collectionName;
        var queue = (Queue<string>)httpContext.Items[key];
        if (queue == null)
        {
            httpContext.Items[key] = queue = new Queue<string>();
            var previouslyUsedIds = httpContext.Request[collectionName + ".index"];
            if (!string.IsNullOrEmpty(previouslyUsedIds))
                foreach (string previouslyUsedId in previouslyUsedIds.Split(','))
                    queue.Enqueue(previouslyUsedId);
        }
        return queue;
    }

    private class HtmlFieldPrefix : IDisposable
    {
        private readonly TemplateInfo _templateInfo;
        private readonly string _previousHtmlFieldPrefix;

        public HtmlFieldPrefix(TemplateInfo templateInfo, string htmlFieldPrefix)
        {
            this._templateInfo = templateInfo;

            _previousHtmlFieldPrefix = templateInfo.HtmlFieldPrefix;
            if (!string.IsNullOrEmpty(htmlFieldPrefix))
            {
                templateInfo.HtmlFieldPrefix = string.Format("{0}.{1}", templateInfo.HtmlFieldPrefix,
                                                             htmlFieldPrefix);
            }
        }

        public void Dispose()
        {
            _templateInfo.HtmlFieldPrefix = _previousHtmlFieldPrefix;
        }
    }
} 

All what you need to do is to use those helper methods when you build your partial views. Note that HtmlFieldPrefix implements IDisposable and each helper method returns an IDisposable object because we need to change the HtmlFieldPrefix only for the code which will be executed within our using block.

An example of how you can use those helper methods is: 

C#
For Category items:
@using (@Html.BeginCollectionItem("Categories"))
{
    <div>
        <div>
                <div>
                    Categories
                </div>
            </div>
        <fieldset>
            <div>
                Name:@Html.TextBoxFor(t => t.Name)
            </div>
            @Html.Partial("SubcategoriesPartial", Model.Subcategories)
        </fieldset>
    </div>
}

For SubCategories items:

C#
<fieldset>
    @using (@Html.BeginHtmlFieldPrefix(Model.PreviousFieldId))
    {
        using (@Html.BeginCollectionItem("Subcategories"))
        {
        <div>
            <div style="float: left; width: 70px;">
                Name:
            </div>
            <div style="float: left">
                @Html.TextBoxFor(m => m.Name)
            </div>
        </div>
        <div style="clear: both">
            <div style="float: left; width: 70px">
                <div>
                    Products:
                </div>
            </div>
            <div style="float: left">
                <fieldset>
                    <div id="@Html.ViewData.TemplateInfo.HtmlFieldPrefix.Trim('.')">
                        @Html.ActionLink("Add product...", 
                          "AddProduct", null, new { @class = "addProductItem" })
                        @foreach (var prod in @Model.Products)
                        {
                            @Html.Partial("ProductPartial", prod)
                        }
                    </div>
                </fieldset>
            </div>
        </div>
        }
    }
</fieldset> 

Now we only need to make the Add links working. That is very straight forward. As you can see the links have either Id or class attributed, so we can attach a java script method which will call the server and will append the response to the correct div. The code which does that for Add Category link is:  

JavaScript
$("#addCategoryItem").click(function () {
    $.ajax({
        url: this.href,
        cache: false,
        success: function (html) {
            $("#div_Categories").append(html);
        },
        error: function (html) {
            alert(html);
        }
    });
    return false;
}); 

For the other two links (Add Sub Category and Add Product) we need to send the parent div Id because in controller we need to set the parent Id to the model in order to have the correct sequence of Id for the added item. So the code which does that is: 

JavaScript
$(".addSubcategoryItem").click(handleNewItemClick);
 
$(".addProductItem").click(handleNewItemClick);

function handleNewItemClick() {        
    var parent = this.parentElement;
    var formData = {
        id: parent.id
    };
    $.ajax({
        type: "POST",
        url: this.href,
        data: JSON.stringify(formData),
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            $(parent).append(data);
        },
        error: function (data) {
            alert(data);
        }
    });
    return false;
} 

That was all. Try this solution and let me know if you have any questions.

Using the code

The source zip file includes the MVC project. You only need to extract and open the solution with Visual Studio. To see it in action you need to put a breakpoint on OrderManagerController  on method public ActionResult Edit(OrderViewModel viewModel)( [HttpPost]) to see that all changes which you do on UI are automaticaly reflected on viewModel object. 

References 

The initial aproach can be found here or here. I've enhanced his approach to work with hierarchical data.

History

  • 5 Aug 2012: Initial post to CodeProject  

License

This article, along with any associated source code and files, is licensed under The Microsoft Public License (Ms-PL)


Written By
Software Developer (Senior)
United Kingdom United Kingdom
I am an experienced Software Engineer, possessing a strong experience on working with Web Applications and very enthusiastic to expand on them.

I’m fanatic about latest technology. I like to find better ways of solving challenges.

Comments and Discussions

 
Praisethank you x1000 Pin
SuperJohn1403-Aug-16 10:51
SuperJohn1403-Aug-16 10:51 
GeneralMy vote of 5 Pin
Sean O'Brien29-Sep-15 21:33
Sean O'Brien29-Sep-15 21:33 
GeneralMy vote of 5 Pin
dragan_gace27-Aug-13 2:59
dragan_gace27-Aug-13 2:59 
QuestionRemove dinamycally Pin
rsanchez@iniciasoluciones.es4-Aug-13 22:51
rsanchez@iniciasoluciones.es4-Aug-13 22:51 
QuestionHow to make sure data from UI can pass back to server? Pin
tsoh_tan23-Jul-13 1:06
tsoh_tan23-Jul-13 1:06 
AnswerRe: How to make sure data from UI can pass back to server? Pin
Member 1098652630-Jan-15 10:02
Member 1098652630-Jan-15 10:02 
GeneralGreat Pin
wscan116-Oct-12 12:21
wscan116-Oct-12 12:21 
GeneralMy vote of 5 Pin
mirkasha7-Aug-12 21:31
mirkasha7-Aug-12 21:31 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.