Question

我正在尝试为我的MVC 5应用设置jQuery datepicker。当我在Internet Explorer 11中启动应用程序时，我收到消息''$'未定义'。您可以看到呈现的HTML，并在帖子末尾附近指出了违规行。

我的模型设置如下：

namespace PublicationSystem.ViewModels
{
    public class ProfileEdit : IValidatableObject
    {
        public Guid ProfileId { get; set; }
        [DataType(DataType.Date)]
        [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
        public DateTime? BirthDate { get; set; }
        //...
    }
}

我的编辑视图是这样的：

@model PublicationSystem.ViewModels.ProfileEdit
@{
    ViewBag.Title = "Edit Profile";
    Layout = "~/Views/Shared/_LayoutSmBanner.cshtml";
}
@using (Html.BeginForm())
{
    ...
    <div class="form-group">
        @Html.LabelFor(model => model.BirthDate, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.TextBoxFor(model => model.BirthDate, new { @class = "datepicker" })
            @Html.ValidationMessageFor(model => model.BirthDate)
        </div>
    </div>
    ...
}

我的布局（它们是嵌套的）：

_LayoutSmBanner.cshtml：

@inherits System.Web.Mvc.WebViewPage
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="container">
    <div class="row">
        <div class="main-column">
            @RenderBody()
        </div>
    </div>
</div>
@RenderSection("scripts", required: false)

_Layout.cshmtl：

<!DOCTYPE html>
<html lang="en">
    <head>
        ...
        @Styles.Render("~/bundles/css")
        @Scripts.RenderFormat("<script src='{0}' defer></script>", "~/bundles/scripts")
    </head>
    <body>
        <div>
            @RenderBody()
        </div>
        <footer class="footer">...</footer>
            @RenderSection("scripts", required: false)

            <script type="text/javascript">
                $(function () {
                    $(".datepicker").datepicker();
                });
            </script>
</body>

渲染的HTML Head看起来像这样：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta ...>
        <title>...</title>

        <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->

        <link href="/Content/css/bootstrap.3.3.5.css" rel="stylesheet"/>
        <link href="/Content/css/sticky-footer.css" rel="stylesheet"/>
        <link href="/Content/themes/base/core.css" rel="stylesheet"/>
        <link href="/Content/themes/base/resizable.css" rel="stylesheet"/>
        <link href="/Content/themes/base/selectable.css" rel="stylesheet"/>
        <link href="/Content/themes/base/accordion.css" rel="stylesheet"/>
        <link href="/Content/themes/base/autocomplete.css" rel="stylesheet"/>
        <link href="/Content/themes/base/button.css" rel="stylesheet"/>
        <link href="/Content/themes/base/dialog.css" rel="stylesheet"/>
        <link href="/Content/themes/base/slider.css" rel="stylesheet"/>
        <link href="/Content/themes/base/tabs.css" rel="stylesheet"/>
        <link href="/Content/themes/base/datepicker.css" rel="stylesheet"/>
        <link href="/Content/themes/base/progressbar.css" rel="stylesheet"/>
        <link href="/Content/themes/base/theme.css" rel="stylesheet"/>
        <link href="/Content/css/style.css" rel="stylesheet"/>

        <script src='/Content/JS/jquery.1.11.2.js' defer></script>
        <script src='/Content/JS/bootstrap.3.3.4.js' defer></script>
        <script src='/Content/JS/jquery-ui-1.11.4.js' defer></script>
        <script src='/Content/JS/ie10-viewport-bug-workaround.js' defer>        </script>
        <script src='/Content/JS/Script.js' defer></script>

    </head>

身体呈现如下：

<body>
    ...
    <footer>...</footer>
            <script type="text/javascript">
                $(function () {    // <--- IE errors here -----
                    $(".datepicker").datepicker();
                });
            </script>
</body>

Answer 1

根据评论和其他项目的建议，我提出了这个解决方案。

我将我的datepicker脚本添加到\ Content \ JS \ Script.js中，当脚本捆绑加载时包含该脚本。

$(document).ready(function () {
    $(".datepicker").datepicker({
        dateFormat: "mm/dd/yyyy",
        autoclose: true
    });
});

这使得脚本能够在加载JQuery后正确运行。

我的Edit.cshtml最终结果如下：

<div class="form-group">
    @Html.LabelFor(model => model.BirthDate, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.BirthDate)
        @Html.ValidationMessageFor(model => model.BirthDate)
    </div>
</div>

然而，为了工作，我需要编写一个自定义日期编辑器，\ Views \ Shared \ EditorTemplates \ Date.cshtml

@model DateTime?
@{
    var value = "";
    if (Model.HasValue) {
        value = String.Format("{0:d}", Model.Value.ToString("MM/dd/yyyy"));
    }
}
@Html.TextBox("", value, new { @class = "datepicker", type = "text" })

IE中的MVC中的DatePicker给我$未定义

1 个答案: