Dropdown list from EntityFramework is not displaying options

Question

Afternoon all, im new to mvc and entity framework. But I have a question in reference to my model.

I have an entity framework model that looks like the following image:

I have combined these two tables into a model as named Marie_Testing.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;


namespace EDT_Test.Models.ViewModels
   {
   public partial class Marie_Testing
   {
    [Display(Name = "Client Ref:")]
    public int id { get; set; }

    [Display(Name = "Created By:")]
    public string CreatedBy { get; set; }

    public List<Title> allTitles { get; set; }

    [Required]
    [Display(Name = "Surname:")]
    public string Surname { get; set; }

    [Display(Name = "Additional Surname:")]
    public string Surname2 { get; set; }

    [Required]
    [Display(Name = "Forename:")]
    public string Forename1 { get; set; }

    [Display(Name = "Additional Forename:")]
    public string Forename2 { get; set; }

I have a Create.cshtml page that uses the Marie_Testing model...

@model EDT_Test.Models.ViewModels.Marie_Testing

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    @*@Html.HiddenFor(model => model.allClientData)*@

    <div class="form-horizontal">
        <h4>Marie_Test</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.CreatedBy, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.CreatedBy, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly", style = "width:200px;background:E1EBF9;", @Value = "LazzM" } })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.allTitles, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <select id="titleid" name="titlename" class="form-control">
                    @foreach (var item in Model.allTitles)
                    {
                        <option>@item.id</option>
                    }
                </select>
            </div>
        </div> 

I have a HomeController.cs that is supposed to list the titles in the dropdown from the database upon the page being created. This doesn't seem to work. Here is the code for the 'Create' Action Result.

 //required to get Client data from the Clients: Dbset 
        [HttpGet]
        public ActionResult Create()
        {
            ////set the defaults (dropdown) of the page for the create of of a new record.
            Marie_Testing vmPopulateData = new Marie_Testing();

            List<Title> titles = (from t in db.Titles select t).ToList();
            vmPopulateData.allTitles = titles;

            return View(vmPopulateData);
        }

        //required to post ClientML table, vreate a parameter of client
        [HttpPost]
        public ActionResult Create(ClientRecord client)
        {
            //validate the model and save to employee table.
            if (ModelState.IsValid)
            {
                //this is the db set we are referencing             
                db.ClientRecords.Add(client);
                db.SaveChanges();
                return RedirectToAction("Index");
            }
            return View(client);
        }

I can however run the current code and enter data successfully into the required database, however the Titles field isn't populated as i can see this when debugging and stepping through create code.

I'm not sure why the title dropdown is not being populated as i can see the model is referenced in the Create.cshtml and i can pick these properties from the model within the razor code.

I have seen some similar posts similar to my issue but i cannot find a way of solving the problem.

If anyone has any suggestions or pointers can you please let me know.

Answer 1

Please make sure you add "value" attribute in option tag. I also assume that you should display item.Title1 as text, and not item.id (correct me if i am wrong)

please add

value="@item.id"

to option tag otherwise it will not post selected value.

<div class="form-group">
            @Html.LabelFor(model => model.allTitles, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <select id="titleid" name="titlename" class="form-control">
                    @foreach (var item in Model.allTitles)
                    {
                        <option value="@item.id">@item.Title1</option>
                    }
                </select>
            </div>
        </div> 

Also, if your select tag is empty and doesn't have any values, i would suggest to check if your table has some records.