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

. = class

通过某种属性

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

jQuery datepicker不适用于MVC4应用程序

2 个答案: