Passing array form to controller

Question

How can I send array of model from html view to controller. In this code I receive null on controller parameter.

public class PropModel
{
    public string Name { get; set; }
    public string Value { get; set; }
}

[HttpPost]
public ActionResult Index(PropModel[] model)
{
        foreach (var r in model)
        {
            //Do somethings
        }
        return View();
}

View:

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title></title>
</head>
<body>
    <div>

        @using (Html.BeginForm())
        {
            for (int i = 0; i < 3; i++)
            {
                @Html.TextBox("Name")
                @Html.TextBox("Value")
            <br/>
            }
            <input type="submit" value="submit"/>
        }
    </div>
</body>
</html>

Use editor templates stackoverflow.com/questions/9823482/… — Shyju
– Shyju, Commented Mar 10, 2014 at 19:29
@Shyju I should use templates editor only or there is another solution? — Hadi Sharifi
– Hadi Sharifi, Commented Mar 10, 2014 at 19:34

tulde23 · Accepted Answer · 2014-03-10 19:35:17Z

2

@model List<PropModel>
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title></title>
</head>
<body>
    <div>

        @using (Html.BeginForm())
        {
            for (int i = 0; i < 3; i++)
            {
                @Html.TextBoxFor(m=>this.Model[i].Name)
                @Html.TextBoxFor(m=>this.Model[i].Value)
            <br/>
            }
            <input type="submit" value="submit"/>
        }
    </div>
</body>
</html>

The magic is in how you name your input fields.

answered Mar 10, 2014 at 19:35

tulde23

4082 silver badges7 bronze badges

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

1 Comment

Hadi Sharifi Over a year ago

I do not want use @model in view because this form generated by for (int i = 0; i < n; i++) that n will be specified by app configuration.

Shyju · Accepted Answer · 2014-03-10 20:27:37Z

You can use EditorTemplates to handle this situation.

Let's make a new viewmodel for our view.

public class PropListVM
{
    public List<PropModel> Props { set; get; }
    public PropListVM()
    {
        Props = new List<PropModel>();
    }
}

Now in our GET Action, we will create an object of this new viewmodel, Set the Props collection and send to our view.

public ActionResult Index()
{           
    var vm = new PropListVM { Props = GetPropsFromSomeWhere() };
    return View(vm);
}
private List<PropModel> GetPropsFromSomeWhere()
{
    var list = new List<PropModel>();
    //Hard coded for demo. You may replace it with DB items
    list.Add(new PropModel { Name = "Detroit", Value = "123" });
    list.Add(new PropModel { Name = "Ann Arbor", Value = "345" });
    return list;
}

Now Let's create an EditorTemplates. Go to ~/Views/YourControllerName and Create a Folder called "EditorTemplates" and create a new view there with the same name as of the Property Name(PropModel.cshtml)

enter image description here

Add this code to your new editor template.

@model ReplaceYourNameSpaceHere.PropModel
<div>
    Name :@Html.TextBoxFor(s=>s.Name) <br />
    Value : @Html.TextBoxFor(s=>s.Value)
</div>

Make sure to replace ReplaceYourNameSpaceHere with your actual namespace where the PropModel class is available.

Now Let's go back to our original view(Index.cshtml) which is strongly typed to an instance of our PropListVM viewmodel.

@model ReplaceYourNameSpaceHere.PropListVM
@using (Html.BeginForm())
{
<div>
    @Html.EditorFor(s=>s.Props)        
    <input type="submit" value="submit"/>
</div>
}

Now let's have an action method to handle the form posting, You will have a parameter of type PropListVM and MVC model binding will bind the properties of this objects from the form posted. You can check the Props property of this object and loop through each items.

[HttpPost]
public ActionResult Index(PropListVM model)
{
    foreach (var prop in model.Props)
    {
        string s = prop.Name;
        //Do cool somethings
    }
    // return or redirect now
    //If we are returning the posted model back to the form, 
    //reload the Props property.
    model.Props = GetPropsFromSomeWhere();
    return View(model);
}

And the result is ??? Profit !!!!!!

In my example, I sent 2 PropModel items with Name and Value properties set, But if you want some empty form, Simply add PropModel objects without initializing any property values. enter image description here

D Stanley · Accepted Answer · 2014-03-10 19:34:25Z

1

I could be wrong, but I think the controller will interpret that post as as array of Names and an array of Values. You could try to either update your method signature:

[HttpPost]
public ActionResult Index(string[] Name, string[] Value)
{

}

Or build your "model" as an array of objects using JSON.

answered Mar 10, 2014 at 19:34

D Stanley

153k12 gold badges190 silver badges257 bronze badges

1 Comment

Hadi Sharifi Over a year ago

Is it possible I get value in one parameter same as PropModel[], It is important to be sorted indexes for both parameters.

Collectives™ on Stack Overflow

Passing array form to controller

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related