Foreign key column shows blank cell after submitting create or edit form successfully

Question

My problem I get a null value of Supplier(which is a foreign key in Purchase table) when I submit edit or create purchase action successfully!

My Question: How to get the foreign key value submitted to the table instead of getting null value?

Here is my models:

 public class Purchase
{

    [Required(ErrorMessage = "Invoice No. must be uniqe!")]
    [Display(Name = "Invoice No.")]
    public string Id { get; set; }
    [Display(Name = "yyyy-MM-dd")]
    [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
    public DateTime date { get; set; }
    //[Display(Name = "Supplier")]
    //public int supplier_id { get; set; }
    [Display(Name = "Qty")]
    public decimal amount { get; set; }
    [Display(Name = "Discount")]
    public decimal? discount { get; set; }
    [Display(Name = "Total")]
    [Required]
    public decimal grand_total { get; set; }
    [Display(Name = "Paid?")]
    public bool is_paid { get; set; }
    [Display(Name = "Last update")]
    public DateTime? last_updated { get; set; }
    [Display(Name = "Description")]
    public string description { get; set; }


    public virtual Supplier Supplier { get; set; }
    public virtual ICollection<PurchaseProduct> PurchaseProducts { get; set; }
}



public class Supplier
{
    public Supplier()
    {
        this.address = "N/A";
    }
    public int ID { get; set; }

    [Required]
    [StringLength(50, ErrorMessage = "Only 50 characters allowed!")]
    public string name { get; set; }

    public string address { get; set; }
    public string contact { get; set; }
    public string description { get; set; }

    public virtual ICollection<Purchase> Purchases { get; set; }
}

All suppliers retrieved from Supplier table to purchases view in Viewbag dictionary as dropdownlist

Here is my create action:

  public ActionResult Create()
{
    //var model = db.Suppliers.FirstOrDefault();
    ViewBag.MyHeaders2 = new SelectList(db.Suppliers, "ID", "name");
    return View();
}

// POST: Purchases/Create
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include = "id,date,supplier_id,amount,discount,grand_total,is_paid,last_updated,description")] Purchase purchase)
{
    if (ModelState.IsValid)
    {
        db.Purchases.Add(purchase);
        db.SaveChanges();
        return RedirectToAction("Index");
    }

    return View(purchase);
}

and here is the dropdownlist in my Create view:

@model PointOfSales.Models.Purchase
        <div class="form-group">
            @Html.LabelFor(model => model.Supplier, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(model => model.Supplier, (SelectList)ViewBag.MyHeaders2, htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.Supplier, "", new { @class = "text-danger" })
            </div>
        </div>