Databases
StackOverflow2013
Postsdbo
POmvc3 model uses list - not storing to database
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POmvc3 model uses list - not storing to database
    text
    copied!<p>This is my first MVC3 project and thought it'd be a bit simpler to accomplish this, but I've had a lot of issues. This seems to be the one trouble for which I've not encountered a solution. Posting here as a last resort.</p> <p>My issue is that the Ingredients list never seems to populate in the database when a new Recipe is created. I've even tried hard-coding a list in the controller when the rest of the data is saved, but it still doesn't do anything. As far as I can tell, there's not even a field for Ingredients in the DB anywhere. Can anyone point out what I'm doing wrong? Much thanks.</p> <p>Model:</p> <pre><code>public class Recipe { public int ID { get; set; } [Required] public string Title { get; set; } [Required] [Display(Name = "Type of Meal")] public int TypeID { get; set; } [Required] public string Instructions { get; set; } [Display(Name = "Submitted By")] public string UserName { get; set; } public IList&lt;string&gt; Ingredients { get; set; } public virtual MealType Type { get; set; } } </code></pre> <p>Create View:</p> <pre><code>@model final.Models.Recipe @{ ViewBag.Title = "Recipe Finder - New Recipe"; } &lt;h2&gt;New Recipe&lt;/h2&gt; &lt;script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; //adds an ingredient field on the fly var numIngredients = 0; function addIngredient() { $('#ingredientlist').append('&lt;tr&gt;&lt;td&gt;&lt;input type="text" name="Ingredients[' + numIngredients++ + ']" value="' + $('#AddIngredient').val() + '" readonly="true" tabindex="-1" /&gt;&lt;/tr&gt;&lt;/td&gt;'); $('#AddIngredient').val(''); $('#AddIngredient').focus(); } function onKeyPress(e) { var keycode; if (window.event) { keycode = window.event.keyCode; } else if (e) { keycode = e.which; } else { return true; } //for addingredient field, add ingredient and not submit // else mimic submit if (keycode == 13) { if (document.activeElement.id == "AddIngredient") { addIngredient(); return false; } document.getElementById('btnSubmit').click(); } return true; } //intercepts form submit instead of using submit button to disable addingredient textbox // this prevents the value/field from posting function preSubmit() { $('#AddIngredient').attr('disabled', 'true'); document.getElementsByTagName('form')[0].submit(); } //intercepts users pressing the enter key if (document.layers) document.captureEvents(Event.KEYPRESS); document.onkeypress = onKeyPress; &lt;/script&gt; @using (Html.BeginForm()) { @Html.ValidationSummary(true) &lt;fieldset&gt; &lt;legend&gt;by @User.Identity.Name&lt;/legend&gt; &lt;div class="editor-label"&gt; @Html.LabelFor(model =&gt; model.Title) &lt;/div&gt; &lt;div class="editor-field"&gt; @Html.EditorFor(model =&gt; model.Title) @Html.ValidationMessageFor(model =&gt; model.Title) &lt;/div&gt; &lt;div class="editor-label"&gt; @Html.LabelFor(model =&gt; model.TypeID, "Type") &lt;/div&gt; &lt;div class="editor-field"&gt; @Html.DropDownList("TypeID", String.Empty) @Html.ValidationMessageFor(model =&gt; model.TypeID) &lt;/div&gt; &lt;div class="editor-label"&gt; @Html.LabelFor(model =&gt; model.Ingredients) &lt;/div&gt; &lt;div class="editor-field"&gt; @Html.TextBox("AddIngredient") &lt;input type="button" value="Add Ingredient" onclick="addIngredient()" tabindex="-1" /&gt; &lt;table id="ingredientlist"&gt; &lt;/table&gt; &lt;/div&gt; &lt;div class="editor-label"&gt; @Html.LabelFor(model =&gt; model.Instructions) &lt;/div&gt; &lt;div class="editor-field"&gt; @Html.TextAreaFor(model =&gt; model.Instructions, new { rows = "7", cols = "77" }) @Html.ValidationMessageFor(model =&gt; model.Instructions) &lt;/div&gt; @Html.HiddenFor(model =&gt; model.UserName) &lt;p&gt; &lt;input type="button" value="Submit" onclick="preSubmit()" id="btnSubmit" /&gt; &lt;/p&gt; &lt;/fieldset&gt; } </code></pre> <p>Controller:</p> <pre><code> [HttpPost] public ActionResult Create(Recipe recipe) { if (ModelState.IsValid) { db.Recipes.Add(recipe); db.SaveChanges(); return RedirectToAction("Index"); } ViewBag.TypeID = new SelectList(db.MealTypes, "ID", "Type", recipe.TypeID); return View(recipe); } </code></pre> <p>The POST fields I can see send all the information successfully, as seen below, I'm not sure what the issue is, or at this point what I haven't already tried.</p> <pre><code>Title:test recipe TypeID:2 Ingredients[0]:test0 Ingredients[1]:test1 Ingredients[2]:test2 Ingredients[3]:test3 Instructions:this is a test UserName:tym </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload