We Keep Coding

Dynamically add ICollection Items to Model while "creating" in MVC

Found a solution, but a very ugly one, see at the bottom, can someone improve that solution?
So I have a dummy Model like this one
public class TestModel
{
public int TestModelID { get; set; }
public string Name { get; set; }
}
And another one like this one
public class Collector
{
public int CollectorID { get; set; }
public string CollectorString { get; set; }
public ICollection<TestModel> MyList { get; set; }
}
I would like to (in simple CRUD style) create a new object Collector and populate (later with dynamic addition of new fields, for now only one) the ICollection.
This is my view
#model TestApplication.Models.Collector
#{
ViewBag.Title = "Create";
}
<h2>Create</h2>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Collector</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.CollectorString, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CollectorString, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.CollectorString, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => Model.MyList.ToList()[0].Name)
<div class="col-md-10">
#Html.EditorFor(model => model.MyList.ToList()[0].Name, new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
And the controller
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(Collector collector)
{
if (ModelState.IsValid)
{
db.Collectors.Add(collector);
db.SaveChanges();
return RedirectToAction("Index");
}
return View(collector);
}
This is the resulting HTML code (only relevant part I hope)
<div class="form-group">
<label for="">Name</label>
<div class="col-md-10">
<input class="form-control text-box single-line" name="[0].Name" type="text" value="" />
</div>
</div>
However, the MyList in the controller when creating is always null, why? (Yes I know Haackeds Blog entry, still can't figure out why it doesn't work)
So the problem is, that this line
#Html.EditorFor(model => model.MyList.ToList()[0].Name, new { htmlAttributes = new { #class = "form-control" } })
although very recommended to use in MVC, generates this here
<input class="form-control text-box single-line" name="[0].Name" type="text" value="" />
which is obviously not working. How do I get razor to change [0].Name to MyList[0].Name?
**Update: **
So I found a solution, if a hard-code this here
<input class="form-control text-box single-line" name="MyList[0].Name" type="text" value="" />
The controller understands it and I don't get null. How to solve it using razor?

ICollection<T> does not have an indexer. IList<T> does
public class Collector {
public Collector() {
MyList = new List<TestModel>();
}
public int CollectorID { get; set; }
public string CollectorString { get; set; }
public IList<TestModel> MyList { get; set; }
}
This would allow
#Html.EditorFor(model => model.MyList[0].Name, new { htmlAttributes = new { #class = "form-control" } })
in the view to generate the desired markup
<input class="form-control text-box single-line" name="MyList[0].Name" type="text" value="" />
Which can also be used in a loop for multiple items
<div class="form-group">
#for(int i = 0; i < Model.MyList.Count; i++) {
#Html.LabelFor(model => Model.MyList[i].Name, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.MyList.ToList()[i].Name, new { htmlAttributes = new { #class = "form-control" } })
</div>
}
</div>
When returning the model from the controllers initial call, just make sure that calls to the model's collection index has an item.
[HttpGet]
public ActionResult Create() {
var model = new Collector();
model.MyList.Add(new TestModel());
return View(model);
}

Try changing your collector class to include initialization.
public class Collector
{
public Collector()
{
set MyList = new Collection<TestModel>();
}
public int CollectorID { get; set; }
public string CollectorString { get; set; }
public ICollection<TestModel> MyList { get; set; }
}

You can do by this using razor syntax
<div class="form-group">
#for(int i = 0; i < Model.MyList.Count; i++) {
#Html.LabelFor(model => Model.MyList[i].Name, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.MyList[i].Name, new { htmlAttributes = new { #class = "form-control" } })
</div>
}
</div>

Getting "The input is not a valid Base-64 string as it contains a non-base 64 character" when trying to upload an image

I have no idea why I am getting this exception. I am trying to implement a simple upload image functionality.
I am getting the error when I am trying to save the image along with the rest of the data.
I suspect the the problem is in the view, because I used this code from my model and action method in another project and the code worked.
Can someone help with this. I believe I am close.
Model :
public class Company
{
[Key]
[DatabaseGenerated(DatabaseGeneratedOption.Identity)]
public int CompanyId { get; set; }
public byte[] ImageData { get; set; }
[NotMapped]
public HttpPostedFileBase UploadImage { get; set; }
[NotMapped]
public string ImageBase64 => System.Convert.ToBase64String(ImageData);
public string CompanyName { get; set; }
public string CompanyAddress { get; set; }
public string CompanyCountry { get; set; }
public string CompanyCity { get; set; }
public string CompanyPostalCode { get; set; }
public string CompanyPhoneNumber { get; set; }
public string CAId { get; set; }
}
Controller :
public ActionResult Create([Bind(Include = "CompId,ImageData,CompanyName,CompanyAddress,CompanyCountry,CompanyCity,CompanyPostalCode,CompanyPhoneNumber,EmailCA")] Company company, HttpPostedFileBase UploadImage)
{
if (ModelState.IsValid)
{
byte[] buf = new byte[UploadImage.ContentLength];
UploadImage.InputStream.Read(buf, 0, buf.Length);
company.ImageData = buf;
db.Companies.Add(company);
db.SaveChanges();
return RedirectToAction("Index");
}
return View(company);
}
View :
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Company</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.ImageData, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div class="col-md-10">
#Html.TextBoxFor(model => model.ImageData, new { type = "file" })
#*<input type="file" name="ImageData" class="input-files" />*#
</div>
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CompanyName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CompanyName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.CompanyName, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CAId, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CAId, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.CAId, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>

In your view your using #Html.TextBoxFor(model => model.ImageData, new { type = "file" }) where I think you should use #Html.TextBoxFor(model => model.UploadImage, new { type = "file" }) instead.
And in order to make that pass I think you need to add the UploadImage property to the Bind(Include) string as following:
public ActionResult Create([Bind(Include = "CompId,ImageData,CompanyName,CompanyAddress,CompanyCountry,CompanyCity,CompanyPostalCode,CompanyPhoneNumber,EmailCA,UploadImage")] Company company)

Create multiple objects in one view in ASP.NET

I would like to create multiple objects from one view (e.g. 5 Items in one View). My View looks like:
#model IEnumerable<WerehouseProject.Models.ItemRentList>
#{
ViewBag.Title = "Create";
}
<h2>Dodaj</h2>
#{Html.RenderPartial("_PartialError");}
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
#for (int i = 0; i < Model.Count; i++)
{
<div class="form-group">
#Html.LabelFor(model => model[i].ItemID, "Przedmiot", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("ItemID", null, htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model[i].ItemID, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model[i].Ilosc, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model[i].Ilosc, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model[i].Ilosc, "", new { #class = "text-danger" })
</div>
</div>
#Html.HiddenFor(model => model[i].ItemRentID)
}
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Dodaj" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
<button type="button" name="ID" value="#ViewBag.ItemRentID" onclick="location.href='#Url.Action("Details", "ItemRents", new { ID = #ViewBag.ItemRentID })'">Wróć</button>
</div>
Create GET method:
public ActionResult Create(int ID, int quantity)
{
var model = new List<ItemRentList>();
for(int i = 0; i < quantity; i++)
{
model.Add(new ItemRentList { ItemRentID = ID } );
}
ViewBag.ItemRentID = ID;
ViewBag.ItemID = new SelectList(db.Items, "ItemID", "Nazwa");
return View(model);
}
And my POST Create method:
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include = "IRListID,Ilosc,ItemRentID,ItemID")] IEnumerable<ItemRentList> itemRentList)
{
...
}
My itemRentList.ItemID is always 0, can someone tell me how should I code View or Controller to get list of ItemRentList in POST Method?
This is my Model of ItemRentList
public class ItemRentList
{
[Key]
public int IRListID { get; set; }
[Display(Name = "Ilość")]
public double Ilosc { get; set; }
[Display(Name = "Nazwa przedmiotu")]
public int ItemID { get; set; }
public virtual Item Item { get; set; }
public int ItemRentID { get; set; }
public virtual ItemShopping ItemRent { get; set; }
}
If I edit View and Controller to create only one and always one ItemRentList (not one object in list, just simple ItemRentList) then the value of ItemID is correctly bind to object, the problem is when I want to create a list of ItemRentList, then ItemID is always 0, no mater what I choose from DropDownList.

How to accepts list of objects mvc create view

I got two model classes like this
public class JobViewModel
{
public int Id { get; set; }
public float Price { get; set; }
public int JobSubCategoryId { get; set; }
public string jobDescription { get; set; }
public List<Machine> Machines { get; set; }
public int SpecialRequirementId { get; set; }
}
public class Machine
{
public int Id { get; set; }
public string Name { get; set; }
public string Type { get; set; }
public string Brand { get; set; }
}
Now, When a user creates a new "Job" he must be able to create multiple "Machine" with it. How can I make this possible inside my create view?

As well as Stephen's method, you can achieve all this relatively simply, without partial views.
In the first instance, you should revise your model a little. Add to Machine:
// Foreign key
public int JobID { get; set; }
// Navigation properties
public virtual Job Job{ get; set; }
The Job model, you have not shown, but it needs to be:
public class Job
{
public int Id { get; set; }
public float Price { get; set; }
public int JobSubCategoryId { get; set; }
public string JobDescription { get; set; }
public int SpecialRequirementId { get; set; }
public virtual List<Machine> Machines { get; set; }
}
Here is my complete JobViewModel:
public class JobViewModel
{
public JobViewModel()
{
Machines = new List<Machine>();
}
public int Id { get; set; }
public float Price { get; set; }
public int JobSubCategoryId { get; set; }
public string JobDescription { get; set; }
public int SpecialRequirementId { get; set; }
public List<Machine> Machines { get; set; }
public string NewMachineBrand { get; set; }
public string NewMachineType { get; set; }
public string NewMachineName { get; set; }
public void AddMachine()
{
Machine tmp = new Machine { Brand = NewMachineBrand, Type = NewMachineType, Name = NewMachineName };
Machines.Add(tmp);
NewMachineBrand = NewMachineType = NewMachineName = null;
}
public Job GetJob()
{
Job job = new Job();
job.JobDescription = JobDescription;
job.Price = Price;
job.JobSubCategoryId = JobSubCategoryId;
job.SpecialRequirementId = SpecialRequirementId;
job.Machines = new List<Machine>();
foreach (Machine m in Machines)
{
job.Machines.Add(m);
}
return job;
}
}
When creating your create view based on JobViewModel, you will need to add two things that are not defaulted for you, firstly a table to hold the new Machines, and secondly a button to add each machine in turn.
My complete create.cshtml view looks like this:
#model JobMachinesMVC.Models.JobViewModel
#{
ViewBag.Title = "Create";
}
<h2>Create</h2>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Job</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.Price, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Price, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Price, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.JobSubCategoryId, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.JobSubCategoryId, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.JobSubCategoryId, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.JobDescription, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.JobDescription, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.JobDescription, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.SpecialRequirementId, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.SpecialRequirementId, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.SpecialRequirementId, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.NewMachineBrand, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.NewMachineBrand, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.NewMachineBrand, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.NewMachineType, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.NewMachineType, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.NewMachineType, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.NewMachineName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.NewMachineName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.NewMachineName, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<table>
<thead>
<tr>
<th style="text-align:right">
#Html.DisplayNameFor(model => model.Machines.FirstOrDefault().Brand)
</th>
<th style="text-align:right">
#Html.DisplayNameFor(model => model.Machines.FirstOrDefault().Name)
</th>
<th style="text-align:right">
#Html.DisplayNameFor(model => model.Machines.FirstOrDefault().Type)
</th>
</tr>
</thead>
<tbody>
#for (int i = 0; i < Model.Machines.Count; i++)
{
<tr>
<td style="text-align:right">#Html.HiddenFor(m => m.Machines[i].Id)#Html.DisplayFor(m => m.Machines[i].Brand)#Html.HiddenFor(m => m.Machines[i].Brand)</td>
<td style="text-align:right">#Html.DisplayFor(m => m.Machines[i].Name)#Html.HiddenFor(m => m.Machines[i].Name)</td>
<td style="text-align:right">#Html.DisplayFor(m => m.Machines[i].Type)#Html.HiddenFor(m => m.Machines[i].Type)</td>
</tr>
}
</tbody>
</table>
</div>
<div class="form-group">
<input type="submit" value="Add Machine" name="addmachine" class="btn btn-default" />
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
A couple of things to note here. I always include a #Html.HiddenFor in such a sub-table, because #Html.DisplayFor items can be lost when posting back to the controller. Secondly, there are two input type="submit" on the same View. One is given a name attribute. This is so that the Controller can distinguish between the two clicks.
The relevant lines from my controller are these:
// GET: Jobs/Create
public ActionResult Create()
{
JobViewModel job = new JobViewModel();
return View(job);
}
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(JobViewModel jobvm)
{
if (Request.Form["addmachine"] != null)
{
jobvm.AddMachine();
ModelState.Remove("NewMachineName");
ModelState.Remove("NewMachineType");
ModelState.Remove("NewMachineBrand");
return View(jobvm);
}
if (ModelState.IsValid)
{
Job job = jobvm.GetJob();
db.Jobs.Add(job);
db.SaveChanges();
return RedirectToAction("Index");
}
return View(jobvm);
}
If "addmachine" is clicked, the new machine values get added to the Machines List, get reset and the form is redisplayed. Note you need to set the ModelState even though the ViewModel sets the values to null, otherwise you old values persist in the view. If Create is clicked, the model is checked for ValidState, and the job is saved. What about the Machine table? Because the models are set up as outlined above, internally MVC knows that it has to save the values to Machine as well.
Please note that the above illustration is very crude. I have applied no styling apart from that which you get "out of the box". You will want to tidy this up (a lot!), but I hope I have given you a good start in one way to approach this problem.

Send Data From View to Model With ViewModel

I have this ViewModel:
public class Rapport
{
[Key]
public int RapportId { get; set; }
public RapportAnomalie rapport { get; set; }
public IEnumerable<RefAnomalie> refAnomalies { get; set; }
}
which has two models in it, RapportAnomalie :
public class RapportAnomalie
{
[Key]
public int codeRapport { get; set; }
public DateTime date { get; set; }
public String heure { get; set; }
public String etat { get; set; }
[ForeignKey("codeAgence")]
public virtual Agence agence { get; set; }
public int codeAgence { get; set; }
public IEnumerable<LigneRapportAnomalie> lignesRapport { get; set; }
}
and RefAnomalie.
However when I want to send data from view to controller from a form, I keep getting an exception.
The view :
#model InspectionBanque.Models.Rapport
#{
ViewBag.Title = "Create";
}
<h2>Create</h2>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>RapportAnomalie</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.rapport.date, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.rapport.date, new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.rapport.heure, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.rapport.heure, new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.rapport.etat, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.rapport.etat, new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.rapport.codeAgence, "codeAgence", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("codeAgence", null, htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.rapport.codeAgence, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
#for (int i = 0; i < Model.refAnomalies.Count(); i++)
{
<div class="col-md-10">
#Html.DisplayFor(model => model.refAnomalies.ElementAt(i).libele)
</div>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
and then the controller :
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create( Rapport rapportAnomalie)
{
if (ModelState.IsValid)
{
RapportAnomalie rp = new RapportAnomalie();
db.rapportAnomalies.Add(rapportAnomalie.rapport);
db.SaveChanges();
return RedirectToAction("Index");
}
var refanomal = from r in db.refAnnomalies
select r;
Rapport rapport = new Rapport { rapport = rapportAnomalie.rapport, refAnomalies = refanomal.ToArray() };
ViewBag.codeAgence = new SelectList(db.Agences, "codeAgence", "intituleAgence", rapportAnomalie.rapport.codeAgence);
return View(rapport);
}
Any ideas what's wrong with it?

I think you are getting the problem because the lignesRapport field is not initialized in your model RapportAnomalie
Create a constructor and initialize lignesRapport . I believe the problem will go away.
public RapportAnomalie()
{
lignesRapport = new List <LigneRapportAnomalie>();
}
Good luck