如何根据下拉列表中的值更改页面中的某些字段

Question

我对 C# 和 ASP.NET 还很陌生。我正在处理现有代码。这是一个事件创建页面，其中包含一个下拉菜单，用户可以在其中选择他想要创建的事件类型 (type1, type2 and both) 。然后他可以为该特定类型设置事件开始日期和结束日期、时间段和容量。

最初只有 type1 和 type2 事件类型。 Now when the new type (both) is selected I want the user to select timeslot/ capacity for both the event types for the same start date and end date

选择事件类型的代码

<div class="editor-label">
<%= Html.RequiredLabelFor(model => model.event_type)%>
</div>
<div class="editor-field">
    <%= Html.DropDownListFor(model => model.event_type, new SelectListItem[] {
            new SelectListItem {Value = "", Text="Select..."},
            new SelectListItem {Value = "type1", Text="Type1"},                        
            new SelectListItem {Value = "type2", Text="Type2"},
            new SelectListItem {Value = "both", Text="Both"}},
        new Dictionary<string, object> { { "class", "dropdown entryfield" } })%>
</div>

设置时隙和容量的代码

<div id="date_interface_template_container" style="display: none">
            <div class="date_interface">
                <div class="inner">
                    <div class="row"><div class="date_label"></div></div>
                    <div class="row"><label for="start_time">First appt starts:</label> <input id="start_time" type="text" class="time" /></div>
                    <div class="row"><label for="end_time">Last appt starts:</label> <input id="end_time" type="text" class="time" /></div>
                    <div class="row"><label for="appt_length">Appt length (min):</label> <input id="appt_length" type="text" class="number" />
                    <input id="num_timeslots" type="hidden" /></div>
                    <div class="row"><label for="timeslot_capacity">Appt capacity:</label> <input id="timeslot_capacity" type="text" class="number" /><br />
                    (Number of people that can participate in each appointment period.)
                    <div class="row"><div style="float: left"><input type="checkbox" id="set_individual_capacity" disabled="disabled"/></div>
                    <label for="set_individual_capacity" style="float: left; width: 200px">Set capacity for each individual appointment</label></div>
                    <div id="individual_appointments" style="clear: both"></div>
                </div>
                </div>
            </div>
          </div>
          <div id="time_config_error" style="color: #cc0000"></div>
          <script>              var reg_count = 0;</script>
           <div id="date_interfaces_container" style="margin-bottom: 10px">
           <div id="date_interfaces" style="display: block">
 <% 
    int ed_counter = 0;
    string startDateStr = Request["time_start"];
    DateTime startDate = new DateTime();
    if (DateTime.TryParse(startDateStr, out startDate))
    {

        while (Request["start_time_" + ed_counter.ToString()] != null)
        {
            DateTime apptStartDate = startDate.AddDays(ed_counter);
            apptStartDate = DateTime.Parse(String.Format("{0} {1}", apptStartDate.ToString("M/dd/yyyy"), Request["start_time_" + ed_counter.ToString()]));
            string dayKey = apptStartDate.ToString("yyyyMMdd");
            string apptLengthStr = Request["appt_length_" + ed_counter.ToString()];
           %>
            <div class="date_interface" key="<%= dayKey %>">
                <div class="inner">
                    <div class="row"><div class="date_label"></div></div>
                    <div class="row"><label for="start_time_<%= ed_counter %>">First appt starts:</label> <input id="start_time_<%= ed_counter %>" name="start_time_<%= ed_counter %>" type="text" class="time" value="<%= Request["start_time_" + ed_counter.ToString()] %>"/></div>
                    <div class="row"><label for="end_time_<%= ed_counter %>">Last appt starts:</label> <input id="end_time_<%= ed_counter %>" name="end_time_<%= ed_counter %>" type="text" class="time" value="<%= Request["end_time_" + ed_counter.ToString()] %>"/></div>
                    <div class="row"><label for="appt_length_<%= ed_counter %>">Appt length (min):</label> <input id="appt_length_<%= ed_counter %>" name="appt_length_<%= ed_counter %>" type="text" class="number" value="<%= apptLengthStr %>"/>
                    <input type="hidden" id="num_timeslots_<%= ed_counter %>" name="num_timeslots_<%= ed_counter %>" value="<%= Request["num_timeslots_" + ed_counter.ToString()] %>" /></div>
                    <div class="row"><label for="timeslot_capacity_<%= ed_counter %>">Appt capacity:</label> <input id="timeslot_capacity_<%= ed_counter %>" name="timeslot_capacity_<%= ed_counter %>" type="text" class="number" value="<%= Request["timeslot_capacity_" + ed_counter.ToString()] %>" /></div>
                    (Number of people that can participate in each appointment period.)
                    <div class="row"><div style="float: left"><input type="checkbox" id="set_individual_capacity_<%= ed_counter %>" name="set_individual_capacity_<%= ed_counter %>" <%= ((Request["set_individual_capacity_" + ed_counter.ToString()] != null)?"checked=\"true\"":String.Empty) %>/></div>
                    <label for="set_individual_capacity_<%= ed_counter %>" style="float: left; width: 200px">Set capacity for each individual appointment</label></div>
                    <div id="individual_appointments_<%= ed_counter %>" style="clear: both">
                    <%
    string apptId = "indiv_0_timeslot_capacity_" + ed_counter.ToString();
    int indivCounter = 0;
    int apptLength = 0;
    if (int.TryParse(apptLengthStr, out apptLength))
    {
        string apptCapacity = Request[apptId];
        while (apptCapacity != null && apptCapacity.Length > 0)
        {
            DateTime apptTime = apptStartDate.AddMinutes(indivCounter * apptLength);
            DateTime apptEndTime = apptTime.AddMinutes(apptLength);
            string apptKey = apptTime.ToString("hhmmtt").ToUpper() + apptEndTime.ToString("hhmmtt").ToUpper();
            Response.Write("<div class=\"row\" key=\"" + apptKey + "\"><input type=\"hidden\" id=\"id_" + indivCounter + "_" + ed_counter + "\" name=\"id_" + indivCounter + "_" + ed_counter + "\" value=\"\" /><label for=\"" + apptId + "\" style=\"white-space: nowrap; font-size: 0.9em\">" + apptTime.ToShortTimeString() + "-" + apptEndTime.ToShortTimeString() + "</label><input id=\"" + apptId + "\" name=\"" + apptId + "\" type=\"text\" class=\"number\" value=\"" + apptCapacity + "\" /></div>");
            apptId = "indiv_" + (++indivCounter).ToString() + "_timeslot_capacity_" + ed_counter.ToString();
            apptCapacity = Request[apptId];
        }
    }
                     %>
                    </div>
                </div>
            </div>
            <%
    ed_counter++;
        }
    }%>

选择类型1或类型2时。

现在，当两者都被选中时，我想显示相同的开始日期和结束日期两次，以便用户可以分别为这两种类型设置时间段。关于如何做到这一点的任何想法。

Answer 1

您可以确保要在给定条件下显示的控件已经在页面上。但是，您将它们隐藏在 CSS 中（显示：无；）。

然后，在满足条件时使用 javascript 显示这些控件。

实际上，您可以使用 jQuery change() 事件 (documentation) 在下拉列表中处理此问题（我相信您是在谈论事件类型的下拉列表？）。

$("#the-dropdown").change( function() {
  // display the part you want to show
  $('#the-hidden-part').show();
});

对您的问题的评论：它们是正确的，请使用您的控制器来准备模型。在您的视图中使用它。