jQuery日期选择器无法在MVC4应用程序上工作

jQuery datepicker not working on MVC4 application

本文关键字:应用 应用程序 程序上 工作 MVC4 日期 选择器 jQuery      更新时间:2023-09-26

我正试图将jQuery日期选择器引入我的MVC4应用程序,但似乎无法获得启动日期选择器小部件的点击事件。在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"));

您将呈现jQuery两次,一次在布局中,另一次在视图中。这可能是您所看到的问题的原因。

正确的代码:

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

检查你的css文件jqueryui。

jquery 中的选择器

#=ID

.=类

通过某种属性

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