我正在制作一个适用于Ipad的C#Razor MVC Web应用程序。我正在使用JQuery mobile和Kendo UI。我有2个使用Kendo网格的输入表单,它们位于JQuery弹出窗口中。
我的问题是,Waste_Read控制器是两次触发,并且制作了2个剑道网格。这在桌面应用程序中并不明显,但在ipad 2上可见。
下面是我的_Layout.cshtml和Ham.cshtml(这是我的视图)代码。
谢谢!
__ Layout.cshtml
<!DOCTYPE html> <html lang="en"> <head> @{ if (Session["currentDate"] == null) { HttpContext.Current.Session["currentDate"] = DateTime.Today.ToString("yyyy-MM-dd"); } if (Session["currentShift"] == null) { HttpContext.Current.Session["currentShift"] = 1; } if (Session["ReportType"] == null) { HttpContext.Current.Session["ReportType"] = "Daily"; } } <title>@ViewBag.Title</title> <meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width=device-width" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <link href="~/Resources/Triangle.ico" rel="shortcut icon" type="image/x-icon" /> @Styles.Render("~/Content/mobileCss", "~/Content/css") @Scripts.Render("~/bundles/modernizr") @Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile") <link href="@Url.Content("~/Content/kendo/2013.1.319/kendo.common.min.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("~/Content/kendo/2013.1.319/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("~/Content/kendo/2013.1.319/kendo.silver.min.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("~/Content/kendo/2013.1.319/kendo.dataviz.silver.min.css")" rel="stylesheet" type="text/css" /> @*<script src="@Url.Content("~/Scripts/kendo/2013.1.319/jquery.min.js")"></script>*@ <script src="@Url.Content("~/Scripts/kendo/2013.1.319/kendo.all.min.js")"></script> <script src="@Url.Content("~/Scripts/kendo/2013.1.319/kendo.aspnetmvc.min.js")"></script> @*<script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>*@ <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script> <script type="text/javascript"> //prevents ipad vertical bounce scrolling document.ontouchmove = function (event) { event.preventDefault(); } function UpdateDate() { UpdateSessionDate(); UpdateSessionShift(); UpdateSessionReportType(); //$('#datepick').val('AT(Session["currentDate"])'); var DatePageType = '@(ViewBag.DatePageType)'; if (DatePageType == "Reporting") { UpdateCharts(); } if (DatePageType == "LiveView") { UpdateViews($('#hoursaver').val()); UpdateLineViews($('#hoursaver').val()); UpdateOverallInfoBox($('#linesaver').val()); UpdateOverviewOfLabourChart() } if (DatePageType == "LabourEntry") { // UpdateViews($('#hoursaver').val()); refreshLabourEntry(); } } function UpdateShift() { UpdateSessionDate(); UpdateSessionShift(); //$('#datepick').val('AT(Session["currentDate"])'); var DatePageType = '@(ViewBag.DatePageType)'; if (DatePageType == "Reporting") { UpdateCharts(); } if (DatePageType == "LiveView") { UpdateViews($('#hoursaver').val()); UpdateLineViews($('#hoursaver').val()); UpdateOverallInfoBox($('#linesaver').val()); } if (DatePageType == "LabourEntry") { refreshLabourEntry(); } } function pullfrompeviousLoad(objThis) { var url = $(objThis).data('url') + '?hour=' + $(objThis).data('hour') + '&Shift=' + $(objThis).data('shift') + '&LineName=' + $(objThis).data('line'); window.location.href = url; } function menuLoad(objThis) { var url = $(objThis).data('url'); window.location.href = url; } function buttonLoad(objThis) { var url = $(objThis).data('url') + '?hour=' + $(objThis).data('time'); window.location.href = url; } function saveLoad(objThis) { $('#labourform').submit(); var url = $(objThis).data('url') + '?hour=' + $(objThis).data('time'); window.location.href = url; return false; } // update date session data function UpdateSessionDate() { $.post('/SetSession/SetVariable', { key: "currentDate", value: kendo.toString($("#datepicker").data("kendoDatePicker").value(), "yyyy-MM-dd") }); }; // update shift session data function UpdateSessionShift() { $.post('/SetSession/SetVariable', { key: "currentShift", value: $('#shift').val() }); }; // update report type session data function UpdateSessionReportType() { $.post('/SetSession/SetVariable', { key: "ReportType", value: $('#ReportType').val() }); }; function UpdateButtons(h) { var arrayToModify = []; var i = 0, j, k, buttonsToCreate, buttonContainer, newButton; var buttonsToCreate = []; var now = parseInt(h); for (var j = (now - 7) ; j <= (now + 7) ; j++) { if (j >= 0 && j <= 23) { buttonsToCreate[i] = j; i++; } } buttonContainer = document.getElementById('ddShift'); for (k = 0; k < buttonsToCreate.length; k++) { if (buttonsToCreate[k] == parseInt(h) + 1) { newButton.style.cssText = 'background-color: red;'; } newButton = document.createElement('input'); newButton.type = 'button'; newButton.value = buttonsToCreate[k]; newButton.id = buttonsToCreate[k]; newButton.onclick = function () { arrayToModify[arrayToModify.length] = this.id; $('#hoursaver').val(this.id); UpdateViews(this.id); UpdateLineViews(this.id); }; buttonContainer.appendChild(newButton); } }; kendo.culture("en-US"); </script> </head> <body> <div data-role="page" data-theme="b" id="index"> <div data-role="header" data-position="fixed"> <h1>@ViewBag.Title</h1> <a href="#nav-panel" data-icon="bars" data-iconpos="notext" class="ui-btn-left">Menu</a> @if (Request.IsAuthenticated) { @Html.ActionLink("My Account", "Index", "Account", routeValues: null, htmlAttributes: new { data_icon = "gear" }) } else { @Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { data_icon = "gear" }) } <div class="datepickerbtn" style="width: 212.5px;"> @(Html.Kendo().DatePicker() .Name("datepicker") .Events(e => { e.Change("UpdateDate"); }) .Format("yyyy-MM-dd") .Value((String)Session["currentDate"]) ) </div> <div class="shiftpickerbtn" id="btnshift"> <select id="shift" name="shift" onchange="UpdateShift()"> <option value="1">Shift 1</option> <option value="2">Shift 2</option> </select> </div> </div> <div data-role="content"> @RenderBody() </div> <div data-role="footer" style="text-align: center" data-position="fixed"> @RenderSection("footer", false) </div> <div data-role="panel" data-position-fixed="true" data-theme="b" data-content-theme="d" id="nav-panel"> <ul data-role="listview" data-theme="a" class="nav-search"> <li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li> <li><a data-url="@Url.Action("Index", "Home")" onclick="menuLoad(this)">Home</a></li> <li><a data-url="@Url.Action("Index", "LabourEntry")" onclick="menuLoad(this)">Labour Entry</a></li> <li><a data-url="@Url.Action("Index", "LiveView")" onclick="menuLoad(this)">Live View</a></li> <li><a data-url="@Url.Action("Index", "Report")" onclick="menuLoad(this)">Reporting</a></li> <li><a data-url="@Url.Action("Loin", "ScheduleBuilder")" onclick="menuLoad(this)">Schedule Builder</a></li> <li><a data-url="@Url.Action("About", "Home")" onclick="menuLoad(this)">About</a></li> <li><a data-url="@Url.Action("Contact", "Home")" onclick="menuLoad(this)">Contact</a></li> </ul> </div> </div> @RenderSection("scripts", required: false) </body> </html>
Ham.cshtml
@model IEnumerable<OPS.Models.LabourSchedule>
@{
ViewBag.Title = "Ham";
Layout = "~/Views/Shared/_Layout.cshtml";
ViewBag.DatePageType = "LabourEntry";
}
<script>
$(document).ready(function () {
//set the value of the datepicker and Shift via session variables
$('#datepicker').val('@(Session["currentDate"])');
$('#shift').val('@(Session["currentShift"])');
$('#shift').selectmenu('refresh');
$('#lblWasteFormDate').html('@(Session["currentDate"])');
});
function Update_Data() {
return {
CurDate: kendo.toString($("#datepicker").data("kendoDatePicker").value(), "yyyy-MM-dd")
};
}
function Read_Data() {
return {
LineName: "Ham",
CurDate: kendo.toString($("#datepicker").data("kendoDatePicker").value(), "yyyy-MM-dd"),
ShiftName: @(Session["currentShift"]) + ""
};
}
function Read_DT_Data() {
return {
LineName: "Ham",
CurDate: kendo.toString($("#datepicker").data("kendoDatePicker").value(), "yyyy-MM-dd"),
ShiftName: $("#shift").val() + ""
};
}
</script>
@section footer
{
<div data-inline="true">
<div data-inline="true">
@if (ViewBag.curHour > 0)
{
<a data-role="button" href="#" data-url="@Url.Action("Ham", "LabourEntry")" onclick="buttonLoad(this)" data-icon="arrow-l" data-iconpos="notext" data-theme="c" data-inline="true" data-time="@ViewBag.prevHour"></a>
}
@for (var i = ViewBag.curHour - 7; i <= ViewBag.curHour + 7; i++)
{
if (ViewBag.curHour == i)
{
<a data-role="button" href="#" data-theme="b" data-inline="true">@i</a>
}
else if (@i >= 0 && @i <= 23)
{
<a data-role="button" href="#" data-url="@Url.Action("Ham", "LabourEntry")" onclick="buttonLoad(this)" data-theme="c" data-inline="true" data-time="@i">@i</a>
}
}
@if (ViewBag.curHour < 23)
{
<a data-role="button" href="#" data-url="@Url.Action("Ham", "LabourEntry")" onclick="buttonLoad(this)" data-icon="arrow-r" data-iconpos="notext" data-theme="c" data-inline="true" data-time="@ViewBag.nextHour">Arrow right</a>
}
<a href="#popupMenu" data-rel="popup" data-role="button" data-inline="true" data-transition="slideup" data-icon="grid" data-iconpos="notext" data-theme="b">Options</a>
</div>
</div>
<div data-role="popup" id="popupDownTime" class="ui-content" data-theme="d" data-overlay-theme="a" data-dismissible="false" style="width: 80%; position: relative; margin: 20px auto;">
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<div id="update-message"></div>
@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "DTForm" }))
{
<input type="hidden" name="LineName" value="Ham" />
<table>
<tr>
<td colspan="3">
<label for="categories">Downtime Reason:</label>
@(Html.Kendo().DropDownList()
.Name("DTCatId")
.OptionLabel("Select downtime...")
.HtmlAttributes(new { style = "width:90%;" })
.DataTextField("Name")
.DataValueField("ID")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetDowntimeCategories", "LabourEntry");
});
})
)
</td>
</tr>
<tr>
<td>
<label for="txt_DT_Duration">Duration (minutes):</label>
<input type="number" name="DT_Duration" pattern="[0-9]*" id="txt_DT_Duration" value="" />
</td>
<td>
<label for="txt_DT_People"># of People:</label>
<input type="number" name="DT_People" pattern="[0-9]*" id="txt_DT_People" value="" />
</td>
<td>
<label for="sl_Hrs_Type">Hours Type:</label>
<select name="Hrs_Type" id="sl_Hrs_Type" data-role="slider">
<option value="OT">OT</option>
<option value="REG" selected="selected">Reg</option>
</select>
</td>
</tr>
<tr>
<td colspan="3">
<label for="txt_DT_Desc">Description Detail:</label>
<textarea rows="12" name="DT_Desc" id="txt_DT_Desc"></textarea>
</td>
</tr>
<tr>
<td colspan="3">
<input type="submit" name="submit" value="Add Downtime" />
</td>
</tr>
<tr>
<td colspan="3">
@(Html.Kendo().Grid<OPS.Models.DownTime>()
.Name("DTGrid")
.Columns(columns =>
{
columns.Bound(p => p.ID).Hidden(true);
columns.Bound(p => p.DT_ID).Hidden(true);
columns.Bound(p => p.HR_TYPE).Hidden(true);
columns.Bound(p => p.LINE_ID).Hidden(true);
columns.Bound(p => p.SHIFT).Hidden(true);
columns.Bound(p => p.USER_ID).Hidden(true);
columns.Bound(p => p.DT_REASON).Title("Reason");
columns.Bound(p => p.DT_DETAIL).Title("Details");
columns.Bound(p => p.DURATION).Title("Duration (mins)");
columns.Bound(p => p.NUM_EFFECTED).Title("# of People");
})
.ToolBar(toolbar =>
{
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Sortable()
.Scrollable()
.Resizable(resize => resize.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(p => p.ID);
})
.Batch(true)
.ServerOperation(false)
.Events(events => events.Error("error"))
.Read(read => read.Action("DT_Read", "LabourEntry")
.Data("Read_DT_Data"))
.Update(update => update.Action("DT_Update", "LabourEntry"))
)
)
</td>
</tr>
</table>
}
</div>
<div data-role="popup" id="popupWaste" class="ui-content" data-theme="d" data-overlay-theme="a" data-dismissible="false" style="width: 90%; position: relative; margin: 20px auto;">
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<div style="width: 100%;">
<h3>Date: <label id="lblWasteFormDate"></label>
</h3>
@(Html.Kendo().Grid<OPS.Models.LineProductWasteEntry>()
.Name("WasteGrid")
.Columns(columns =>
{
columns.Bound(p => p.Id).Hidden(true);
columns.Bound(p => p.BucketWeight).Hidden(true);
columns.Bound(p => p.LineCategoryId).Hidden(true);
columns.Bound(p => p.LineCategoryProduct).Hidden(true);
columns.Bound(p => p.LineProductId).Hidden(true);
columns.Bound(p => p.ShiftId).Hidden(true);
columns.Bound(p => p.SourceId).Hidden(true);
columns.Bound(p => p.UserId).Hidden(true);
columns.Bound(p => p.CategoryName);
columns.Bound(p => p.ProductName);
columns.Bound(p => p.Value);
columns.Bound(p => p.SourceName);
columns.Bound(p => p.Source);
columns.Bound(p => p.Weight);
columns.Bound(p => p.Weight2);
columns.Bound(p => p.Weight3);
})
.ToolBar(toolbar =>
{
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Sortable()
.Scrollable()
.Resizable(resize => resize.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.SourceName).Editable(false);
model.Field(p => p.CategoryName).Editable(false);
model.Field(p => p.ProductName).Editable(false);
model.Field(p => p.Value).Editable(false);
})
.Batch(true)
.ServerOperation(false)
.Events(events => events.Error("error"))
.Read(read => read.Action("Waste_Read", "LabourEntry")
.Data("Read_Data"))
.Update(update => update.Action("Waste_Update", "LabourEntry")
.Data("Update_Data"))
)
)
</div>
</div>
<div data-role="popup" id="popupMenu" data-theme="a">
<ul data-role="listview" data-inset="true" style="min-width: 270px;" data-theme="a" class="nav-search">
<li><a href="#popupWaste" data-rel="popup" data-position-to="window" data-transition="pop">Add Waste</a></li>
<li><a href="#popupDownTime" data-rel="popup" data-position-to="window" data-transition="pop">Add Downtime</a></li>
</ul>
</div>
}
我正在制作一个适用于Ipad的C#Razor MVC Web应用程序。我正在使用JQuery mobile和Kendo UI。我有2个使用Kendo网格的输入表单,它们位于JQuery弹出窗口中。我的问题是...
[我唯一能想到两次发布表单的情况是,当您将javascript函数绑定到您的提交按钮的单击上,然后单击form.submit()
在一个更为复杂的环境中,我注意到我的控制器被击中了不止一次。当我纠正以下两件事时,它不再受到双重打击: