In MVC5 Edit View I need a drop down control with the items from another table

Question

User-789623466 posted

How do I change my code to implement a drop-down list of all the items from the BibleBooks table?
Actually, I only want to list the values from the Name column. Hopefully the following is all the relevant code.

In the Model I have:

    [Table("WordSearch")]
    public class WordSearch
    {
        [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
        public int Id { get; set; }

        [MaxLength(80)]
        [DisplayName("Exact Phrase")]
        public string ExactPhrase { get; set; }

        [MaxLength(80)]
        [DisplayName("Required Words")]
        public string RequiredWords { get; set; }

        [MaxLength(80)]
        [DisplayName("Alternate Words")]
        public string AlternateWords { get; set; }

        [NotMapped]        
        public int RangeId { get; set; }

        [DisplayName("Range of Books")]
        public ICollection<BibleBooks> Range { get; set; }
    }//class WordSearch

In the Controller I have for the Edit action:

        // GET: WordSearch/Edit/5
        public ActionResult Edit(int? id)
        {
            WordSearch wordSearch = db.WordSearches.Find(1);//The table only has 1 row
            if (wordSearch == null)
            {
                return HttpNotFound();
            }
            wordSearch.Range = db.BibleBooks.ToList();
                        
            return View(wordSearch);
        }

        // POST: WordSearch/Edit/5
        // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
        // more details see https://go.microsoft.com/fwlink/?LinkId=317598.
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Edit([Bind(Include = "Id")] WordSearch wordSearch)
        {
            if (ModelState.IsValid)
            {
                db.Entry(wordSearch).State = EntityState.Modified;
                db.SaveChanges();
                return RedirectToAction("Index");
            }
            return View(wordSearch);
        }

In the Edit View I have:

@model JQJ.Models.WordSearch

@{
    ViewBag.Title = "Edit";
}

<h2>Edit</h2>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    
<div class="form-horizontal">
    <h4>WordSearch</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    @Html.HiddenFor(model => model.Id)

    <div class="form-group">
        @Html.LabelFor(model => model.ExactPhrase, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.ExactPhrase, new { htmlAttributes = new { @class = "form-control" } })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.RequiredWords, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.RequiredWords, new { htmlAttributes = new { @class = "form-control" } })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.AlternateWords, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.AlternateWords, new { htmlAttributes = new { @class = "form-control" } })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.RequiredWords, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.RequiredWords, new { htmlAttributes = new { @class = "form-control" } })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Range, htmlAttributes: new { @class = "control-label col-md-2" })
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Search" class="btn btn-success" />
			@* Here I need to implement the drop-down list *@
        </div>
    </div>
</div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

Answer 1

User475983607 posted

Create a SelectList and assign it to the ViewBag.  "Id" is the option values and "Name" is the text; what the user sees in the select.  You did not share the BibleBooks class so I'm not sure if "Id" and "Name" is correct.

ViewBag.BibleBookId = new SelectList(db.BibleBooks, "Id", "Name"); 

Then use the @DropDownList helper to render the select.

@Html.DropDownList("BibleBookId", "--Select--")

You can also use the DropDownListFor() helper.  Unfortunately, there is not enough information to for an example.

Answer 2

User-789623466 posted

Thank you for your help. Below is the BibleBooks model class, if that helps:

namespace JQJ.Models
{
    public class BibleBooks
    {
        [Key]
        [Required]
        public int ID { get; set; }

        [MaxLength(20)]
        public string Name { get; set; }

        [DisplayName("OT-NT")]
        public string Kind { get; set; }

        public int Chapters { get; set; }

        [MaxLength(4)]
        public string Abbr { get; set; }
    }//class BibleBooks
}//namespace JQJ.Models

The contents of the table do not change. It is used to narrow the search (ALL, OT, NT, or a specific book)

Answer 3

User-474980206 posted

no. where in the post back model (WordSearch) were you going to bind the dropdown's selected value (an int in your case)?

most likely you need a proper view model rather than reusing an entity class (bad coding practice)

Answer 4

User-789623466 posted

no. where in the post back model (WordSearch) were you going to bind the dropdown's selected value (an int in your case)?

Actually the selected value would be the text of the name field of the BibleBooks table. I used the "Edit" view, since it is set up to allow user input to the fields. Once I have the user input, including a selection from the dropdown (ALL, OT, NT, or a named book of the Bible), the Search button would not be implemented to "Save" values back, but to execute a query on the Verses table. I implemented this whole operation as a desktop concordance application first to test the logic, and it works great, but implementing it as an MVC Web application is much, much, much more difficult.

Answer 5

User287926715 posted

Hi JonJacobs.

You can use Viewbag to populate the DropDownList, and then create some collection lists with the selectListItem type, and assign them to the Viewbag with appropriate names.

Best Regards,

ChaoDeng