Как изменить определенные поля на страницах на основе значения из выпадающего

Question

Я довольно новичок в C # и ASP.NET.Я работаю над существующим кодом.Это страница создания события, которая содержит раскрывающийся список, в котором пользователь может выбрать тип события, которое он хочет создать (type1, type2 и оба) .Затем он может установить дату начала и окончания события, временные интервалы и емкость для этого конкретного типа.

Изначально существовали только типы событий type1 и type2.Теперь, когда выбран новый тип (оба) , я хочу, чтобы пользователь выбрал временной интервал / емкость для обоих типов событий для одной и той же даты начала и окончания

Код для выборатип события

<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 (display: none;).

Затем используйте javascript для отображения этих элементов управления, когда условие выполнено.

Практически, вы можете использовать событие jQuery change() ( документация ) для обработки этого в раскрывающихся списках (я полагаю, вы говорите о раскрывающихся списках для типов событий?).

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

И замечания к вашему вопросу: они правильные, используйте ваш контроллер для подготовки модели. Используйте это в своем представлении.