-1

I have a class foo:

public class Foo {
    public String Name;
    public List<bar> BarList;
}

The data layer of my application only accepts a new foo if it contains at least one new bar.

I need to have a view which allows the creation of a new foo and to add as many bar‘s as need be, which will then be posted to the data layer of the application.

So far I’ve been able to post the data for a new foo, but I’ve been unable to create a list of bar‘s within the view to be posted with it. I've a feeling that I'll need to utilise partial views, however I've been unable to get them working correctly.

Chawin
  • 1,396
  • 1
  • 20
  • 32
  • Refer [this answer](http://stackoverflow.com/questions/28019793/submit-same-partial-view-called-multiple-times-data-to-controller/28081308#28081308) for some options –  Sep 12 '16 at 11:42
  • @StephenMuecke thanks Stephen, however it appears that the answers there cover posting a list of objects, rather than an object containing a list of objects. – Chawin Sep 12 '16 at 12:04
  • Its exactly the same :) You just use the `BeginCollectionItem()` method for the property of the object which is the collection, or create a template for your object in the list - and here is [another one](http://stackoverflow.com/questions/29161481/post-a-form-array-without-successful/29161796#29161796) that is based on an object containing a list –  Sep 12 '16 at 12:06
  • @StephenMuecke my apologies, took me a while to wrap my head around it! Really appreciate both links, thank you bud. – Chawin Sep 12 '16 at 15:01

1 Answers1

1

Model: First you need to have properties (with get set both)

 public class Foo
{
    public string Name
    {
        get; set;
    }
    public List<Bar> BarList
    {
        get; set;
    }
}
public class Bar
{
    public string Name{
        get; set;
    }
}

View: In MVC if the name of any html control is in sync with the model then value of that html control will be automatically bind to that property.

@model Foo
@using (Html.BeginForm("Index", "Default", FormMethod.Post))
{
<span> Name:</span>
@Html.TextBoxFor(m => m.Name)
<span>  List of Bars</span>
for (int i = 0; i < 10; i++)
{
    @Html.TextBoxFor(m => m.BarList[i].Name)
   //or
   //   <input type="text" name="BarList[@i].Name" />

}
<input type="submit" value="save" />
}

click the button (submit form) and complete data will be bind to the foo parameter of your action .

Controller:

   [HttpPost]
    public ActionResult Index(Foo foo)
    {
        return View();
    }

Edited: If you want to add dynamic rows then below is the code add new button and a div where you will add new rows

 <div id="divBar"></div>
 <button type="button" onclick="AddnewRow()">Add new Row</button>

declare the jquery method

<script>
var i=0;
function AddnewRow()
{
    var string = '<input type="text" name="BarList[' + i + '].Name" /><br/>';
    $('#divBar').append(string);
    i = i + 1;
}
</script>

Complete Page after doing this

<script src="~/scripts/jquery-1.10.2.min.js"></script>
@using (Html.BeginForm("Index", "Default", FormMethod.Post))
{
<span> Name:</span>
@Html.TextBoxFor(m => m.Name)
<span>  List of Bars</span>

<div id="divBar"></div>
<button type="button" onclick="AddnewRow()">Add new Row</button>
<input type="submit" value="save" />
}
<script>
var i=0;
function AddnewRow()
{
    var string = '<input type="text" name="BarList[' + i + '].Name" /><br/>';
    $('#divBar').append(string);
    i = i + 1;
}

bhupesh
  • 114
  • 9