Question

有没有人使用jquery ui的日期选择器和Razor @Html.TextBoxFor(...)

我尝试允许用户使用Razor标记来选择日期以生成文本框，单击时将显示来自jquery UI的Datepicker。我不确定是否使用：

@using (Html.BeginForm("New","Order"))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary()

    <fieldset>
    @Html.LabelFor(m => m.OrderInfo.installdate)
    @Html.TextBoxFor(m => m.OrderInfo.installdate, new {@id="dp"})
    </fieldset>
}

<script type="text/javascript">
 $(document).ready(function () {

        $("#dp").datepicker();
    });
</script>

@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/bundles/jqueryui")

按此顺序运行，无论重新排列，都无法显示日期选择器。

这甚至可以这样做吗？

Answer 1

确保您已捆绑资源

bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js");
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include("~/Scripts/jquery-ui-{version}.js");
bundles.Add(new StyleBundle("~/bundles/themes/base").Include(
    "~/content/themes/base/jquery.ui.core.css",
    "~/Content/themes/base/jquery.ui.datepicker.css",
    ...
);

以正确的顺序包含它们

Layout.cshtml

<html>
<head>
    @Styles.Render("~/bundles/themes/base")
</head>
<body>
    @RenderBody()
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")
    @RenderSection("page_scripts", required: false)
</body>

现在视图...由于脚本包含在布局中，因此视图不需要它。

@Html.TextBoxFor(m => m.installdate, new { @id="dp" })

@section page_scripts {
    <script>
        $(document).ready(function () {
            $("#dp").datepicker({ ... });
        });
    </script>
}

如果您没有在布局上使用它，或者不使用它，那么

@Html.TextBoxFor(m => m.installdate, new { @id="dp" })

@Styles.Render("~/bundles/themes/base")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
<script>
    $(document).ready(function () {
        $("#dp").datepicker({ ... });
    });
</script>

MVC4 JQuery Datepicker从输入框中捕获日期

1 个答案: