How to Submit Values from View to the Controller - asp.net-mvc-4

Question

I have a view with a partial view. In my main view there's a dropdown list, on selection of a value from dropdown list, WebGrid is populated according to the choice selected.
Also in the main view I have a dropdown list, a datetime picker text box, and a Submit (Allocate) button.
Webgrid has one check box for each row. On selecting a row from WebGrid, collected data needs to go the controller. But my button ain't working!
Please help me with my controller, I'm not able to get selected values in my controller.
My View is like:
#model LipiProject.Models.Allocation
#{
ViewBag.Title = "Call Allocation";
}
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<link href="~/StyleSheet1.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="~/Scripts/Timepicker.js"></script>
<script>
$(function () {
$("#datepicker").datetimepicker({ timeFormat: "hh:mm tt" });
});</script>
<style>
.webgrid-table {
font-family: Arial,Helvetica,sans-serif;
font-size: 14px;
font-weight: normal;
width: 650px;
display: table;
border-collapse: collapse;
border: solid 1px #C5C5C5;
background-color: white;
}
.webgrid-table td, th {
border: 1px solid #C5C5C5;
padding: 3px 7px 2px;
}
.webgrid-header, .webgrid-header a {
background-color: #0094ff;
color:#ffffff;
text-align: left;
text-decoration: none;
}
.webgrid-footer {
}
.webgrid-row-style {
padding: 3px 7px 2px;
}
.webgrid-alternating-row {
background-color:azure;
padding: 3px 7px 2px;
}
.col1Width {
width: 55px;
}
.col2Width {
width: 220px;
}
.lineSep {
border-bottom: 1px solid #000;
display: block;
margin: 10px 0;
}
</style>
<h2>Index</h2>
<div id="overlay" style="display: none">
<img id="loading" src="~/Images/ajax-loader.gif">
</div>
#using (Html.BeginForm("CallAllocationSubmit", "Home", FormMethod.Post, new { id = "FrmCallAllocate", ReturnUrl = ViewBag.ReturnUrl }))
{
<table>
<tr>
<td>
<div class="row">
<div class="col-sm-12">
<section class="panel default blue_title h5">
<div class="panel-heading">Select Call Category</div>
<div class="panel-body">
#Html.DropDownList("CallNature", Model.CallNature, "Select Call Nature")
</div>
</section>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div id="GridView">
#Html.Partial("_CallAllocation",Model.CallTicketGrid)
</div>
</td>
</tr>
</table>
<div class="row">
<div class="col-sm-12">
<section class="panel default blue_title h5">
<div class="panel-heading">Allocate Engineer</div>
<div class="panel-body">
#Html.DropDownList("DefaultEngg", Model.DefaultEngg, "Select Engineer")
ETA: <input type="text" id="datepicker">
<input type="submit" value="Allocate" class="btn btn-primary">
</div>
</section>
</div>
</div>
}
<script type="text/javascript">
$('#CallNature').change(function (e) {
e.preventDefault();
var url = '#Url.Action("Filter")';
$.get(url, { CallNatureId: $(this).val() }, function (result) {
debugger;
$('#GridView').html(result);
});
});
</script>
My Partial View is like:
#model List<LipiProject.Models.Allocation>
#{
ViewBag.Title = "_CallAllocation";
}
<style>
.webgrid-table {
font-family: Arial,Helvetica,sans-serif;
font-size: 14px;
font-weight: normal;
width: auto;
display: table;
border-collapse: collapse;
border: solid 1px #C5C5C5;
background-color: white;
}
.webgrid-table td, th {
border: 1px solid #C5C5C5;
padding: 3px 7px 2px;
}
.webgrid-header, .webgrid-header a {
background-color: #0094ff;
color:#ffffff;
text-align: left;
text-decoration: none;
}
.webgrid-footer {
}
.webgrid-row-style {
padding: 3px 7px 2px;
}
.webgrid-alternating-row {
background-color:azure;
padding: 3px 7px 2px;
}
.col1Width {
width: 55px;
}
.col2Width {
width: 220px;
}
.lineSep {
border-bottom: 1px solid #000;
display: block;
margin: 10px 0;
}
</style>
#{ var grid = new WebGrid(source: Model, canPage: true, rowsPerPage: 10, ajaxUpdateContainerId: "gridContent", columnNames: new[] { "CallTicketNumber", "TicketDate", "SerialNumber", "CustomerName", "City", "State", "DefaultEngg" }, defaultSort: "DateCreated");
<div class="row" id="GridView">
<div class="col-sm-12">
<section class="panel default blue_title h5">
<div class="panel-heading">Allocate Calls</div>
<div class="panel-body">
<div class="col-sm-12">#grid.GetHtml(mode:WebGridPagerModes.All,
tableStyle: "webgrid-table",
htmlAttributes: new {id = "checkableGrid"},
headerStyle: "webgrid-header",
footerStyle: "webgrid-footer",
alternatingRowStyle: "webgrid-alternating-row",
selectedRowStyle: "webgrid-selected-row",
rowStyle: "webgrid-row-style",
columns: grid.Columns(
grid.Column(columnName: "CallTicketNumber", header: "CallTicketNumber"),
grid.Column(columnName: "TicketDate", header: "Ticket Logged On"),
grid.Column(columnName: "SerialNumber", header: "Serial Number"),
grid.Column(columnName: "CustomerName", header: "Customer Name"),
grid.Column(columnName: "City", header: "City"),
grid.Column(columnName: "State", header: "State"),
//grid.Column("DefaultEngg", "Engineer", format:item => Html.DropDownList(((string)item.DefaultEngg).ToString(), (List<SelectListItem>)Model[0].DefaultEngg))
//grid.Column(header:"Default Engineer", format: item =>Html.DropDownList(((long)item.CallTicketNumber).ToString(), (IEnumerable<SelectListItem>)Model[0].DefaultEngg))
grid.Column(format: #<text> <input type="checkbox" value="#item.CallTicketNumber" name="ids" /> </text>,
header: "SelectAll")
)) </div>
</div>
</section>
</div>
</div>
}
<script>
$(document).ready(function () {
// 1st replace first column header text with checkbox
$("#checkableGrid th").each(function () {
if ($.trim($(this).text().toString().toLowerCase()) === "SelectAll") {
$(this).text('');
$("<input/>", { type: "checkbox", id: "cbSelectAll", value: "" }).appendTo($(this));
$(this).append("<span>Select All</span>");
}
});
//2nd click event for header checkbox for select /deselect all
$("#cbSelectAll").live("click", function () {
var ischecked = this.checked;
$('#checkableGrid').find("input:checkbox").each(function () {
this.checked = ischecked;
});
});
//3rd click event for checkbox of each row
$("input[name='ids']").click(function () {
var totalRows = $("#checkableGrid td :checkbox").length;
var checked = $("#checkableGrid td :checkbox:checked").length;
if (checked == totalRows) {
$("#checkableGrid").find("input:checkbox").each(function () {
this.checked = true;
});
}
else {
$("#cbSelectAll").removeAttr("checked");
}
});
});
</script>
My Controller is like:
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult CallAllocationSubmit(Allocation allocate, FormCollection frmCollection)
{
string CallTicketNumber = frmCollection["CallTicketNumber"].ToString();
string CallNature = frmCollection["CallNature"].ToString();
var Defengg = frmCollection["DefaultEngg"].ToList();
var ETA = frmCollection["ETA"].ToString();
return RedirectToAction("CallAllocation");
}