6

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)?

Improve this question

4 Answers 4

Reset to default
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)

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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.

Improve this answer

1 Comment

Looking back I am pretty sure I mixed up part of the answer to stackoverflow.com/questions/716395/… here on accident. Nothing to see in these comments, move along!
0

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.

Improve this answer

Comments

0

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.