MVC2：日期选择器在编辑器模板中不起作用

Posted 2023-05-07

【中文标题】MVC2：日期选择器在编辑器模板中不起作用

【英文标题】：MVC2: Datepicker not working inside an Editor Template

【发布时间】：2012-07-10 00:35:56

【问题描述】：

在 Views -> Shared 文件夹中我有 DateTime.ascx 部分视图；

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<System.DateTime?>" %>
<%:html.TextBox("", (Model.HasValue ? Model.Value.ToLongDateString() : string.Empty), 
    new  @class = "datePicker" )%>

感谢 jquery 库 http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js 和这个 javascript 代码，这适用于我的大部分应用程序；

        // noWeekendsOrHolidays
        //  beforeShowDay: $.datepicker.noWeekends
        $(function () 
            $(".datePicker").datepicker( showOn: 'both', dateFormat: 'dd MM yy', changeMonth: true, changeYear: true, yearRange: 'c-1:c+1', beforeShowDay: noWeekendsOrHolidays );
        );

我的看法如下；

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.master" 
Inherits="System.Web.Mvc.ViewPage<SHP.WebUI.Models.BankHolidayViewModel>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    BankHoliday
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <% using (Html.BeginForm("Create", "BankHoliday"))
       %>
       <%: Html.AntiForgeryToken() %>
        <h3>Bank Holiday Administration</h3>
        <% if (TempData["UpdatedFlag"].ToString() == "True")
         %>
        <p class="success">At time <% Response.Write(DateTime.Now.ToString("T")); %> - Details have been successfully saved 
            </p>
        <%
        else if (TempData["UpdatedFlag"].ToString() == "False")
        %>
        <p class="error">At time <% Response.Write(DateTime.Now.ToString("T")); %> - ERROR! Invalid date entered has NOT been saved 
            </p>
        <% %>        
             <p>Select the year: <%: Html.DropDownListFor(model => model.SelectedYear, Model.YearList)%></p>
            <fieldset>
            <legend>Enter the bank holidays here:</legend>
             <p><i>You can find the bank holiday dates on this <a target="_blank" href="http://www.year-planner-calendar.wanadoo.co.uk/">website</a>.</i> </p>      
            <table class="groupBorder">
                <tr>
                    <th>Bank Holiday</th>
                    <th>Date</th>
                    <th>Notes</th>
                </tr>
                <%: Html.EditorFor(x => x.BankHolidays) %>
                <tr>
                    <td colspan="3" style="padding-top:20px;text-align: center">
                        <input type="submit" value="Save" id="btnSubmit"/>
                    </td>
                </tr>
            </table>
            </fieldset>
        <%  %>
        <script language="javascript" type="text/javascript">
            $(function () 
                $("#SelectedYear").change(function () 
                    var year = $("#SelectedYear").val();
                    $("#wholepage").load('<%:Url.Content(@"~/BankHoliday/Create/")%>' + year);
                );
            );
    </script>
</asp:Content>

在这里你可以看到这一行： x.BankHolidays) %> 这有一个关联的编辑器模板；

" %>

<tr>
    <td><%: Model.T.BankHolidayDescription%>
        <%: Html.HiddenFor(model => model.BH.BankHolidayId) %>
        <%: Html.HiddenFor(model => model.T.BankHolidayTypeId) %>
    </td>
    <td><%: Html.EditorFor(model => model.BH.NullableBankHolidayDate)%></td>
    <td><%: Html.EditorFor(model => model.BH.BankHolidayComment)%></td>
</tr>

日期选择器需要应用到 model.BH.NullableBankHolidayDate)%>

但是它不起作用。我单击该字段，但没有任何反应。

当我按 F12 并进入开发者工具时，我发现带有 DatePicker 的控件的 HTML 看起来像这样；

<input name="BankHolidays[6].BH.NullableBankHolidayDate" class="datePicker hasDatepicker" id="BankHolidays_6__BH_NullableBankHolidayDate" type="text" jQuery1341928330742="131"/>

所以这个类已经被分配给了 datePicker，那么它应该可以工作吗？

【问题讨论】：

你在说jqueryui.com/demos/datepicker ??

另外，你的选择器是如何定义应用日期选择器的？你在用$('.datePicker')吗？

您是否尝试过将 jQuery 脚本从编辑器模板转移到主页并刷新它？

脚本在母版页上

【参考方案1】：

您是否定义了 javascript 函数 noWeekendsOrHolidays ？ 如果您想了解更多信息，可以阅读此article。

您可以尝试更改的另一件事是母版页脚本：

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

并根据此 Yahoo! 将其放在页面底部document

【讨论】：

是的，noWeekendsOrHolidays 已定义并可在其他地方使用。我不想在我的问题中添加额外的信息。

@arame3333: 你确定你没有遇到任何 javascript 错误吗？

我对此很有信心，因为这适用于应用程序的其他地方。这里的区别在于它是在一个网格中。

【参考方案2】：

问题是我正在通过 Ajax 调用填充网格，并且 $(document).ready(function () ) 事件没有触发。 当我更改代码以提交到 POST 操作并从中填充网格时，它起作用了。 在 Ajax 调用之后，我已经在成功函数中分配了 datepicker，但我无法让它工作。