Mvc, HTML control, jquery bind not showing in formcollection

See more:

jQuery

MVC4

Hi All,

I Have Location Department And Designation DropDown In View And Some Hidden Field, And Dropdown Was Bind Through Jquery.
Return Value From Ajax Action Method is Entity Framework JSON and It Was Simple A var Type ToList.
Now When I Submit My Form It Showing Only First Dropdown Which Was @Html.DropDownList("Location", "<-- Select Location -->")
Please Reply.




<div class="row">
@using (Html.BeginForm())
{
<div class="input-group col-md-6 col-md-offset-3">




@Html.DropDownList("Location", "<-- Select Location -->")
<input type="hidden" id="hfLocation" value="0" />
<br />
<br />
<select id="Department">
</select>
<input type="hidden" id="hfDepartment" />
<br />
<br />
<select id="Designation">
</select>
<input type="hidden" id="hfDesignation" />
<br />
<br />
<input type="submit" value="Show Employee" />


<script type="text/javascript">

$(function () {
$('select').each(function () {
if ($(this).find("option").length <= 1) {
$(this).attr("disabled", "disabled");
}
})
});

$("select").change(function () {
var value = 0;
if ($(this).val() != "") {
value = $(this).val();
}

var id = $(this).attr("id");


$.ajax({
type: "Post",
url: "/Home/AjaxMethod",
data: '{DropdownValue : ' + value + ',DropdownID : "' + id + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {

var dropDownId;
var list;
switch (id) {
case "Location":
list = response;
$('#hfLocation').val(value);
DisableDropDown("#Department", "<-- Select Department -->");
DisableDropDown("#Designation", "<-- Select Designation -->");
PopulateDropDown("#Department", list);
break;
case "Department":
list = response;
$('#hfDepartment').val(value);
DisableDropDown("#Designation", "<-- Select Designation -->");
PopulateDropDown("#Designation", list);
break;
case "Designation":
list = response;
$('#hfDesignation').val(value);
}
},
failure: function (response) {
alert('Failure')
alert(response.responseText);
},
error: function (response) {
if (response.responseText != '')
alert(response.responseText);
}
});
});


function DisableDropDown(dropDownId, Text) {
$(dropDownId).attr("disabled", "disabled");
$(dropDownId).empty().append('<option selected="selected" value="0">' + Text + '</option>');
}

function PopulateDropDown(dropDownId, list) {
if (list != null && list.length > 0) {
$(dropDownId).removeAttr("disabled");
$.each(list, function () {
$(dropDownId).append($("<option></option>").val(this['ID']).html(this['Text']));
});
}
}
</script>

</div>
}
</div>

public class HomeController : Controller
   {
       CallLoggerEntities callLoggerEntities = new CallLoggerEntities();

       [HttpGet]
       public ActionResult Index()
       {
           var LocationEntity = new SelectList((from L in callLoggerEntities.Locations
                                                where (L.IsDel == false || L.IsDel == null)
                                                select new { ID = L.ID, Location = L.Location1 }), "ID", "Location").ToList();
           ViewBag.Location = LocationEntity;
           return View();
       }
       [HttpPost]
       [ActionName("Index") ]
       public ActionResult Index_Post(FormCollection F)
       {
           string L = F["Location"];
           return View();
       }


       public JsonResult AjaxMethod(string DropdownValue, string DropdownID)
       {
           int ID = Convert.ToInt32(DropdownValue);
           if (DropdownID == "Location")
           {
               var DepEntity = (from D in callLoggerEntities.Departments
                                where ((D.IsDel == false || D.IsDel == null) && D.LocationID == ID)
                                select new { ID = D.ID, Text = D.DepartmentName }).ToList();
               return Json(DepEntity, JsonRequestBehavior.AllowGet);
           }
           if (DropdownID == "Department")
           {
               var DesEntity = (from D in callLoggerEntities.Designations
                                where ((D.IsDel == false || D.IsDel == null) && D.DepartmentID == ID)
                                select new { ID = D.ID, Text = D.DesignationName }).ToList();
               return Json(DesEntity, JsonRequestBehavior.AllowGet);
           }
           if (DropdownID == "Designation")
           {
               List<FetchEmployeeList_Result> Result = callLoggerEntities.FetchEmployeeList("A", "A", "A", "A").ToList();
           }
           return null;
       }

       public ActionResult About()
       {
           ViewBag.Message = "Your app description page.";

           return View();
       }

       public ActionResult Contact()
       {
           ViewBag.Message = "Your contact page.";

           return View();
       }
   }

What I have tried:

MVC, HTML Control, Jquery Bind Not Showing In FormCollection Not Working