如何在使用剃刀引擎MVC 5项目中添加日期选取器引导3？ [英] How to add Date Picker Bootstrap 3 on MVC 5 project using the Razor engine?

问题描述

我需要如何安装日期选取器的一些辅助线在MVC 5自引导3项目中使用剃刀引擎。我这里发现这个链接，但不能让它在VS2013工作。

从示例复制在以后的环节上面我已经做了以下内容：

  bundles.Add（新ScriptBundle（〜/包/引导）。包括（
                  〜/脚本/ bootstrap.js
                  〜/脚本/引导-datepicker.js，// **新的引导日期选择器
                  〜/脚本/ respond.js））;        bundles.Add（新StyleBundle（〜/内容/ CSS）。包括（
                  〜/内容/ bootstrap.css
                  〜/内容/引导-datepicker.css，// **新的引导日期选择器
                  〜/内容/的site.css））;
 

然后我添加脚本的索引视图如下

  @section脚本{
@ Scripts.Render（〜/包/ jqueryval）＆LT;脚本类型=文/ JavaScript的＆GT;
    $（'。日期选择器）日期选择器（）。 //初始化的日期选择器
＆LT; / SCRIPT＆GT;
}
 

现在，如何调用这里的日期选择器？

 ＆LT; D​​IV CLASS =表单输入组群-SM＆GT;
    @ Html.LabelFor（型号=＆GT; model.DropOffDate）
    @ Html.TextBoxFor（型号=＆GT; model.DropOffDate，新{@class =表格控，占位符=输入这里下车日期...}）
    @ Html.ValidationMessageFor（型号=＆GT; model.DropOffDate）
＆LT; / DIV＆GT;
 

解决方案

首先，你只需要在日期选择器类添加到文本框，除了的形式控制：

 ＆LT; D​​IV CLASS =表单输入组群-SM＆GT;
    @ Html.LabelFor（型号=＆GT; model.DropOffDate）
    @ Html.TextBoxFor（型号=＆GT; model.DropOffDate，新{@class =的形式控制日期选择器，占位符=输入这里下车日期...}）
    @ Html.ValidationMessageFor（型号=＆GT; model.DropOffDate）
＆LT; / DIV＆GT;
 

那么，可以肯定的JavaScript被触发文本框被渲染后，你必须把日期选择器中调用jQuery的准备功能：

 ＆LT;脚本类型=文/ JavaScript的＆GT;
    $（函数（）{//将当文档准备好触发
       $（'。日期选择器）日期选择器（）。 //初始化的日期选择器
    }）;
＆LT; / SCRIPT＆GT;
 

I need some guide lines on how to install a Date Picker Bootstrap 3 on a MVC 5 project using the Razor engine. I found this link here but couldn't make it work in VS2013.

Copying from the example in the later link above I've already done the following:

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/bootstrap-datepicker.js",    // ** NEW for Bootstrap Datepicker
                  "~/Scripts/respond.js"));

        bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/bootstrap-datepicker.css",  // ** NEW for Bootstrap Datepicker
                  "~/Content/site.css"));

Then I've added the script to the index view as follow

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

<script type="text/javascript">
    $('.datepicker').datepicker(); //Initialise any date pickers
</script>
}

Now, how to call the date picker here?

   <div class="form-group input-group-sm">
    @Html.LabelFor(model => model.DropOffDate)
    @Html.TextBoxFor(model => model.DropOffDate, new { @class = "form-control", placeholder = "Enter Drop-off date here..." })
    @Html.ValidationMessageFor(model => model.DropOffDate)
</div>

解决方案

First, you simply need to add the datepicker class to the textbox, in addition to form-control:

<div class="form-group input-group-sm">
    @Html.LabelFor(model => model.DropOffDate)
    @Html.TextBoxFor(model => model.DropOffDate, new { @class = "form-control datepicker", placeholder = "Enter Drop-off date here..." })
    @Html.ValidationMessageFor(model => model.DropOffDate)
</div>

Then, to be sure the javascript is triggered after the textbox is rendered, you have to put the datepicker call in the jQuery ready function:

<script type="text/javascript">
    $(function () { // will trigger when the document is ready
       $('.datepicker').datepicker(); //Initialise any date pickers
    });
</script>

这篇关于如何在使用剃刀引擎MVC 5项目中添加日期选取器引导3？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！