关于asp.net mvc：在JQuery引导程序模型的部分视图中具有日期时间选择器


Having a datetime picker in a partial view inside a JQuery bootstrap model

我想要一个带有日期选择器的引导程序模型。我已经复制了此示例中的所有内容，并可以正常工作。

http://jsfiddle.net/sudiptabanerjee/93eTU/

问题是，我的对话框内容是局部视图，并使用JQuery设置。它似乎从不显示日期选择器。我已经复制了代码的相关部分。

所以在屏幕上有一个类似

的按钮

1
2
3
4
5
6
<button type="button" class="btn btn-primary" id="btnEdit"
        [email protected]
        data-toggle="modal"
        data-target="#myModal">
        Edit
</button>

有一个JQuery点击事件

1
2
3
4
5
6
7
8
9
$(document).on("click","# btnEdit", function (e) {
   $.ajax({ url:"/Item/Edit",
            datatype:"text",
            data: { itemId: $(this).attr('data-ItemId) },
            type:"GET",
          }).done(function (partialViewResult) {
          $(".modal-content").html(partialViewResult);
    });
});

})；
然后转到名为ItemController的MVC控制器，并调用Edit，以获取部分视图
公共ActionResult编辑(Guid itemId)
{
返回PartialView(" _ Edit"，GetByItemID(itemId));
}

"编辑"局部视图如下所示，这就是不显示id为datepicker

的输入的原因

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@model Project.Models.Item
@using (Html.BeginForm())
{
   @Html.AntiForgeryToken()
   
     
         <button type="button" class="close" data-dismiss="modal" aria- label="Close"><span aria-hidden="true"></span></button>
         <h4 class="modal-title" id="myModalLabel"> Item</h4>
     
     @Html.ValidationSummary(true,"", new { @class ="text-danger" })
     <p><center>[wp_ad_camp_2]</center></p><p>Date: <input type="text" id="datepicker" class="datepicker"></p>
 
}

@section Scripts {
   @Scripts.Render("~/bundles/jqueryval")
 }

有JS被调用，它为类datepicker的所有内容提供了一个datepicker。当文本框位于其他任何地方时，它都可以工作，希望在对话框上出现它

1
 $(".datepicker").datepicker();

我也有CSS在做

1
.clsDatePicker {  z-index: 100000; }
相关讨论

问题是您的JS for datetimePicker插件在从模式视图中添加模态内容之前已被加载，在这种情况下，当DOM已经准备就绪时，插件将无法从视图中动态添加元素。

在动态视图中添加内容后，尝试初始化datetimepicker

1
2
3
4
5
6
7
8
9
10
$(document).on("click","# btnEdit", function (e) {
   $.ajax({ url:"/Item/Edit",
            datatype:"text",
            data: { itemId: $(this).attr('data-ItemId) },
            type:"GET",
          }).done(function (partialViewResult) {
          $(".modal-content").html(partialViewResult);
$(".datepicker").datepicker();
    });
});

希望这会有所帮助：)

相关讨论