1

无法让 jquery-ui-timepicker-addon 下拉列表与 MVC4 框架一起使用。我正在尝试通过 EditorTemplate 连接时间选择器，以将其附加到我的数据模型中的所有可为空的 DateTime 对象。代码进入脚本，但没有下拉列表附加到文本框。任何帮助将不胜感激。此示例代码：

模型

public class MyDateModel
    {

            [Key]
            public int Date_ID { get; set; }
            public DateTime? DATE_APPOINTMENT { get; set; }


    }

语境

public class DateContext:DbContext
    {

        public DbSet<MyDateModel> MyDateModels { get; set; }

        protected override void OnModelCreating(DbModelBuilder modelBuilder)
        {

            modelBuilder.Conventions.Remove<PluralizingTableNameConvention>();

        }
    }

看法

@using (Html.BeginForm()) {

    @Html.ValidationSummary(true)

    <fieldset>

        <legend>MyDateModel</legend>

        <div class="editor-label">

            @Html.LabelFor(model => model.DATE_APPOINTMENT)

        </div>

        <div class="editor-field">

            @Html.EditorFor(model => model.DATE_APPOINTMENT)

            @Html.ValidationMessageFor(model => model.DATE_APPOINTMENT)

        </div>

        <p>

            <input type="submit" value="Create" />

        </p>

    </fieldset>

编辑器模板

日期时间.cshtml

@model Nullable<System.DateTime>

@if ( Model.HasValue ) {

   @Html.TextBox( "" , String.Format( "{0:MM-dd-yyyy HH:mm}" , Model.Value ) , new  { @class = "textbox" , @style = "width:400px;" } )

}
else {

   @Html.TextBox( "" , String.Format( "{0:MM-dd-yyyy HH:mm}" , DateTime.Now ) , new { @class = "textbox" , @style = "width:400px;" } )

}

@{

string name = ViewData.TemplateInfo.HtmlFieldPrefix;
string id = name.Replace( ".", "_" );
}
<script type="text/javascript">
    $(document).ready(function () {
        $("#@id").datetimepicker();
    });
</script>

从 _Layout.cshtml 调用脚本

<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title - My ASP.NET MVC Application</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    @Styles.Render("~/Content/themes/base/css", "~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    <link href="../../Content/themes/base/jquery-ui-timepicker-addon.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-ui-timepicker-addon.js" type="text/javascript"></script>
</head>
<body>
    <header>
        <div class="content-wrapper">
            <div class="float-left">
                <p class="site-title">@Html.ActionLink("Your logo here", "Index", "Home")</p>
            </div>
            <div class="float-right">
                <section id="login">
                    @Html.Partial("_LoginPartial")
                </section>
                <nav>
                    <ul id="menu">
                        <li>@Html.ActionLink("Home", "Index", "Home")</li>
                        <li>@Html.ActionLink("About", "About", "Home")</li>
                        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    <div id="body">
        @RenderSection("featured", required: false)
        <section class="content-wrapper main-content clear-fix">
            @RenderBody()
        </section>
    </div>
    <footer>
        <div class="content-wrapper">
            <div class="float-left">
                <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
            </div>
            <div class="float-right">
                <ul id="social">
                    <li><a href="http://facebook.com" class="facebook">Facebook</a></li>
                    <li><a href="http://twitter.com" class="twitter">Twitter</a></li>
                </ul>
            </div>
        </div>
    </footer>

    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>

4

1 回答 1

0

所以我找到了答案。诀窍是在_Layou.cshtml 中正确调用脚本。从正文中删除所有脚本调用并将它们放在标题中。这是有效的代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - My ASP.NET MVC Application</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/themes/base/css", "~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/jqueryui")

    </head>
    <body>
        <header>
            <div class="content-wrapper">
                <div class="float-left">
                    <p class="site-title">@Html.ActionLink("Your logo here", "Index", "Home")</p>
                </div>
                <div class="float-right">
                    <section id="login">
                        @Html.Partial("_LoginPartial")

                    </section>
                    <nav>
                        <ul id="menu">
                            <li>@Html.ActionLink("Home", "Index", "Home")</li>
                            <li>@Html.ActionLink("About", "About", "Home")</li>
                            <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        <div id="body">

            @RenderSection("featured", required: false)
            <section class="content-wrapper main-content clear-fix">
                @RenderBody()
            </section>
        </div>
        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
                </div>
                <div class="float-right">
                    <ul id="social">
                        <li><a href="http://facebook.com" class="facebook">Facebook</a></li>
                        <li><a href="http://twitter.com" class="twitter">Twitter</a></li>
                    </ul>
                </div>
            </div>
        </footer>

        @RenderSection("scripts", required: false)
    </body>
</html>
于 2012-09-17T16:17:19.997 回答