jQuery datepicker 不适用于 MVC4 应用程序

Question

我正在尝试将 jQuery datepicker 引入我的 MVC4 应用程序，但我似乎无法让 click 事件触发 datepicker 小部件。在http://jqueryui.com/datepicker/，他们给出了一个简单的例子来说明如何实现这一点，当我在本地尝试时，它按预期工作，但在 MVC4 应用程序上什么也没有：

我的代码如下：

<script src="@Url.Content("~/Scripts/jquery-2.0.2.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.10.3.js")" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function () {
    $('#expirydate').datepicker();
  });
</script>

<div class="nine columns bottom20">
  <div class="row">
     <h3>New Course details</h3>

      @using(Html.BeginForm("NewCourse","Admin",FormMethod.Post))
      {
        <div class="row">
          <div class="twelve columns" style="width:590px;">
            <div class="row">
              <div class="six columns">
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" /><br />
              </div>
              <div class="six columns">
                <label for="author">Author:</label>
                <input type="text" id="author" name="author" /><br />
              </div>

              <div class="row">
                <div class="twelve columns" style="width:590px; margin-left:5px;">
                  <label for="description">Description:</label>
                  <input type="text" id="description" name="description" /><br />
                </div>
              </div>

              <div class="twelve columns" style="width:590px;">
              <div class="row">                    
                <div class="six columns">
                  <label for="participationpoints">Participation Points:</label>
                  <input type="text" id="participationpoints" name="participationpoints" /><br />
                </div>
                <div class="six columns">
                  <label for="expirydate">Expiry Date:</label>
                  <input type="text" id="expirydate" name="expirydate" /><br />
                </div>
              </div>
              </div>



              <div class="row">
                <div class="six columns">
                  <input type="hidden" id="uploaddate" name="uploaddate" /><br />
                </div>  
              </div>
            </div>
          </div>
        </div>            
          <div class="twelve columns"> 
          <input id="CourseSubmit" type="submit" value="Submit button" class="medium button bottom20"style="margin-left:210px; margin-top:-50px;" />
          </div> 
      }
    </div>   
  </div>

有什么想法吗？

布局中的其他脚本如下：

<script type="text/javascript" src= "@Url.Content("~/Scripts/jquery.js")"></script>
<script type="text/javascript" src= "@Url.Content("~/Scripts/foundation.min.js")"></script>
<script type="text/javascript" src= "@Url.Content("~/Scripts/modernizr.foundation.js")"></script>
<script type="text/javascript" src= "@Url.Content("~/plugins/slider-revolution/jquery.themepunch.plugins.min.js")"></script>
<script type="text/javascript" src= "@Url.Content("~/plugins/slider-revolution/jquery.themepunch.revolution.min.js")"></script>
<script type="text/javascript" src= "@Url.Content("~/Scripts/jquery.carouFredSel-6.0.3-packed.js")"></script>
<script type="text/javascript" src= "@Url.Content("~/Scripts/jquery.touchSwipe.min.js")"></script>
<script type="text/javascript" src= "@Url.Content("~/plugins/titan/js/jquery.titanlighbox.js")"></script>
<script type="text/javascript" src= "@Url.Content("~/plugins/titan/js/prettify.js")"></script>
<script type="text/javascript" src= "@Url.Content("~/Scripts/meta-app-head.js")"></script>
<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src= "@Url.Content("~/Scripts/meta-app.js")"></script>
<script  type="text/javascript" src="@Url.Content("~/Scripts/filedrag.js")"></script>
<script  type="text/javascript" src="@Url.Content("~/Scripts/footable.js")"></script>
<script  type="text/javascript" src="@Url.Content("~/Scripts/footable.sortable.js")"></script>
<script  type="text/javascript" src="@Url.Content("~/Scripts/footable.filter.js.js")"></script>
<script  type="text/javascript" src="@Url.Content("~/Scripts/footable.paginate.js")"></script>

我的捆绑配置如下：

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery.js",
                    "~/Scripts/foundation.min.js",
                    "~/Scripts/modernizr.foundation.min.js",
                    "~/Scripts/jquery{version}.js",
                    "~/Scripts/jquery.carouFredSel-6.0.3-packed.js",
                    "~/Scripts/jquery.touchSwipe.min.js",
                    "~/plugins/slider-revolution/jquery.thempunch.plugins.min.js",
                    "~/plugins/slider-revolution/jquery.thempunch.revolution.min.js",
                    "~/plugins/flexislider/jquery.flexslider.js",
                    "~/plugins/camera/scripts/camera.min.js",
                    "~/plugins/camera/scripts/jquery.easing.1.3.js",
                    "~/plugins/camera/scripts/jquery.mobile.customized.min.js",
                    "~/plugins/titan/js/jquery.titanlighbox.js",
                    "~/plugins/titan/js/prettify.js",
                    "~/Scripts/jquery.validate.min.js",
                    "~/Scripts/footable.js",
                    "~/Scripts/footable.sortable.js",
                    "~/Scripts/footable.filter.js",
                    "~/Scripts/footable.paginate.js",
                    "~/Scripts/jquery-2.0.2.js",
                    "~/Scripts/jquery-ui-1.10.3.js",
                    "~/Scripts/jquery.validate.unobtrusive.min.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                    "~/Scripts/jquery-ui-1.10.3.js",
                    "~/Scripts/jquery-ui-{version}.js"));

Answer 1

您正在渲染 jQuery 两次，一次在您的布局中，一次在您的视图中。这可能会导致您看到的问题。

Answer 2

正确的代码：

$('#datepicker').datepicker();

检查您的 css 文件 jquery-ui。

jquery 中的选择器

#= ID

. = 类

某些属性

$('a[href=www.google.com]')