MVC2:Datepicker在编辑器模板中不起作用

时间:2012-07-10 13:57:01

标签: jquery asp.net-mvc-2 datepicker

在视图中 - >共享文件夹我有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>

在这里,您可以看到以下行:&lt;%:Html.EditorFor(x =&gt; x.BankHolidays)%&gt; 这有一个相关的编辑模板;

“%&gt;
<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>

日期选择器需要应用于&lt;%:Html.EditorFor(model =&gt; model.BH.NullableBankHolidayDate)%&gt;

然而它不起作用。我点击该字段,没有任何反应。

当我按F12并进入开发人员工具时,我发现带有DatePicker的控件的HTML看起来像;

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

所以这个类已被分配给datePicker,所以它肯定应该有效吗?

2 个答案:

答案 0 :(得分:0)

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

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

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

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

答案 1 :(得分:0)

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