CODEWITHSUNDEEP
c#asp.netentity-frameworkasp.net-mvc-5
Gopi
Gopi

Reputation: 21

ASP.NET MVC5 Entity Framework Group Fields (Country, State) for Account

I have a Company, Country and State classes. State is related to Country State and Country are foreign key to Company

The problem Company View shows both state and Country as separate dropdowns. But I expect when I select State, corresponding Country should change or vice versa. Is this possible in MVC5 EF Model.

Company Class

public class Company
{
    public int CompanyID { get; set; }
    [Required]
    [StringLength(100,MinimumLength=3)]
    public string Name { get; set; }
    [StringLength(200)]
    public string Address { get; set; }
    public int? StateID { get; set; }
    public virtual State State { get; set; }
    public int? CountryID { get; set;}
    public virtual Country Country { get; set; }
    public int CompanyTypeID { get; set; }
    public virtual CompanyType CompanyType { get; set; }

}

Country Class

public class Country
{
    public int CountryID { get; set; }
    [Required]
    [StringLength(100)]
    public string Name { get; set; }
    public virtual ICollection<State> States { get; set; }
    public virtual ICollection<Company> Companies { get; set; }
}

State Class

public class State
{
    public int StateID { get; set; }
    [Required]
    [StringLength(100)]
    public string Name { get; set; }
    public int CountryID { get; set; }
    public virtual Country Country { get; set; }

    public virtual ICollection<Company> Companies { get; set; }

}

I have scaffolded and Generated the view and Company View for reference

@using (Html.BeginForm()) {
@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.Name, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
        </div>
    </div>

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

    <div class="form-group">
        @Html.LabelFor(model => model.StateID, "StateID", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownList("StateID", null, htmlAttributes: new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.StateID, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.CountryID, "CountryID", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownList("CountryID", null, htmlAttributes: new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.CountryID, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.CompanyTypeID, "CompanyTypeID", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownList("CompanyTypeID", null, htmlAttributes: new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.CompanyTypeID, "", 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> } <div> @Html.ActionLink("Back to List", "Index")

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

Any help would be appreciated

Upvotes: 0

Views: 1082

Answers (2)

Richard
Richard

Reputation: 108995

Is this possible in MVC5 EF Model.

Yes. But you'll need to do the work (or get (buy) controls that do it for you).

The limitation is not MVC, but that the default HTML controls have no concept of being dependent on another. Either write code to change the content of the State drop down when the Country drop down changes (this could include filtering the list of states by the selected country), or get thirdy party controls that do so (it is a common requirement so lots of controls out there1).

1 But Stack Overflow does not do recommendations of tools.

Upvotes: 0

LSU.Net
LSU.Net

Reputation: 849

What you need are Cascading Dropdown Lists. Here is an example from CodeProject.

http://www.codeproject.com/Articles/258172/Simple-Implementation-of-MVC-Cascading-Ajax-Drop-D

Upvotes: 0

Related Questions