1

目前我正在努力在 asp.net mvc 3 的选项卡上显示不同的输入表单。每个选项卡都有几个子部分视图。[见下图]
1 个部分视图包含一个用于创建会话的表单，其上方是另一个部分视图，其中包含已创建的会话列表（还没有）.. 在顶部切换选项卡时，再次返回jquery timepicker Francois Gelinas 的插件jquery.ui.timepicker.js在选择另一个选项卡然后返回到选项卡 Edit Course and Program Defaults 后无法重新绑定/重新初始化。
我使用的是剃须刀引擎，而不是默认的网络引擎......

母版页/文件 _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 << 使用时间选择器的局部视图

@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>

我现在研究了这个话题几天。我尝试了以下想法/选项方法...

  1. 使用直播
  2. 使用实时查询
  3. 尝试在输入字段的每个 onclick 事件后重新创建绑定
  4. 我试图看看其他人如何使用另一个控件（如 datepicker）来解决这个问题，因为这个插件与它非常相似。

我知道发生了什么：当我切换回选项卡时，时间选择器正在失去其绑定。我在萤火虫中发现创建了一个隐藏的时间选择器对象，并且在切换选项卡时它不会消失......但是，当再次选择选项卡时，我似乎无法重新绑定或回忆重新创建的原始方法。我知道 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 is not a function (?)()52 (line 2) anonymous()Creation (line 29) [Break On This Error] $("#StartTime") .timepicker({showPeriod: true, showLeadingZero: false});

4

3 回答 3

1

我通过删除加载其他 jquery 版本的调用来修复它！单击选项卡时检查您的 Firebug 控制台，并查看正在处理的 get 命令。确保只链接 1 个版本的 jquery！哇！另外，我发现在部分视图中删除所有脚本链接引用，并放入母版页，更容易跟踪和更正。

特别感谢 Francois Gelinas 抽出时间提供帮助，也感谢 Black Box Operations 提供的帮助。

于 2011-03-29T01:38:52.447 回答
1

时间选择器在 DOM 中创建一个实例一次，并在每次显示时使用该实例，除了内联显示，这就是您在 DOM 中看到它的原因，这并不意味着它与输入分离。

如果时间选择器现在在点击时显示，那可能意味着存在 zIndex 问题或者它丢失了点击事件。

(document).ready(function () {
 $('#StartTime').timepicker({
     showPeriod: true,
     showLeadingZero: false,
     zIndex: 9999
 });

});

如果#StartTime 失去它的绑定，您必须在再次绑定之前删除它的“hasTimePicker”类。

今晚我将调查日期选择器在这种情况下的反应，并使其也适用于时间选择器，当我找到解决方案时会更新。

于 2011-03-28T10:54:19.130 回答
0

Jquery 选项卡通常会在不查看时禁用包含每个选项卡元素的 div。也就是说，如果 Jquery 找不到该元素，则它无法创建日期选择器，因此您必须在选择选项卡时触发一个事件，以首先检查元素是否存在，然后创建日期选择器因此。

$('#tabs a#idOfTabContainingStartTime').bind('click', function(){
    if( $("#StartTime").length ){
         $('#StartTime').timepicker({
             showPeriod: true,
             showLeadingZero: false
         });
    }
}

如果这不能解决您的问题，那么可能是因为 Jquery 对整个 tabs/div/hiding 感到满意。当您选择另一个选项卡时，您当前正在查看的选项卡被隐藏，但 Jquery 也喜欢隐藏选项卡内的所有内容，因此您可能必须创建另一个调用来检查当前隐藏在选项卡中的任何元素并迭代显示它们.

$('#tabs a#idOfTabContainingStartTime :hidden').each(function(){
    $(this).show();
});
于 2011-03-28T06:56:51.650 回答