В настоящее время я работаю над отображением различных форм ввода на вкладках в asp.net mvc 3. Каждая вкладка имеет несколько дочерних частичных представлений.[См. Изображение ниже]
1 из частичных представлений содержит форму для создания сеансов, а над ним - еще одно частичное представление со списком созданных сеансов (еще нет). При переключении вкладок вверху и обратно плагин jquery timepicker от Francois Gelinas , известный как jquery.ui.timepicker.js , не может перепривязать / повторно инициализировать после выбора другой вкладки и затем возврата на вкладку РедактироватьСтандартные настройки курса и программы.
Я использую бритвенный движок вместо стандартного веб-движка ...
Мастер-страница / файл _Layout.cshtml
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>@ViewBag.Title</title>
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"> </script>
<script src="@Url.Content("~/Scripts/jquery.ui.core.js")" type="text/javascript"> </script>
<script src="@Url.Content("~/Scripts/jquery.livequery.js")" type="text/javascript"> </script>
<script src="@Url.Content("~/Scripts/jquery.ui.widget.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.tabs.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.timepicker.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.custom.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/jquery-ui-1.8.11.custom.css")" type="text/css" rel="stylesheet" />
<link href="@Url.Content("~/Content/jquery-ui-timepicker.css")" type="text/css" rel="stylesheet" />
<script src="@Url.Content("~/Scripts/MicrosoftAjax.debug.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.debug.js")" type="text/javascript"></script>
Index.cshtml << вызывается кнопкой create в главном меню приложения mvc <br>Создает 3 вкладки, которые вы видите на картинке выше.
@using MvcHtmlHelpers;
<link href="@Url.Content("~/Content/BoxBackgrounds.css")" rel="stylesheet" type="text/css" />
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<div id="tabs">
<ul>
<li >@Html.TabLink("Edit Student Defaults", "EditStudentDefaults", "Creation") </li>
<li>@Html.TabLink("Edit Exam and Certification Defaults", "EditCertAndExamDefaults", "Creation") </li>
<li>@Html.TabLink("Edit Course and Program Defaults", "EditCourseAndProgramDefaults", "Creation")</li>
</ul>
</div>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#tabs").tabs({
cache: false
});
});
EditCourseAndProgramDefaults.cshtml << вкладка частичного представления с частичными представлениями внутри нее. </p>
@model SMS3demo.Controllers.CourseAndProgramDefaultsViewModel
<table width="100%" class="ConfigStudentsGradient" cellspacing="0" border="0" frame="void" style="border-collapse:collapse">
<tr>
<td>
@Html.Partial("ListSessions")
</td>
<td>
@Html.Partial("ListCourses")
</td>
<td>
@Html.Partial("ListPrograms")
</td>
</tr>
<tr>
<td>
@Html.Partial("AddSession")
</td>
<td>
@Html.Partial("AddCourse")
</td>
<td>
@Html.Partial("AddProgram")
</td>
</tr>
</table>
AddSession.cshtml << частичное представление этогоиспользует таймер </p>
@model SMS3demo.Controllers.CourseAndProgramDefaultsViewModel
@using (Html.BeginForm()) {
<script type="text/javascript">
$(document).ready(function () {
$('#StartTime').timepicker({
showPeriod: true,
showLeadingZero: false
});
});
@Html.ValidationSummary(true)
<fieldset>
<legend>Session</legend>
<table>
<tr>
<td>
<span class="SessionStartTime">@Html.TextBoxFor(model => model.SessionStartTime, new {@id = "StartTime" }) </span>
@Html.ValidationMessageFor(model => model.SessionStartTime)
</td>
Я исследовал эту тему уже пару дней.Я попробовал следующие идеи / варианты методов ...
- с использованием live
- с использованием livequery
- , пытаясь воссоздать привязку после каждого события onclick для поля ввода
- Я пытался увидеть, как другие решили эту проблему, используя другой элемент управления, такой как datepicker, так как этот плагин очень похож на него.
Я знаю, что происходит: средство выбора времени проигрываетего привязка, когда я переключаюсь обратно на вкладку.Я обнаружил, что в Firebug создан скрытый объект Timepicker, и он не умирает, когда вкладки переключаются ... однако я не могу перепривязать или вспомнить оригинальный метод для воссоздания, когда вкладка снова выбрана.Я знаю, что document.ready вызывается только 1x, когда частичное представление загружено 1-ым ...
Я попытался сделать следующее: в
<script type="text/javascript">
$(document).ready(function() {
initJQueryWidgets();
});
function initJQueryWidgets() {
$("[ID$=StartTime1]").timepicker({
showPeriod: true,
showLeadingZero: false,
zIndex: 1
});
}
</script>
Я также попытался в верхней части страницы в скобках скриптапокажите выше
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
initJQueryWidgets();
});
Затем я попытался вызвать initJqueryWidgets в обработчике даже onClick для поля ввода
<span class="SessionStartTime">@Html.TextBoxFor(model => model.SessionStartTime, new {@id = "StartTime", @onClick="initJqueryWidgets" }) </span>
Постоянно полученные ошибки были $ ("# StartTime"). timepickerне является функцией (?) () 52 (строка 2) anonymous () Создание (строка 29) [Break On This Error] $ ("# StartTime"). timepicker ({showPeriod: true, showLeadingZero: false});