Question

有很多值得赞扬的MVC，但我一直遇到的一个问题是ID名称冲突。我在使用foreach循环生成网格时首先注意到它。在SO的帮助下，我发现解决方案是使用编辑器模板。现在我对标签有同样的问题。我用这个参考来找出如何使用标签; http://blog.roonga.com.au/search?updated-max=2010-06-14T19:27:00%2B10:00&max-results=1

我的标签问题是我使用带日期选择器的日期字段。在上面的示例中，通过引用容器元素的生成的唯一ID来避免ID名称冲突。但是对于datepicker，容器的ID是无关紧要的，只有日期字段的ID很重要。那么，如果我创建第二个选项卡与第一个选项卡相同，当我更新第二个选项卡时，第一个选项卡上的日期会更新。以下是我的视图，以及显示日期的局部视图。当我单击“添加缺勤1天”按钮时，我为该屏幕创建了一个选项卡;

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

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

<asp:Content ID="Content2" ContentPlaceHolderID="AdminAccountsContent" runat="server">
    <script type="text/javascript">
        $(function () {
        $('#tabs').tabs(
            { cache: true },
            {
                ajaxOptions: {
                    cache: false,
                    error: function (xhr, status, index, anchor) {
                        $(anchor.hash).html("Couldn't load this tab.");
                    },
                    data: {},
                    success: function (data, textStatus) { }
                },
                add: function (event, ui) {
                    //select the new tab
                    $('#tabs').tabs('select', '#' + ui.panel.id);
                }
            });
        });

        function addTab(title, uri) {
            var newTab = $("#tabs").tabs("add", uri, title);
        }

        function closeTab() {
            var index = getSelectedTabIndex();
            $("#tabs").tabs("remove", index)
        }

        function getSelectedTabIndex() {
            return $("#tabs").tabs('option', 'selected');
        }

        function RefreshList() {
            $('#frmAbsenceList').submit();
        }
 </script>
    <% using (Html.BeginForm()) {%>
    <%: Html.AntiForgeryToken() %>
        <fieldset>
        <legend>Select an employee to edit absence record</legend>
        <div style="padding-bottom:30px;padding-left:10px;">
    <div class="span-7"><b>Name:</b> <%: Model.Employee.GetName() %></div>
    <div class="span-6"><b>Division:</b><%: Model.DivisionName %></div>
    <div class="span-6"><b>Department:</b> <%: Model.DepartmentName %></div></div>   
    <p>Attendance record for the year <%: Html.DropDownListFor(model => model.SelectedYearId, Model.YearList, new { onchange = "this.form.submit();" })%></p> 
    <div id="tabs">
     <ul>
      <li><a href="#tabs-1">Absence List</a></li>
     </ul>
     <div id="tabs-1">
            <input id="btnAddOneDayTab" type="button" onclick="addTab('Add Absence (1 day)','<%= Url.Action("AddAbsenceOneDay", "Employee")  %>')" value='Add Absence for 1 day' />
            <input id="btnAddDateRangeTab" type="button" onclick="addTab('Add Absence (date range)','<%= Url.Action("AddAbsenceDateRange", "Employee")  %>')" value='Add Absence for a range of dates' />
            <hr />
      <% Html.RenderPartial("ListAbsence", Model.ListEmployeeAbsenceThisYear); %>
     </div>
    </div>
    </fieldset>
        <% } %>

添加新日期部分视图...

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<SHP.Models.EmployeeOtherLeaf>" %>
<% var unique = DateTime.Now.Ticks.ToString(); %>
<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $('#frmAddAbsenceOneDay<%= unique %> #NullableOtherLeaveDate').datepicker({ dateFormat: 'dd-MM-yy' });
        $('#frmAddAbsenceOneDay<%= unique %> #MorningOnlyFlag').click(function () {
            $('#frmAddAbsenceOneDay<%= unique %> #AfternoonOnlyFlag').attr('checked', false);
        })
        $('#frmAddAbsenceOneDay<%= unique %> #AfternoonOnlyFlag').click(function () {
            $('#frmAddAbsenceOneDay<%= unique %> #MorningOnlyFlag').attr('checked', false);
        })
    });

    var options = {
        target: '#frmAddAbsenceOneDay<%= unique %>',
        success: RefreshList
    };

    $(document).ready(function () {
        $('#frmAddAbsenceOneDay<%= unique %>').ajaxForm(options);
    });

</script>

<div id="AddAbsenceOnDay<%= unique %>">

    <% using (Html.BeginForm("AddAbsenceOneDay", "Employee", FormMethod.Post,
           new { id = "frmAddAbsenceOneDay" + unique }))
       { %>
        <%: Html.ValidationSummary(true) %>
        <fieldset>
            <legend>Add an absence for a day or half day</legend>
            <table>
                <tr>
                    <td><%: Html.LabelFor(model => model.OtherLeaveId)%></td>
                    <td>
                <%: Html.DropDownListFor(model => model.OtherLeaveId, Model.SelectLeaveTypeList, "<--Select-->")%>
                <%: Html.ValidationMessageFor(model => model.OtherLeaveId)%>                    
                    </td>
                </tr>
                <tr>
                    <td>
                <%: Html.LabelFor(model => model.NullableOtherLeaveDate)%>                    
                    </td>
                    <td>
                <%: Html.EditorFor(model => model.NullableOtherLeaveDate)%>
                <%: Html.ValidationMessageFor(model => model.NullableOtherLeaveDate)%>
                <%if (ViewData["ErrorDateMessage"] != null && ViewData["ErrorDateMessage"].ToString().Length > 0)
                  { %>   
                                   <p class="error">
                   At <% Response.Write(DateTime.Now.ToString("T")); %>. <%: ViewData["ErrorDateMessage"]%>.
                </p>
                <%} %>                 
                    </td>
                </tr>
                <tr>
                    <td>
                <%: Html.LabelFor(model => model.MorningOnlyFlag)%>
                    </td>
                    <td>
                <%: Html.CheckBoxFor(model => model.MorningOnlyFlag)%>
                <%: Html.ValidationMessageFor(model => model.MorningOnlyFlag)%>                        
                    </td>
                </tr>
                <tr>
                    <td>
                <%: Html.LabelFor(model => model.AfternoonOnlyFlag)%>
                    </td>
                    <td>
                <%: Html.CheckBoxFor(model => model.AfternoonOnlyFlag)%>
                <%: Html.ValidationMessageFor(model => model.AfternoonOnlyFlag)%>                     
                    </td>
                </tr>
            </table>

            <p>
                <span style="padding-right:10px;"><input type="submit" value="Create" /></span><input type="button" value="Close" onclick="closeTab()" />
            </p>
        </fieldset>

    <% } %>
    </div>

您可以从Firebug

中查看以下HTML中的日期ID

<div id="main">

    <div id="adminAccounts">
    <table>
        <tbody><tr>
            <td> 

<div style="padding-top: 15px;">
    // Menu removed
</div>
</td>
            <td>
    <script type="text/javascript">
        $(function () {
        $('#tabs').tabs(
            { cache: true },
            {
                ajaxOptions: {
                    cache: false,
                    error: function (xhr, status, index, anchor) {
                        $(anchor.hash).html("Couldn't load this tab.");
                    },
                    data: {},
                    success: function (data, textStatus) { }
                },
                add: function (event, ui) {
                    //select the new tab
                    $('#tabs').tabs('select', '#' + ui.panel.id);
                }
            });
        });

        function addTab(title, uri) {
            var newTab = $("#tabs").tabs("add", uri, title);
        }

        function closeTab() {
            var index = getSelectedTabIndex();
            $("#tabs").tabs("remove", index)
        }

        function getSelectedTabIndex() {
            return $("#tabs").tabs('option', 'selected');
        }

        function RefreshList() {
            $('#frmAbsenceList').submit();
        }
    </script>
    <form method="post" action="/Employee/AbsenceForEmployee?employeeId=1"><input type="hidden" value="8yGn2w+fgqSRsho/d+7FMnPWBtTbu96X4u1t/Jf6+4nDSNJHOPeq7IT9CedAjrZIAK/DgbNX6idtTd94XUBM5w==" name="__RequestVerificationToken">
        <fieldset>
        <legend>Select an employee to edit absence record</legend>
        <div style="padding-bottom: 30px; padding-left: 10px;">
    <div class="span-7"><b>Name:</b> xaviar  caviar</div>
    <div class="span-6"><b>Division:</b>ICT</div>
    <div class="span-6"><b>Department:</b> ICT</div></div>   
    <p>Absence Leave record for the year <select onchange="this.form.submit();" name="SelectedYearId" id="SelectedYearId"><option value="2" selected="selected">2010/11</option>
</select></p> 
    <div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
        <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
            <li class="ui-state-default ui-corner-top"><a href="#tabs-1">Absence List</a></li>
        <li class="ui-state-default ui-corner-top"><a href="#ui-tabs-2"><span>Add Absence (1 day)</span></a></li><li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#ui-tabs-4"><span>Add Absence (1 day)</span></a></li></ul>
        <div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
            <input type="button" value="Add Absence for 1 day" onclick="addTab('Add Absence (1 day)','/Employee/AddAbsenceOneDay')" id="btnAddOneDayTab">
            <input type="button" value="Add Absence for a range of dates" onclick="addTab('Add Absence (date range)','/Employee/AddAbsenceDateRange')" id="btnAddDateRangeTab">
            <hr>

<script type="text/javascript">

    var options = {
        target: '#AbsenceList'
    };

    $(document).ready(function() {
        $('#frmAbsenceList').ajaxForm(options);
    });

</script>
<div id="AbsenceList">
<table class="grid"><thead><tr><th class="sort_asc"><a href="/Employee/AbsenceForEmployee?Direction=Descending&amp;employeeId=1"></a></th><th><a href="/Employee/AbsenceForEmployee?Column=OtherLeaveName&amp;Direction=Ascending&amp;employeeId=1">Leave Type</a></th><th><a href="/Employee/AbsenceForEmployee?Column=MorningOnlyFlag&amp;Direction=Ascending&amp;employeeId=1">Morning Only</a></th><th><a href="/Employee/AbsenceForEmployee?Column=AfternoonOnlyFlag&amp;Direction=Ascending&amp;employeeId=1">Afternoon Only</a></th><th><a href="/Employee/AbsenceForEmployee?Column=DayAmount&amp;Direction=Ascending&amp;employeeId=1">Day Amount</a></th><th><a href="/Employee/AbsenceForEmployee?Column=OtherLeaveDate&amp;Direction=Ascending&amp;employeeId=1">Date</a></th></tr></thead><tbody><tr class="gridrow"><td><a href="/Employee/DeleteAbsence?_employeeOtherLeaveId=60">Delete</a></td><td>Sickness</td><td>False</td><td>False</td><td>1</td><td>04/11/2010</td></tr><tr class="gridrow_alternate"><td><a href="/Employee/DeleteAbsence?_employeeOtherLeaveId=51">Delete</a></td><td>Unpaid Sickness</td><td>False</td><td>False</td><td>1</td><td>08/11/2010</td></tr><tr class="gridrow"><td><a href="/Employee/DeleteAbsence?_employeeOtherLeaveId=54">Delete</a></td><td>Unpaid Compassionate</td><td>False</td><td>False</td><td>1</td><td>09/11/2010</td></tr><tr class="gridrow_alternate"><td><a href="/Employee/DeleteAbsence?_employeeOtherLeaveId=45">Delete</a></td><td>Compassionate</td><td>False</td><td>False</td><td>1</td><td>10/11/2010</td></tr><tr class="gridrow"><td><a href="/Employee/DeleteAbsence?_employeeOtherLeaveId=43">Delete</a></td><td>Compassionate</td><td>False</td><td>False</td><td>1</td><td>15/11/2010</td></tr><tr class="gridrow_alternate"><td><a href="/Employee/DeleteAbsence?_employeeOtherLeaveId=55">Delete</a></td><td>Unpaid Sickness</td><td>False</td><td>False</td><td>1</td><td>16/11/2010</td></tr><tr class="gridrow"><td><a href="/Employee/DeleteAbsence?_employeeOtherLeaveId=56">Delete</a></td><td>Compassionate</td><td>False</td><td>False</td><td>1</td><td>17/11/2010</td></tr><tr class="gridrow_alternate"><td><a href="/Employee/DeleteAbsence?_employeeOtherLeaveId=44">Delete</a></td><td>Compassionate</td><td>False</td><td>False</td><td>1</td><td>22/11/2010</td></tr><tr class="gridrow"><td><a href="/Employee/DeleteAbsence?_employeeOtherLeaveId=37">Delete</a></td><td>Unpaid Sickness</td><td>False</td><td>False</td><td>1</td><td>24/11/2010</td></tr><tr class="gridrow_alternate"><td><a href="/Employee/DeleteAbsence?_employeeOtherLeaveId=36">Delete</a></td><td>Sickness</td><td>False</td><td>False</td><td>1</td><td>25/11/2010</td></tr><tr class="gridrow"><td><a href="/Employee/DeleteAbsence?_employeeOtherLeaveId=48">Delete</a></td><td>Unpaid Sickness</td><td>False</td><td>False</td><td>1</td><td>26/11/2010</td></tr><tr class="gridrow_alternate"><td><a href="/Employee/DeleteAbsence?_employeeOtherLeaveId=38">Delete</a></td><td>Unpaid Sickness</td><td>False</td><td>False</td><td>1</td><td>29/11/2010</td></tr><tr class="gridrow"><td><a href="/Employee/DeleteAbsence?_employeeOtherLeaveId=5">Delete</a></td><td>Compassionate</td><td>False</td><td>False</td><td>1</td><td>30/11/2010</td></tr><tr class="gridrow_alternate"><td><a href="/Employee/DeleteAbsence?_employeeOtherLeaveId=46">Delete</a></td><td>Unpaid Sickness</td><td>False</td><td>False</td><td>1</td><td>13/12/2010</td></tr><tr class="gridrow"><td><a href="/Employee/DeleteAbsence?_employeeOtherLeaveId=61">Delete</a></td><td>Compassionate</td><td>False</td><td>False</td><td>1</td><td>26/12/2010</td></tr></tbody></table>
        <p></p><div class="pagination"><span class="paginationLeft">Showing 1 - 15 of 21 </span><span class="paginationRight">first | prev | <a href="/Employee/AbsenceForEmployee?page=2&amp;employeeId=1">next</a> | <a href="/Employee/AbsenceForEmployee?page=2&amp;employeeId=1">last</a></span></div>

</div>



        </div><div id="ui-tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">


<div id="AddAbsenceOnDay634255177533718544">

    <form method="post" id="frmAddAbsenceOneDay634255177533718544" action="/Employee/AddAbsenceOneDay">
        <fieldset>
            <legend>Add an absence for a day or half day</legend>
            <table>
                <tbody><tr>
                    <td><label for="OtherLeaveId">Leave Type</label></td>
                    <td>
                <select name="OtherLeaveId" id="OtherLeaveId"><option value="">&lt;--Select--&gt;</option>
<option value="1">Sickness</option>
<option value="2">Unpaid Sickness</option>
<option value="6">Compassionate</option>
<option value="7">Unpaid Compassionate</option>
<option value="8">Unauthorised</option>
<option value="9">Unpaid Unauthorised</option>
<option value="10">Other</option>
<option value="11">Unpaid Other</option>
</select>

                    </td>
                </tr>
                <tr>
                    <td>
                <label for="NullableOtherLeaveDate">Date</label>                    
                    </td>
                    <td>
                <input type="text" value="" name="NullableOtherLeaveDate" id="NullableOtherLeaveDate" class="datePicker hasDatepicker">





                    </td>
                </tr>
                <tr>
                    <td>
                <label for="MorningOnlyFlag">Morning Only</label>
                    </td>
                    <td>
                <input type="checkbox" value="true" name="MorningOnlyFlag" id="MorningOnlyFlag"><input type="hidden" value="false" name="MorningOnlyFlag">

                    </td>
                </tr>
                <tr>
                    <td>
                <label for="AfternoonOnlyFlag">Afternoon Only</label>
                    </td>
                    <td>
                <input type="checkbox" value="true" name="AfternoonOnlyFlag" id="AfternoonOnlyFlag"><input type="hidden" value="false" name="AfternoonOnlyFlag">

                    </td>
                </tr>
            </tbody></table>

            <p>
                <span style="padding-right: 10px;"><input type="submit" value="Create"></span><input type="button" onclick="closeTab()" value="Close">
            </p>
        </fieldset>

    </form>
    </div>

</div><div id="ui-tabs-4" class="ui-tabs-panel ui-widget-content ui-corner-bottom">


<div id="AddAbsenceOnDay634255177583860349">

    <form method="post" id="frmAddAbsenceOneDay634255177583860349" action="/Employee/AddAbsenceOneDay">
        <fieldset>
            <legend>Add an absence for a day or half day</legend>
            <table>
                <tbody><tr>
                    <td><label for="OtherLeaveId">Leave Type</label></td>
                    <td>
                <select name="OtherLeaveId" id="OtherLeaveId"><option value="">&lt;--Select--&gt;</option>
<option value="1">Sickness</option>
<option value="2">Unpaid Sickness</option>
<option value="6">Compassionate</option>
<option value="7">Unpaid Compassionate</option>
<option value="8">Unauthorised</option>
<option value="9">Unpaid Unauthorised</option>
<option value="10">Other</option>
<option value="11">Unpaid Other</option>
</select>

                    </td>
                </tr>
                <tr>
                    <td>
                <label for="NullableOtherLeaveDate">Date</label>                    
                    </td>
                    <td>
                <input type="text" value="" name="NullableOtherLeaveDate" id="NullableOtherLeaveDate" class="datePicker hasDatepicker">





                    </td>
                </tr>
                <tr>
                    <td>
                <label for="MorningOnlyFlag">Morning Only</label>
                    </td>
                    <td>
                <input type="checkbox" value="true" name="MorningOnlyFlag" id="MorningOnlyFlag"><input type="hidden" value="false" name="MorningOnlyFlag">

                    </td>
                </tr>
                <tr>
                    <td>
                <label for="AfternoonOnlyFlag">Afternoon Only</label>
                    </td>
                    <td>
                <input type="checkbox" value="true" name="AfternoonOnlyFlag" id="AfternoonOnlyFlag"><input type="hidden" value="false" name="AfternoonOnlyFlag">

                    </td>
                </tr>
            </tbody></table>

            <p>
                <span style="padding-right: 10px;"><input type="submit" value="Create"></span><input type="button" onclick="closeTab()" value="Close">
            </p>
        </fieldset>

    </form>
    </div>

</div>
    <div id="ui-tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div><div id="ui-tabs-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div></div>
    </fieldset>
        </form></td>
        </tr>
    </tbody></table></div>

            <div id="footer">
            </div>
        </div>

如果你有这个（！），我被要求控制器，所以在这里。

[Authorize(Roles = "Administrator, AdminAccounts, ManagerAccounts")]
public ActionResult AddAbsenceOneDay()
{
    return View(new EmployeeOtherLeaf());
}

[HttpPost]
[Authorize(Roles = "Administrator, AdminAccounts, ManagerAccounts")]
public ActionResult AddAbsenceOneDay(EmployeeOtherLeaf _absence)
{
    if (ModelState.IsValid)
    {
        _absence.EmployeeId = SessionObjects.EmployeeId; 
        _absence.OtherLeaveDate = _absence.NullableOtherLeaveDate.GetValueOrDefault(DateTime.Today);
        Tuple<bool, string> errorInfo = _absence.IsDateValid();
        if (errorInfo.Item1 == true)
        {
            _absence.AddAndSave();
            ViewData["SuccessMessage"] = "Successfully Added.";
            return View("EditAbsenceOneDay", _absence);
        }
        else
        {
            ViewData["ErrorDateMessage"] = errorInfo.Item2;
            return View(_absence);
        }
    }
    else
    {
        return View(_absence);
    }
}

Answer 1

问题似乎是DOM只有一个NullableOtherLeaveDate条目。这似乎是合乎逻辑的，因为使用了ID。您还可以将哈希添加到ID中。如果您需要将该ID与任何jQuery匹配，您可以使用如下部分选择器：

$('input[id*=NullableOtherLeaveDate]')

有关详情，请参阅jQuery Partial Selectors。现在模式绑定器将如何绑定我不确定但你可以在C＃中实现部分匹配没有问题。如果您需要任何帮助，请发布相关的行动代码。

Answer 2

这个问题的答案建议使用编辑器模板而不是部分来解决问题。

MVC - fields in a partial View need a Unique Id. How do you do this?

当然，这不适用于所有情况，只有编辑器。

<强>更新

还有另一种简单的方法。 ViewData有一个很好的属性，你可以使用它设置一个前缀，使部分唯一，然后这个ViewDataDictonary可以传递给部分。

 var  dataDictionary = new ViewDataDictionary<PersonModel>(Model.Persons.First);
 dataDictionary.TemplateInfo.HtmlFieldPrefix = "Persons.First";

有关详细信息，请参阅以下链接：
- http://forums.asp.net/t/1627585.aspx/1
- http://forums.asp.net/t/1624152.aspx

请注意Html.Partial()的重载：

Partial(HtmlHelper, String, Object, ViewDataDictionary)

http://msdn.microsoft.com/en-us/library/ee407417.aspx

MVC;使用制表符时如何避免ID名称冲突？

添加新日期部分视图...

2 个答案: