ASP.NET MVC & JQuery Dynamic Form Content

点点圈 提交于 2019-12-05 00:11:50

问题


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


回答1:


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)




回答2:


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.




回答3:


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.




回答4:


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.



来源:https://stackoverflow.com/questions/463644/asp-net-mvc-jquery-dynamic-form-content

工具导航Map

JSON相关