EF multiple dropdowns

Question

I want to have 2 dropdowns on my Invoice page whose model is as follows:

    public class Invoice {
    [Key]
    public int InvoiceID { get; set; }
    public int MemberID { get; set; }
    public int AddressID { get; set; }

    public virtual Member Member { get; set; }
    public virtual MembersAddress  MembersAddress { get; set; }
    public virtual ICollection<InvoiceLineItem> InvoiceLineItems { get; set; }
}

Though the wizard as automatically generated CRUD pages for me and the code as well, but when i select Member Name from the first Dropdown, I need to populate the addresses of only that member. The code for the Create() method in the InvoiceController is:

public ActionResult Create()
    {
        ViewBag.MemberID = new SelectList(db.Members, "MemberID", "FirstName");
        return View();
    }

and the cshtml file is:

@model MvcDemoApp.Models.Invoice

@{
  ViewBag.Title = "Create";
}

<h2>Create</h2>

@using (Html.BeginForm()) {
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)

<fieldset>
    <legend>Invoice</legend>

    <div class="editor-label">
        @Html.LabelFor(model => model.MemberID, "Member")
    </div>
    <div class="editor-field">
        @Html.DropDownList("MemberID", String.Empty)
        @Html.ValidationMessageFor(model => model.MemberID)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.AddressID)
    </div>
    <div class="editor-field">
        @@Html.EditorFor(model => model.AddressID)@
        @Html.ValidationMessageFor(model => model.AddressID)
    </div>

    <p>
        <input type="submit" value="Create" />
    </p>
  </fieldset>
}

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

@section Scripts {
   @Scripts.Render("~/bundles/jqueryval")
}

Thanks in advance.

Answer 1

As far as I understood, based upon the the selected member name from first dropdownlist you want to generate you want to create dropdownlist(or whatever) with addresses.

If you want to achieve this, you have to use partial view. Give your firstdropdownlist an ID and upon the dropdownlist being selected, load partial view using jquery where you load the addresses. For example in your view you could do something like this

@Html.DropDownList("MemberID", String.Empty, new{id = "MembersName")
<div id="partialDiv"></div>

and you could fill up the partial div using jquery

<script>

    $("#MembersName").on("change", function() {
        var memberId = $(this).val();
        $.get('@Url.Action("GetMemberAddress", "Module")', { Id: memberId }, function(result) {
            $("#partialDiv").html(result);
        });

        //uncomment following section to check if the partial view is working properly
        /*.done(function() { alert("done"); })
            .fail(function() { alert("fail"); })
            .always(function() { alert("completed"); });*/

    });

</script>

You should add a function called GetMemberAddress in your controller which gets called when dropdownlist item is selected, it is done with following code in above script.

$.get('@Url.Action("GetMemberAddress", "Module")', { Id: memberId }, 

I'm just providing a technique, to solve your issue. you have to use it based upon the result you want