Заполнение DropDownList из другого DropDownList с использованием AJAX 3.5

Я использую asp.net 3.5 с набором инструментов ajax.

Проблема: у меня есть пользовательский элемент управления с двумя выпадающими списками на панели обновлений. Первый DDL имеет свойство AutoPostBack="true", и после выбора заполняется второй DDL. Проблема заключается в том, что в первый раз после начальной загрузки страницы выбирается DDL, вся страница перезагружается. При втором выборе элемента в первом DDL все работает, как и ожидалось.

Я попытался добавить триггеры в UpdatePanel, но это не меняет результат.

Любая помощь приветствуется.

.ascx:

<asp:UpdatePanel ID="popDates" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <p>
                    <asp:DropDownList ID="ddlDivision" runat="server" AutoPostBack="true" style="width:300px"></asp:DropDownList>
                    <asp:RequiredFieldValidator ID="requiredDivision" runat="server" 
                                ControlToValidate="ddlDivision" ErrorMessage="* Please specify a value" 
                                ValidationGroup="valGroupGetDates"
                                InitialValue="Select..." SetFocusOnError="True" CssClass="formValidation">
                    </asp:RequiredFieldValidator>
                </p>
                <p>
                    <asp:DropDownList ID="ddlKMA" runat="server" Enabled="False" AutoPostBack="true" style="width:300px"></asp:DropDownList>
                    <asp:RequiredFieldValidator ID="requiredKMA" runat="server" 
                                ControlToValidate="ddlKMA" ErrorMessage="* Please specify a value" 
                                ValidationGroup="valGroupGetDates"
                                InitialValue="Select..." SetFocusOnError="True" CssClass="formValidation">
                    </asp:RequiredFieldValidator>
                </p>
            </ContentTemplate>
            </asp:UpdatePanel>

ascx.cs:

protected void Page_Load(object sender, EventArgs e)
        {
            if (Page.IsAsync || Page.IsPostBack)
            {
                String target = Page.Request.Params.Get("__EVENTTARGET");
                //Division Session                
                Session["divisionDropDown"] = ddlDivision.SelectedItem.Value;
                populateDivisionDDL();
                ddlDivision.SelectedValue = Session["divisionDropDown"].ToString();

                if (target != "" && target != null)
                {
                    if (target.Contains("ddlDivision"))
                    {
                        populateKMA(ddlDivision.SelectedValue);
                    }
             }
            }

            if (!Page.IsPostBack)
            {
                populateDivisionDDL();
                ddlKMA.Items.Clear();
                ddlKMA.Items.Add(default_item());
            }
        }
        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);
    }

aspx:

<body>
    <form id="ViewSPANodeDatesForm" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManagerDates" runat="server"></asp:ScriptManager>
        <viewControl:SPANodeDates ID="SPANodeDates1" runat="server"></viewControl:SPANodeDates>
    </div>
    </form>
</body>

Примечание. До добавления элементов управления ajax все работало, как и ожидалось.

Спасибо!


person Andee    schedule 06.04.2011    source источник
comment
Это может быть хорошее время, чтобы понять, что панель обновлений плохая. Он рекламируется как AJAX, но не AJAX. Вы по-прежнему получаете обновление страницы и выполняете все HTTP-запросы. Я настоятельно рекомендую использовать AJAX и, возможно, AJAX API jQuery.   -  person The Muffin Man    schedule 07.04.2011
comment
@Nick - Извините, я новичок в этом (очевидно). Что вы имеете в виду, что панель обновлений не AJAX?   -  person Andee    schedule 07.04.2011
comment
Я опубликую ответ на этот комментарий, чтобы у меня было больше места (я не буду отвечать на ваш первоначальный вопрос, поэтому вы можете принять чей-то ответ).   -  person The Muffin Man    schedule 07.04.2011


Ответы (3)


здесь у вас есть три примера каскадного выпадающего списка с использованием контроллера и веб-сервиса.

http://stephenwalther.com/blog/archive/2008/09/07/asp-net-mvc-tip-41-creating-cascading-dropdown-lists-with-ajax.aspx

Я могу вставить всю информацию, но я думаю, что ссылка будет лучше. даже Стивен предлагает пример кода. бргдс.

person s_h    schedule 06.04.2011

В ответ на комментарий Анди: What do you mean the update panel isn't AJAX?

Сначала поговорим о том, что происходит на обычной веб-странице. Нет AJAX, нет панелей обновлений.

Страница извлекается с сервера и любой внешний javascript, внешний css, изображения и т. д. Каждый из них является HTTP-запросом. Таким образом, к тому времени, когда вы закончите, у вас может быть 5,10,20+ http-запросов. Цель состоит в том, чтобы их было как можно меньше, так как вы можете иметь только два запроса одновременно (есть способы обойти это).

Проблема в том, что если мы хотим изменить небольшое количество данных на странице, требующей от нас получения их с сервера? Было бы сумасшествием возвращать страницу обратно и получать все те же неизмененные данные, а также обрабатывать все HTTP-запросы. В этом прелесть AJAX, мы можем использовать javascript, чтобы общаться с сервером и возвращать нам некоторые данные. Он будет использовать только один HTTP-запрос, и мы получим только данные. Другими словами, это намного быстрее, потому что это всего один HTTP-запрос и небольшой размер файла. Кроме того, страница не мерцает, потому что мы не запрашивали новую страницу с сервера.

Панель обновления, с другой стороны, создает впечатление AJAX (без мерцания страницы), но она по-прежнему выполняет обратную публикацию, и вы берете на себя все ненужные HTTP-запросы. Это означает, что, хотя вы не получаете мерцание страницы, вы все равно получаете отставание интерфейса, потому что получение данных занимает больше времени, чем настоящий вызов AJAX.

person The Muffin Man    schedule 07.04.2011
comment
Спасибо за объяснение. Я буду изучать настоящие методы AJAX в будущем. - person Andee; 07.04.2011

Я ценю все ответы, и я уверен, что ваши решения намного элегантнее, быстрее и на самом деле правильные (все еще в процессе работы по вашей ссылке @sebastian_h). Тем временем, сохраняя AutoPostBack="true" в первом DDL и добавляя

<Triggers>
   <asp:AsyncPostBackTrigger ControlID="ddlDivision" EventName="SelectedIndexChanged" />
</Triggers>

чтобы панель обновлений начала работать. Должно быть, я изменил какие-то другие настройки в моей последней попытке добавить цель.

Еще раз спасибо!

person Andee    schedule 07.04.2011