I have a model Vehicle, my model has a list of Options.
In my Create view, how can i add multiple Options to be passed to the controller?
The amount of options can variate from 0 to 10+..
My idea is to place one text field with a button next to it, when the button is clicked, the value of the text field is passed to a label with Javascript.
But i'm not sure how to get the values of my label passed to my controller.
My View:
@using (Html.BeginForm("Edit", "VehicleModels", null, FormMethod.Post, new { enctype = "multipart/form-data" }))
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>VehicleModels</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.HiddenFor(model => model.Id)
<div>
@Html.LabelFor(model => model.Options)
<ul>
@foreach (var optie in Model.Options)
{
<li>@optie.Naam @Html.ActionLink("X", "DeleteOption", new { opId = optie.OptieId, vehId = optie.VehicleModelsID })</li>
}
</ul>
<input type="text" id="optienaam" /> <input type="button" value="Toevoegen" class="btn btn-default" onclick="optiestoevoegen()" />
<br />
<label id="optielabel"></label>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
Javascript:
function optiestoevoegen() {
var elm;
elm = document.createElement("p");
elm.innerHTML = document.getElementById('optienaam').value;
document.getElementById('optielabel').appendChild(elm);
}
this generates a nice list of all the options being added, but not really a straight forward way to pass them to the controller.
EDIT
Vehicle model:
public class VehicleModels
{
[Key]
public virtual int Id { get; set; }
[Required]
[StringLength(30)]
[Display(Name ="Naam")]
public virtual string Naam { get; set; }
[Required]
[Display(Name = "Merk")]
public virtual Merken Merk { get; set; }
[Required]
[Display(Name = "Type brandstof")]
public virtual Brandstoffen Brandstof { get; set; }
[Display(Name = "Kleur")]
public virtual string Kleur { get; set; }
[Display(Name = "Type van merk")]
public virtual string TypeVanMerk { get; set; }
[Display(Name = "Type van transmissie")]
public virtual Transmissies TypeVanTransmissie { get; set; }
[Required]
[Range(0,500000)]
[Display(Name = "Kilometerstand")]
public virtual int Kilometerstand { get; set; }
[Range(1800,2100)]
[Display(Name = "Datum van eerste inschrijving")]
public virtual int Bouwjaar { get; set; }
[Range(1,8)]
[Display(Name = "Aantal deuren")]
public virtual int AantalDeuren { get; set; }
[Display(Name = "Prijs")]
public virtual int Prijs { get; set; }
[Display(Name = "Optie's")]
public virtual ICollection<Optie> Options { get; set; }
public virtual ICollection<Foto> Fotos { get; set; }
public VehicleModels()
{
}
}
Option model:
public class Optie
{
[Key]
public virtual int OptieId { get; set; }
public virtual int VehicleModelsID { get; set; }
public virtual VehicleModels Vehicle { get; set; }
public virtual string Naam{ get; set; }
public Optie()
{
}
public Optie(string naam)
{
Naam = naam;
}
}
<input type="hidden">.nameattribute set will post back to the form action. So you need to add inputs in your javascript function, even if they are hidden. If you follow the correct naming convention (by looking at what razor would generate in a loop) then you can access them from the model, or from a more general form collection.idandOptions(strings) ?