如何将选定的ID从DropDownListFor传递到ASP.NET MVC中的控制器

Question

I'm just a newbie and I have a problem to my DropDownList:(MVC, ASP.NET)

Scenario:

In View, when the dropdown is selected it display the value (Category Name) In Controller, instead of (category name) it will recognize only the assigned ID to the specific value

Problem:

when it click the button save, the return value from dropdownlist is NULL then in the CATEGORY table it create another row with an EMPTY content Model: (Supplier)

    public class Supplier
    {
        public int Id { get; set; }
        public string SupplierCode { get; set; }
        public string SupplierName { get; set; }
        public int SupplierContact { get; set; }
        public Category Category { get; set; }
    }

Model: (Category)

    public class Category
    {
        public int Id { get; set; }
        public string CatName { get; set; }
    }

Controller (Supplier)

        public ActionResult New()
        {
            var CategoryMenu = _SBC.Categorys.ToList();
            var NewContent = new SupplierandCategoryViewModel()
            {
               CategoryModel = CategoryMenu,
            };
            return View(NewContent);
        }

        public ActionResult Save(SupplierandCategoryViewModel Supply)
        {   

            var DSupply = new Supplier()
            {
                SupplierName = Supply.SupplierModel.SupplierName,
                SupplierCode = Supply.SupplierModel.SupplierCode,
                SupplierContact = Supply.SupplierModel.SupplierContact,
                Category = Supply.CategoryModel //this part is error; it cannot 
                recognize
            };

            _SBC.Suppliers.Add(DSupply);
            _SBC.SaveChanges();
            return View();
        }

View: (Supplier)

@model ShoeInformation.ViewModel.SupplierandCategoryViewModel
@{
    ViewBag.Title = "New";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<br />
<br />
<h2>Create New Customer</h2>
<br />
<br />
@using (Html.BeginForm("Save", "Supplier"))
{
    <div class="form-group">
        @Html.LabelFor(x=>x.CategoryModel)
        @Html.DropDownListFor(x => x.CategoryModel, new SelectList(Model.CategoryModel,"Id","CatName"), "Select Supplier Category", new {id="myCat",@class="form-control" })
    </div>

     <div class="form-group">
        @Html.LabelFor(x=>x.SupplierModel.SupplierCode)
        @Html.TextBoxFor(x => x.SupplierModel.SupplierCode, new { @class="form-control"})
    </div>
    <div class="form-group">
        @Html.LabelFor(x=>x.SupplierModel.SupplierName)
        @Html.TextBoxFor(x => x.SupplierModel.SupplierName, new { @class="form-control"})
    </div>
    <div class="form-group">
        @Html.LabelFor(x=>x.SupplierModel.SupplierContact)
        @Html.TextBoxFor(x => x.SupplierModel.SupplierContact, new { @class="form-control"})
    </div>

}

ViewModel: (SupplierandCategoryViewModel)

    public class SupplierandCategoryViewModel
    {
        public IEnumerable<Category> CategoryModel { get; set; }
        public Supplier SupplierModel { get; set; }
    }

I want to save the ID of category but in view(Index) it must display the value of ID not the ID itself

Thanks for your Response!!

Answer 1

1) Add one SelectedCategory property to your SupplierandCategoryViewModel

public class SupplierandCategoryViewModel
{
    public IEnumerable<Category> CategoryModel { get; set; }
    public Supplier SupplierModel { get; set; }
    public int SelectedCategory { get; set; }     <== Add this property
}

2) Provide proper name for Id

public class Category
{
    public int CategoryId { get; set; }    <== Change the name
    public string CatName { get; set; }
}

3) Reference this CategoryId to your Supplier model

public class Supplier
{
    public int Id { get; set; }
    public string SupplierCode { get; set; }
    public string SupplierName { get; set; }
    public int SupplierContact { get; set; }
    public int CategoryId { get; set; }        <== Reference to this property
    public Category Category { get; set; }
}

4) Modify your DropDownListFor like

@Html.DropDownListFor(x => x.SelectedCategory, new SelectList(Model.CategoryModel, "CategoryId", "CatName"), "Select Supplier Category", new { id = "myCat", @class = "form-control" })

5) Finally your Save action method like

public ActionResult Save(SupplierandCategoryViewModel Supply)
{

    var DSupply = new Supplier()
    {
        SupplierName = Supply.SupplierModel.SupplierName,
        SupplierCode = Supply.SupplierModel.SupplierCode,
        SupplierContact = Supply.SupplierModel.SupplierContact,
        CategoryId = Supply.SelectedCategory                     <==Note here I assigned SelectedCategory to model's CategoryId
    };

    _SBC.Suppliers.Add(DSupply);
    _SBC.SaveChanges();
    return View();
}

Test Data for DropDownList:

var CategoryMenu = new List<Category> { new Category { CategoryId = 1, CatName = "Abc" }, new Category { CategoryId = 2, CatName = "Pqr" } };

Output: