ASP.NET MVC & JQuery Dynamic Form Content

Question

I would like to dynamically add fields to an ASP.NET MVC form with JQuery.

Example:

<script language="javascript" type="text/javascript">
    var widgets;

    $(document).ready(function() {
        widgets = 0;
        AddWidget();
    });

    function AddWidget() {
        $('#widgets').append("<li><input type='text' name='widget" + widgets + "'/></li>");
        widgets++;
    }
</script>

<ul id="widgets">
</ul>

This works, but I was going to manually iterate the form values in the controller:

[AcceptVerbs("Post")]
public ActionResult AddWidget(FormCollection form)
{
    foreach (string s in form)
    {
        string t = form[s];
    }

    return RedirectToAction("ActionName");
}

But it occurred to me when I send the user back to the Get Action in the Controller I will have to set the FormData with the values entered and then iteratively add the widgets with <% scripting.

What is the est way to do this in the current release (5 I believe)?

Answer 1

i might be missing the point here, but, do you need to actually post the data back to the controller via a form action? why not make an ajax call using jquery to post the data to the controller...or better yet a web service? send the data async and no need to rebuild the view with the data values sent in.

This works fine if the values are being consumed and never used again, however, if you plan on persisting the data and surfacing it through a the view, your model should really support the data structure. maybe a Dictionary<string, string> on the model.

Answer 2

I'm not a ASP.net developer but I know from PHP that you can use arrays as names for input fields

Ex:

<input type="text" name="widgets[]" />
<input type="text" name="widgets[]" />

You can then iterate through the post variable widgets as if it was an array of values.

No messing around with dynamicaly named variables etc.

Answer 3

As far as I understand the problem is to preserve the posted values in widgets. I thik you can just render those widgest you wont to populate on the server during the View rendering.

Answer 4

My solution could be something like this (pseudo-code):

<script language="javascript" type="text/javascript">
    var widgets;

    $(document).ready(function() {
        widgets = 0;
        <% for each value in ViewData("WidgetValues") %>
             AddWidget(<%= value %>);
        <% next %>
    });

    function AddWidget( value ) {
        $('#widgets').append("<li><input type='text' name='widget" + widgets + 
                             "'>" + value + "</input></li>");
        widgets++;
    }
</script>

<ul id="widgets">
</ul>

And in the controller:

[AcceptVerbs("Post")]
public ActionResult AddWidget(FormCollection form)
{
    dim collValues as new Collection;
    foreach (string s in form)
    {
        string t = form[s];
        collValues.add( t )
    }
    ViewData("WidgetValues") = collValues;
    return RedirectToAction("ActionName");
}

You can work out the details later
(sorry for mixing VB with C#, I'm a VB guy)

Answer 5

Here right answer:

http://stackoverflow.com/questions/2300574/asp-net-c-mvc-changing-dom-structure-and-getting-data-on-the-server