Can't get Name from DropdownList by Id Asp.Net Mvc

Question

In my Create(Purchase/Purchasing) page i'm showing some dropdown-lists like Outlets, Suppliers. But after creating, i'm not getting the Names of the Outlets. It passes OutletId via model & i can also see that in Database. But don't know how to get Names against these OutletId.

Here's is the page image link in which Outlet & Supplier Names are not loading

Here's my Code --->

Model & View Model

Purchase.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace OnlineShopping.Models.EntityModels
{
    public class Purchase
    {
        public int Id { get; set; }
        public int EmployeeId { get; set; }
        public Employee Employee { get; set; }

        public DateTime PurchaseDate{get;set;}

        public int SupplierId { get; set; }
        public Supplier Supplier { get; set; }
        public string Remarks { get; set; }
        public double GrandTotal { get; set; }

        public List<PurchaseDetails> PurchaseDetailses { get; set; }

        public int OutletId { get; set; }
        public Outlet Outlet { get; set; }
        public List<Outlet> Outlets { get; set; }

    }
}

PurchaseVM.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.ComponentModel.DataAnnotations;
using OnlineShopping.Models.EntityModels;


namespace OnlineShopping.Models.VM
{
    public class PurchaseVM
    {
        [Display(Name = "Outlet")]
        public int OutletId { get; set; }
        [Display(Name = "Employee")]
        public int EmployeeId { get; set; }

        public DateTime PurchaseDate { get; set; }
        [Display(Name ="Supplier")]
        public int SupplierId { get; set; }

        public string Remarks { get; set; }
        public double GrandTotal { get; set; }
        public List<PurchaseDetails> PurchaseDetailses { get; set; }

        public Outlet Outlet { get; set; }
        public List<Outlet> Outlets { get; set; }
        public List<Supplier> Suppliers { get; set; }
        public List<Item> Items { get; set; }
        public List<Employee> Employees { get; set; }
    }
}

View

Purchasing.cshtml

@model OnlineShopping.Models.VM.PurchaseVM

@{
    ViewBag.Title = "Purchasing";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Purchasing</h2>

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



    <div class="form-horizontal">
        <div class="col-md-6">
        <div class="row">

            <div class="col-md-6 col-md-offset-3">
                <div class="form-group">
                    @Html.LabelFor(c => c.OutletId, htmlAttributes: new { @class = "control-label col-md-4" })
                    <div class="col-md-8">
                        @Html.DropDownListFor(c => c.OutletId, new SelectList(Model.Outlets, "Id", "Name"), "Select...", htmlAttributes: new { @class = "form-control" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(c => c.EmployeeId, htmlAttributes: new { @class = "control-label col-md-4" })
                    <div class="col-md-8">
                        @Html.DropDownListFor(c => c.EmployeeId, null, htmlAttributes: new { @class = "form-control" })
                    </div>
                </div>

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

                <div class="form-group">
                    @Html.LabelFor(c => c.SupplierId, htmlAttributes: new { @class = "control-label col-md-4" })
                    <div class="col-md-8">
                        @Html.DropDownListFor(c => c.SupplierId, new SelectList(Model.Suppliers, "Id", "Name"), "Select...", htmlAttributes: new { @class = "form-control" })
                    </div>
                </div>

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

                <div class="form-group" id="GrandTotal">
                    @Html.LabelFor(model => model.GrandTotal, htmlAttributes: new { @class = "control-label col-md-4" })
                    <div class="col-md-8">
                        @Html.EditorFor(model => model.GrandTotal, new { htmlAttributes = new { @class = "form-control" } })
                        @*@Html.ValidationMessageFor(model => model.Remarks, "", new { @class = "text-danger" })*@
                    </div>
                </div>

            </div>
        </div>

        </div>

        <div class="col-md-6">
        <div class="row">
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        @Html.Label("Item", htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.DropDownList("Item", new SelectList(Model.Items, "Id", "Name"), htmlAttributes: new { @class = "form-control" })
                        </div>
                    </div>
                    <div class="form-group">
                        @Html.Label("Qty", htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.TextBox("Qty", null, htmlAttributes: new { @class = "form-control" })
                        </div>
                    </div>
                    <div class="form-group">
                        @Html.Label("Price", htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.TextBox("Price", null, htmlAttributes: new { @class = "form-control" })
                        </div>
                    </div>
                </div>


                <div class="col-md-offset-3">
                    <input id="addButton" class="btn btn-success" type="button" value="Add" />
                </div>
            </div>
            <div class="row">
                <table>
                    <thead>
                        <tr>

                            <th>Item</th>
                            <th>Quantity</th>
                            <th>Price</th>
                            <th>Total</th>
                        </tr>

                    </thead>
                    <tbody id="tbenroll"></tbody>
                </table>
            </div>



        </div>
        </div>
        <div class="col-md-offset-8">
            <input class="btn btn-primary" type="submit" value="Save" />
            @ViewBag.Message
        </div>
        <p>
            @Html.ActionLink("Cancel", "Index")
        </p>

    </div>
}


@section scripts
{    
    <script src="~/Scripts/Purchasing/Purchase.js"></script>
}

Index.cshtml

@model IEnumerable<OnlineShopping.Models.EntityModels.Purchase>


@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Purchasing")
</p>
<table class="table">
    <tr>

        <th>
            @Html.DisplayNameFor(model => model.Outlet)
        </th>

        <th>
            @Html.DisplayNameFor(model => model.Supplier)
        </th>

        <th>
            @Html.DisplayNameFor(model => model.Employee)
        </th>

        <th>
            @Html.DisplayNameFor(model => model.PurchaseDate)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Remarks)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.GrandTotal)
        </th>

        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Outlet.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Supplier.Name)
            </td>
            <td>@Html.DisplayFor(modelItem => item.Employee.Name)</td>
            <td>
                @Html.DisplayFor(modelItem => item.PurchaseDate)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Remarks)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.GrandTotal)
            </td>

            <td>
                @*@Html.ActionLink("Edit", "Edit", new { id = item.Id }) |*@
                @Html.ActionLink("Details", "Details", new { id = item.Id }) 
                @*@Html.ActionLink("Delete", "Delete", new { id = item.Id })*@
            </td>
        </tr>
    }

</table>

Controller

Purchase Controller

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using AutoMapper;
using OnlineShopping.BLL;
using OnlineShopping.Models.EntityModels;
using OnlineShopping.Models.VM;
using OnlineShopping.BLL.Managers;

namespace OnlineShopping.Controllers
{
    public class PurchaseController : Controller
    {
        OrganizationManager organizationManager = new OrganizationManager();
        OutletManager outletManager = new OutletManager();
        ItemManager itemManager = new ItemManager();
        PurchaseOpManager purchaseOpManager = new PurchaseOpManager();
        EmployeeManager employeeManager = new EmployeeManager();
        SupplierManager supplierManager = new SupplierManager();


        public ActionResult Index()
        {

            var purchaseList = purchaseOpManager.GetAll();

            return View(purchaseList);
        }




        // GET: Purchase
        public ActionResult Purchasing()
        {
            var model = new PurchaseVM();

            model.Outlets = outletManager.GetAll();
            model.Items = itemManager.GetAll();
            model.Suppliers = supplierManager.GetAll();


            ViewBag.EmployeeId = new List<SelectListItem>()
            {
                new SelectListItem() {Value = "", Text = "Select..."}
            };

            //ViewBag.SupplierId = new List<SelectListItem>()
            //{
            //    new SelectListItem() {Value = "", Text = "Select.." }
            //};

            return View(model);
        }

        [HttpPost]
        public ActionResult Purchasing(PurchaseVM model)
        {
            try
            {
                if (ModelState.IsValid)
                {

                    var purchase = Mapper.Map<Purchase>(model);
                    bool isSaved = purchaseOpManager.Save(purchase);


                    if (isSaved)
                    return RedirectToAction("Index");                    
                }
            }
            catch (Exception exception)
            {
                ModelState.AddModelError("", exception.Message);
                var employeeList = ViewBag.EmployeeId;
                model.EmployeeId = employeeList;
                return View(model);
            }

            var outlets = outletManager.GetAll();
            model.Outlets = outlets;
            return View(model);
            //model.Outlets = outletManager.GetAll();
            //model.Items = itemManager.GetAll();
            //return View(model);
        }



    }
}

Answer 1

Use Virtual keyword when declaring property of POCO class. example below

public class Purchase
{
    public int Id { get; set; }
    public int EmployeeId { get; set; }
    public Virtual Employee Employee { get; set; }

    public DateTime PurchaseDate{get;set;}

    public int SupplierId { get; set; }
    public Virtual Supplier Supplier { get; set; }
    public string Remarks { get; set; }
    public double GrandTotal { get; set; }

    public List<PurchaseDetails> PurchaseDetailses { get; set; }

    public int OutletId { get; set; }
    public Virtual Outlet Outlet { get; set; }
    public List<Outlet> Outlets { get; set; }

}