Controller receiving null values from a form ASP.NET MVC5

Question

I have two dropdownmenu from markets and their branches so i made it when choose a market, it load its branches in branches dropdownmenu

The html design

<div style="width : 50%">
        <div class="form-group" style="display:inline-block">
            @Html.LabelFor(m => m.Market)
            @Html.DropDownListFor(m => m.Market, new SelectList(Model.Markets, "Id", "Name"), "Select Market", new { @class = "form-control" })
        </div>
        <div class="form-group" style="float:right">
            @Html.LabelFor(m => m.Branch)
            @Html.DropDownListFor(m => m.Branch, new SelectList("", "Id", "Name"), "Select Branch", new { @class = "form-control" })
        </div>
    </div>

and that ajax to load branches

 $(function () {
    $("#Market").on("change", function () {
        $.get("/Home/GetBranches", { id: $("#Market").val() }, function (data) {
            $("#Branch").empty();
            console.log(data);
            $.each(data, function (index, row) {
                $("#Branch").append("<option value='" + row.Id + "'>" + row.Name + "</option>")
            });
        });
    });

and everything working well but when i post the whole form

   @using (Html.BeginForm("Index", "Home", FormMethod.Post))
{

    <div style="width : 50%">
        <div class="form-group" style="display:inline-block">
            @Html.LabelFor(m => m.Market)
            @Html.DropDownListFor(m => m.Market, new SelectList(Model.Markets, "Id", "Name"), "Select Market", new { @class = "form-control" })
        </div>
        <div class="form-group" style="float:right">
            @Html.LabelFor(m => m.Branch)
            @Html.DropDownListFor(m => m.Branch, new SelectList("", "Id", "Name"), "Select Branch", new { @class = "form-control" })
        </div>
    </div>

    <input class='datepicker' />

    <div style="width: 50%">
        <div class="form-group" style="display:inline-block">
            @Html.LabelFor(m => m.Date)
            @Html.TextBoxFor((m => m.Date), new { @class = "form-control form-inline datepicker", placeholder = "eg 1 Jan 2018" })
            @Html.ValidationMessageFor(m => m.Date)
        </div>
        <div class="form-group" style="float:right">
            @Html.LabelFor(m => m.Time)
            @Html.TextBoxFor(m => m.Time, new { @class = "form-control form-inline", placeholder = "hh:mm" })
            @Html.ValidationMessageFor(m => m.Time)
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(m => m.CustName)
        @Html.TextBoxFor(m => m.CustName, new { @class = "form-control fouc" })
        @Html.ValidationMessageFor(m => m.CustName)
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.OrderNumber)
        @Html.TextBoxFor(m => m.OrderNumber, new { @class = "form-control" })
        @Html.ValidationMessageFor(m => m.OrderNumber)
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Total)
        @Html.EditorFor(m => m.Total, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(m => m.Total)
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.CouponValue)
        @Html.EditorFor(m => m.CouponValue, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(m => m.CouponValue)
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Notes)
        @Html.TextBoxFor(m => m.Notes, new { @class = "form-control" })
        @Html.ValidationMessageFor(m => m.Notes)
    </div>
    <button type="submit" class="btn btn-primary btn-lg">Save</button>

i receive the branch null value

when i open the network in browser, i can see values passed

and that the Model Class

    using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;
using Takers.Models;

namespace Takers.ViewModel
{
    public class OrderView
    {
        [Required]
        public string OrderNumber { get; set; }

        [Required]
        public string CustName { get; set; }

        [Required]
        public decimal CouponValue { get; set; }

        [Required]
        public string Notes { get; set; }

        [Required]
        public string UserName { get; set; }

        [Required]
        public decimal Total { get; set; }

        public string Time { get; set; }

        public string Date { get; set; }

        public Market Market { get; set; }

        public Branch Branch { get; set; }

        public ICollection<Market> Markets { get; set; }

        public ICollection<Branch> Branches { get; set; }

        public DateTime GetDateTime()
        {
            return DateTime.Parse($"{Date} {Time}");
        }
    }
}

while debuging i can see the point going to the model class and set the branch with null value I'm so confused Thank You

Answer 1

Branch is a class that the built in model binders know nothing about, your going to have to write a custom model binder that converts the Branch posted value to a Branch instance or convert Branch in your model to a string or int:

public string Branch { get; set; }