How to save the ID od dropdown to database

Hi Everyone, 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!!

What I have tried:

I try to used the model of Supply but the problem it cannot list the content of category

Tags: C#, Visual Studio, ASP.NET, MVC4