1
目前我正致力於在asp.net mvc 3的選項卡上顯示不同的輸入表單。 每個選項卡都有幾個子部分視圖。 [見下圖]
1個部分視圖包含一個用於創建會話的表單，上面是另一個部分視圖，其中包含創建的會話列表（還沒有）.. 當切換頂部標籤並返回時通過弗朗索瓦Gelinas的的jquery timepicker插件稱爲jquery.ui.timepicker.js失敗選擇另一選項卡，然後返回到標籤編輯課程和程序默認後重新綁定/重新初始化。
我使用而不是默認的Web引擎剃刀引擎，...jquery插件timepicker在切換jquery選項卡並在asp.net mvc部分視圖中返回後不會重新綁定
母版/文件_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 < <這是由所謂的主mvc應用程序菜單上的創建按鈕
它創建您在上圖中看到的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 < <局部視圖與在其內部的局部視圖選項卡。
@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 < <使用該timepicker
@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>
局部視圖現在我研究了幾天的這個話題。 我嘗試以下思路/選項方法...
- 使用實時
- 使用的liveQuery
- 試圖重新輸入域的每個onclick事件
- 我想看看如何進行綁定其他人使用另一個控件如 datepicker解決了這個問題，因爲這個插件與它非常相似。
我知道發生了什麼：當我切換回選項卡時，timepicker正在失去其綁定。我發現在螢火蟲中有一個隱藏的timepicker對象被創建，並且它在切換標籤時不會死亡...但是，我似乎無法重新綁定或回想當再次選擇標籤時重新創建原始方法。我知道當局部視圖第一次加載時，document.ready僅被稱爲1x ...
我試着做以下幾點： 在
<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();
});
然後我打過電話在onclick甚至處理程序initJqueryWidgets對於輸入框
<span class="SessionStartTime">@Html.TextBoxFor(model => model.SessionStartTime, new {@id = "StartTime", @onClick="initJqueryWidgets" }) </span>
我一直收到的錯誤是$（「＃StartTime」）。timepicker不是一個函數。 （{showPeriod：true，showLeadingZero：false}）;
我應該怎樣調用以重新綁定輸入？任何嘗試調用$（'＃StartTime'）。timepicker（）;導致錯誤timepicker不是一個函數...然後點擊輸入框當然不會做任何事情。 – Fletch 2011-03-28 23:32:19
對不起，我嘗試重新創建問題失敗。我知道內容是在標籤中動態加載的，但這不應該是一個問題。你有更多的1個元素與ID StartTime？。 ---一個帶有jQuery選項卡和timepicker的測試頁面，我試圖重現這個問題：http://fgelinas.com/code/timepicker/tab_bug/ – 2011-03-29 00:23:40
呵呵..我學習的是firebug，jquery和asp。網絡mvc都在同一時間！ :)我玩過一些螢火蟲..我發現了。 1.當標籤再次顯示時，輸入框中的班級丟失。使用firebug/firequery我添加了課程實時當然這不會重新綁定事件...... :(我只有一個元素與StartTime的id沒有類命名衝突...所以一旦它的界限..隱藏，重新顯示它不再綁定到點擊事件，我們如何重新綁定它？不能使用原來使用的相同的調用，你有一個隱藏的方法，我應該調用類嗎？ – Fletch 2011-03-29 00:28:18