Как мне поддерживать выпадающие списки на странице с множеством динамически именуемых выпадающих списков в asp.net mvc 2? - PullRequest
1 голос
/ 05 апреля 2011

Я прочитал ссылки, указанные при создании этого вопроса.Я думаю, что я пытаюсь сделать немного отличается.Я использую ASP.NET MVC 2.

Извинения за входящую стену текста.Самый короткий способ, которым я могу подумать, чтобы задать этот вопрос, находится сразу ниже.После этого я перехожу к большей части вопроса «почему» и «как» вопроса.

[ОЧЕНЬ БЫСТРЫЙ ПУНКТ ВОПРОСА] Как вернуть словарь как результат JSON от действия и какой jquery / javascript можно использоватьв событии onLoad раскрывающихся списков найти этот JSON для именованного элемента и, если он найден, вернуть соответствующее значение и предварительно выбрать это значение в раскрывающемся списке?

[ПРЕДПОСЫЛКИ] Яработа над созданием проекта для работы, где пользователь выбирает вариант из 2 начальных выпадающих.Первая капля содержит список имен файлов PDF.Второй выпадающий список содержит список запросов к базе данных, связанных с псевдонимом (они не видят sql ... они видят имя соответствующей хранимой процедуры или представления).После того, как пользователь сделал эти 2 выбора, страница перезагружается со многими другими раскрывающимися списками внизу в 2 столбцах.

В левом столбце находится список раскрывающихся списков, которые содержат одинаковое содержание: список иментекстовые поля, содержащиеся в выбранном PDF-файле (я использую программное обеспечение CeTe Dynamic PDF для обработки PDF-взаимодействия).В правом столбце будет список выпадающих, содержащих имена полей выбранного запроса.Оба столбца будут иметь одинаковое количество раскрывающихся списков;общее количество будет количеством полей в PDF.

[ПРОБЛЕМА] Я могу загрузить страницу в порядке и заполнить раскрывающиеся списки с их соответствующими данными.Проблема возникает после нажатия кнопки отправки и публикации данных.Поскольку раскрывающиеся списки создаются динамически, я использую соглашение об именах, чтобы связать, какие выборки принадлежат полям PDF, а какие - полям БД.На стороне действия я перебираю FormCollection и создаю словарь, в котором ключ - это имя отправленного элемента, а значение - это значение отправленного элемента.Я добавляю записи в словарь только для элементов, которые имеют ненулевое, непустое значение.

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

Я опубликую код, который имеет смысл, ниже.У меня есть еще одна идея, которую я не имею ни малейшего понятия о том, как это сделать, - поместить функцию в событие onLoad выпадающих списков, перейти к действию json и отправить сообщения с именем выпадающего списка, вызывающего действие / скрипт.(что бы это ни было).Если представленное имя существует в словаре, где я храню ранее представленные имена и значения из раскрывающихся списков, возвращается соответствующее значение, которое должно быть предварительно выбрано;в противном случае ничего не возвращается и ни одно из значений раскрывающегося списка не выбрано заранее.

Я не знаю много о JSON, но если бы я мог вернуть ранее опубликованный словарь имя / значение в качестве результата JSON на страницуЯ мог бы использовать jquery для анализа json и обработки предварительного выбора, где это необходимо, в раскрывающемся списке.

См. Мой текущий код ниже.Это можно эмулировать, просто создав данные-заглушки для списков SelectItemLists, если вам это интересно.В настоящее время проблема заключается в том, что независимо от того, какой элемент фамилии / значения находится в предварительно выбранном словаре, он выбирается для остальной части списка раскрывающихся списков.

Пример:

Выбранные значения:

A                   FirstName
B                   LastName
C                   SSN
<no selection>      <no selection>
<no selection>      <no selection>
<no selection>      <no selection>
<no selection>      <no selection>

Если приведено выше, результат будет следующим:

A                   FirstName
B                   LastName
C                   SSN
C                   SSN
C                   SSN
C                   SSN
C                   SSN

Текущий код:

           <% using (Html.BeginForm())  {  %>                 

   <%  
       List<SelectListItem> mainPdfFieldNames = (List<SelectListItem>)ViewData["PdfFieldNames"];
       List<SelectListItem> mainDbFieldNames = (List<SelectListItem>)ViewData["DbFieldNames"];
       Dictionary<String, String> fieldValue = (Dictionary<string, string>)ViewData["selectedFieldValues"] ?? new Dictionary<string, string>();

   %>

   <% for (int i = 0; i < mainPdfFieldNames.Count; i++)
{

        String pdfPreselectValue = string.Empty; 
        String dbPreselectValue = string.Empty;
        fieldValue.TryGetValue("PdfFieldNames" + i.ToString(), out pdfPreselectValue);
        fieldValue.TryGetValue("DbFieldNames" + i.ToString(), out dbPreselectValue);
        IDictionary<string, object> pdfHtmlAttrib = new Dictionary<string, object>();
        IDictionary<string, object> dbHtmlAttrib = new Dictionary<string, object>();
        List<SelectListItem> pdfFieldNames = mainPdfFieldNames;
        List<SelectListItem> dbFieldNames = mainDbFieldNames;
%>
       <%=  Html.Encode(" PDF Selected value: " + pdfPreselectValue )  %>
       <%=  Html.Encode(" DB Selected value: " + dbPreselectValue) %>
<%        
        if (!String.IsNullOrEmpty(pdfPreselectValue))
        {
            pdfFieldNames.Find(p => p.Value.Equals(pdfPreselectValue)).Selected = true;
            pdfHtmlAttrib.Add("selected", null);
        }

        if (!String.IsNullOrEmpty(dbPreselectValue))
        {
            dbFieldNames.Find(p => p.Value.Equals(dbPreselectValue)).Selected = true;
            dbHtmlAttrib.Add("selected", null);
        }
          %>

       Select PDF Field: <%=Html.DropDownList("PdfFieldNames" + i.ToString(), pdfFieldNames, "Select PDF Field", pdfHtmlAttrib)%>
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       Select Database Field: <%=Html.DropDownList("DbFieldNames" + i.ToString(), dbFieldNames, "Select Database Field", dbHtmlAttrib)%>
       <br />
   <%
      }%>

   <input type="submit" value="Submit" />

   <% } %>  

ОСНОВНОЕ РЕДАКТИРОВАНИЕ 1 Пропущено для создания комнаты для решения

Я решил пойти другим путем с этим.Я думаю, что это может быть более упрощенным в конце.После просмотра сообщений в действии я создаю строковую переменную из словаря, который ранее использовал.Эта строка помещается в ViewData и на странице скрытое поле.У меня есть функция JavaScript, которая захватывает это поле и анализирует его.Поле nameValue имеет формат «fieldname, fieldvalue; fieldname, fieldvalue; fieldname, fieldvalue».

Ниже выложен тестовый код.На самом деле это полная HTML-страница, которую я использую для разработки этого процесса постепенно.Моя единственная оставшаяся проблема - запуск кода после загрузки страницы.Этот код выберет все раскрывающиеся списки на странице, перебирает их и передает имя раскрывающегося списка созданной мной функции, которая обрабатывает предварительный выбор значения в раскрывающемся списке на основе его имени и наличия этого именив скрытом поле nameValue на странице.

Ответы [ 3 ]

0 голосов
/ 05 апреля 2011

Итак, проблема в том, что при сбое проверки вы хотите снова показать представление и сохранить предыдущие выборки, сделанные в динамических каскадных выборках?

Вместо того, чтобы пытаться повторно автоматизировать выбор / каскады на клиенте, почему бы не отобразить все выборки на сервере и не позволить ModelState обработать предыдущие выборки. Все, что вам нужно сделать, это убедиться, что на каждом уровне есть правильные варианты.

0 голосов
/ 08 апреля 2011

решена проблема

Я расширил этот пример html-страницы, чтобы лучше проиллюстрировать проблему.

Где-то выдается ошибка JavaScript, но я ее не нашелеще.Код по-прежнему работает, и правильные выпадающие списки предварительно выбираются на основе данных в скрытом поле postsFieldValues.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
    <title></title>
  </head>
  <body>
    <form>
      <input id="postedFieldValues" name="postedFieldValues" type="hidden"
      value=
      "PdfFieldNames0,f1-10;DbFieldNames0,LastName;PdfFieldNames1,f1-12;DbFieldNames1,LoanNumber;PdfFieldNames2,f1-15;DbFieldNames2,SSN;">
    </form>
    <p>
      Values stored in the postedFieldValues hidden field for this example
      are:<br>
      "PdfFieldNames0,f1-10;DbFieldNames0,LastName;PdfFieldNames1,f1-12;DbFieldNames1,LoanNumber;PdfFieldNames2,f1-15;DbFieldNames2,SSN;"
    </p><br>
    <script type="text/javascript" src=
    "http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</script><script type="text/javascript">
                if(typeof Jquery == 'undefined')
                                document.write(unescape("%3Cscript src ='jquery-1.4.4.js'" + "type='text/javascript'%3E%3C/script%3E"));


                        function PreselectValue(name) {

                                var values = $("[id=postedFieldValues]");
                                var ddl = $("[id="+name+"]");

                                //alert(values.val());
                                //alert(ddl.val());

                                if( values == null || values == '')
                                        return;   

                                var pairs = values.val().split(";");

                                for (var i = 0; i < pairs.length; i++) {
                                        //name is in index 0
                                        //value is in index 1
                                        var individualNameValuePair = pairs[i].split(",");
                                        if (name == individualNameValuePair[0]) {
                                                ddl.val(individualNameValuePair[1]);
                                        }        
                                }       
                        }

    </script>Select PDF Field: <select id="PdfFieldNames0" name=
    "PdfFieldNames0">
      <option value="">
        Select PDF Field
      </option>
      <option value="f1-1">
        f1-1
      </option>
      <option value="f1-10">
        f1-10
      </option>
      <option value="f1-11">
        f1-11
      </option>
      <option value="f1-12">
        f1-12
      </option>
      <option value="f1-13">
        f1-13
      </option>
      <option value="f1-14">
        f1-14
      </option>
      <option value="f1-15">
        f1-15
      </option>
      <option value="f1-16">
        f1-16
      </option>
    </select>           Select Database Field: <select id="DbFieldNames0" name=
    "DbFieldNames0">
      <option value="">
        Select Database Field
      </option>
      <option value="FirstName">
        FirstName
      </option>
      <option value="LastName">
        LastName
      </option>
      <option value="SSN">
        SSN
      </option>
      <option value="LoanNumber">
        LoanNumber
      </option>
    </select><br>
    Select PDF Field: <select id="PdfFieldNames1" name="PdfFieldNames1">
      <option value="">
        Select PDF Field
      </option>
      <option value="f1-1">
        f1-1
      </option>
      <option value="f1-10">
        f1-10
      </option>
      <option value="f1-11">
        f1-11
      </option>
      <option value="f1-12">
        f1-12
      </option>
      <option value="f1-13">
        f1-13
      </option>
      <option value="f1-14">
        f1-14
      </option>
      <option value="f1-15">
        f1-15
      </option>
      <option value="f1-16">
        f1-16
      </option>
    </select>           Select Database Field: <select id="DbFieldNames1" name=
    "DbFieldNames1">
      <option value="">
        Select Database Field
      </option>
      <option value="FirstName">
        FirstName
      </option>
      <option value="LastName">
        LastName
      </option>
      <option value="SSN">
        SSN
      </option>
      <option value="LoanNumber">
        LoanNumber
      </option>
    </select><br>
    Select PDF Field: <select id="PdfFieldNames2" name="PdfFieldNames2">
      <option value="">
        Select PDF Field
      </option>
      <option value="f1-1">
        f1-1
      </option>
      <option value="f1-10">
        f1-10
      </option>
      <option value="f1-11">
        f1-11
      </option>
      <option value="f1-12">
        f1-12
      </option>
      <option value="f1-13">
        f1-13
      </option>
      <option value="f1-14">
        f1-14
      </option>
      <option value="f1-15">
        f1-15
      </option>
      <option value="f1-16">
        f1-16
      </option>
    </select>           Select Database Field: <select id="DbFieldNames2" name=
    "DbFieldNames2">
      <option value="">
        Select Database Field
      </option>
      <option value="FirstName">
        FirstName
      </option>
      <option value="LastName">
        LastName
      </option>
      <option value="SSN">
        SSN
      </option>
      <option value="LoanNumber">
        LoanNumber
      </option>
    </select><br>
    Select PDF Field: <select id="PdfFieldNames3" name="PdfFieldNames3">
      <option value="">
        Select PDF Field
      </option>
      <option value="f1-1">
        f1-1
      </option>
      <option value="f1-10">
        f1-10
      </option>
      <option value="f1-11">
        f1-11
      </option>
      <option value="f1-12">
        f1-12
      </option>
      <option value="f1-13">
        f1-13
      </option>
      <option value="f1-14">
        f1-14
      </option>
      <option value="f1-15">
        f1-15
      </option>
      <option value="f1-16">
        f1-16
      </option>
    </select>           Select Database Field: <select id="DbFieldNames3" name=
    "DbFieldNames3">
      <option value="">
        Select Database Field
      </option>
      <option value="FirstName">
        FirstName
      </option>
      <option value="LastName">
        LastName
      </option>
      <option value="SSN">
        SSN
      </option>
      <option value="LoanNumber">
        LoanNumber
      </option>
    </select><br>
    Select PDF Field: <select id="PdfFieldNames4" name="PdfFieldNames4">
      <option value="">
        Select PDF Field
      </option>
      <option value="f1-1">
        f1-1
      </option>
      <option value="f1-10">
        f1-10
      </option>
      <option value="f1-11">
        f1-11
      </option>
      <option value="f1-12">
        f1-12
      </option>
      <option value="f1-13">
        f1-13
      </option>
      <option value="f1-14">
        f1-14
      </option>
      <option value="f1-15">
        f1-15
      </option>
      <option value="f1-16">
        f1-16
      </option>
    </select>           Select Database Field: <select id="DbFieldNames4" name=
    "DbFieldNames4">
      <option value="">
        Select Database Field
      </option>
      <option value="FirstName">
        FirstName
      </option>
      <option value="LastName">
        LastName
      </option>
      <option value="SSN">
        SSN
      </option>
      <option value="LoanNumber">
        LoanNumber
      </option>
    </select><br>
    Select PDF Field: <select id="PdfFieldNames5" name="PdfFieldNames5">
      <option value="">
        Select PDF Field
      </option>
      <option value="f1-1">
        f1-1
      </option>
      <option value="f1-10">
        f1-10
      </option>
      <option value="f1-11">
        f1-11
      </option>
      <option value="f1-12">
        f1-12
      </option>
      <option value="f1-13">
        f1-13
      </option>
      <option value="f1-14">
        f1-14
      </option>
      <option value="f1-15">
        f1-15
      </option>
      <option value="f1-16">
        f1-16
      </option>
    </select>           Select Database Field: <select id="DbFieldNames5" name=
    "DbFieldNames5">
      <option value="">
        Select Database Field
      </option>
      <option value="FirstName">
        FirstName
      </option>
      <option value="LastName">
        LastName
      </option>
      <option value="SSN">
        SSN
      </option>
      <option value="LoanNumber">
        LoanNumber
      </option>
    </select><br>
    Select PDF Field: <select id="PdfFieldNames6" name="PdfFieldNames6">
      <option value="">
        Select PDF Field
      </option>
      <option value="f1-1">
        f1-1
      </option>
      <option value="f1-10">
        f1-10
      </option>
      <option value="f1-11">
        f1-11
      </option>
      <option value="f1-12">
        f1-12
      </option>
      <option value="f1-13">
        f1-13
      </option>
      <option value="f1-14">
        f1-14
      </option>
      <option value="f1-15">
        f1-15
      </option>
      <option value="f1-16">
        f1-16
      </option>
    </select>           Select Database Field: <select id="DbFieldNames6" name=
    "DbFieldNames6">
      <option value="">
        Select Database Field
      </option>
      <option value="FirstName">
        FirstName
      </option>
      <option value="LastName">
        LastName
      </option>
      <option value="SSN">
        SSN
      </option>
      <option value="LoanNumber">
        LoanNumber
      </option>
    </select><br>
    Select PDF Field: <select id="PdfFieldNames7" name="PdfFieldNames7">
      <option value="">
        Select PDF Field
      </option>
      <option value="f1-1">
        f1-1
      </option>
      <option value="f1-10">
        f1-10
      </option>
      <option value="f1-11">
        f1-11
      </option>
      <option value="f1-12">
        f1-12
      </option>
      <option value="f1-13">
        f1-13
      </option>
      <option value="f1-14">
        f1-14
      </option>
      <option value="f1-15">
        f1-15
      </option>
      <option value="f1-16">
        f1-16
      </option>
    </select>           Select Database Field: <select id="DbFieldNames7" name=
    "DbFieldNames7">
      <option value="">
        Select Database Field
      </option>
      <option value="FirstName">
        FirstName
      </option>
      <option value="LastName">
        LastName
      </option>
      <option value="SSN">
        SSN
      </option>
      <option value="LoanNumber">
        LoanNumber
      </option>
    </select><br>
    <br>
    <form>
      PAGE HAS LOADED. <script type="text/javascript">
    $(document).ready(function () {
                        //alert('testing');
                        $('select').each(function(index) {
                                var id = $(this).attr('id');;
                                PreselectValue(id);
                        });
                        //alert('after iterate');
                });
      </script>
    </form>
  </body>
</html>
0 голосов
/ 05 апреля 2011

Исходя из вашего вопроса, это то, что я предполагаю, что вы ищете.

CONTROLLER

public class SelectListings
{
        public static SelectList Listing1(int key = 1)
        {
            var listings = new Dictionary<string, string>
                                 {
                                     {"Option 1", "_opt1"},
                                     {"Option 2", "_opt2"},
                                 };
            var list = new SelectList(listings, "Value", "Key", key != 1 ? key : key);

            return list;
        }
}
ActionResult PageBegin()
{
    ViewData["selectList1"] = SelectListings.Listing1();
    ViewData["selectList2"] = SelectListings.Listing2();    

    return View(ViewData);
}

 ActionResult PageSubmit(int listKey1, int listKey2)
    {
        ViewData["selectList1"] = SelectListings.Listing1(listKey1);
        ViewData["selectList2"] = SelectListings.Listing2(listKey2);    

        return View("PageBegin", ViewData);
    }

VIEW

<% var selectedList1 = (SelectList)ViewData["selectList1"];
   var selectedList2 = (SelectList)ViewData["selectList2"]; %>

<%= Html.DropDownList("selectList1", selectedList1)%>

<%= Html.DropDownList("selectList2", selectedList2)%>

<%! - включить оператор ifздесь, чтобы проверить, изменилось ли значение -%> Ваше выбранное значение для list1: <%= selectedList1.DataValueField %> Ваше выбранное значение для list2: <%= selectedList2.DataValueField %>

Написал это из головы, оно может не скомпилироватьсяв первый раз.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...