我有一个局部视图的视图。在我的主视图中有一个下拉列表,在从下拉列表中选择值时,将根据所选的选项填充WebGrid。 同样在主视图中,我有一个下拉列表,一个日期时间选择器文本框和一个提交(分配)按钮。 Webgrid每行都有一个复选框。从WebGrid中选择一行时,收集的数据需要转到控制器。但我的按钮不起作用!
请帮我控制器,我无法在控制器中获取所选值。 我的观点如下:
@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>
我的部分视图如下:
@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>
我的控制器就像:
[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");
}