如何在asp.net mvc 2中具有许多动态命名的下拉列表的页面上维护下拉选择?

时间:2011-04-05 13:43:31

标签: jquery asp.net-mvc asp.net-mvc-2 drop-down-menu

我在阅读创建此问题时列出的链接。我想我想做的事情略有不同。我正在使用ASP.NET MVC 2.

为传入的文字墙道歉。我能想到的最简单的问题就是下面的问题。之后我会详细介绍问题的原因和方法。

[非常快速的问题] 如何从操作中返回字典作为JSON结果,以及在下拉列表的onLoad事件中可以使用什么jquery / javascript来搜索该命名元素的JSON,如果找到,则返回相应的值并预 - 在下拉列表中选择该值?

[背景技术] 我正在创建一个工作项目,用户从2个初始下拉列表中选择一个选项。第一个drop包含pdf文件名列表。第二个下拉列表包含与别名相关联的数据库查询列表(它们看不到sql ......它们看到相应存储过程或视图的名称)。在用户进行了这两个选择之后,页面将在2列中重新加载下面的更多下拉列表。

左栏是包含相同内容的下拉列表:所选pdf中包含的文本字段名称列表(我使用CeTe软件的动态PDF来处理pdf交互)。右侧列将是包含所选查询的字段名称的下拉列表。两列都有相同数量的下拉;总数将是pdf上的字段数。

[问题] 我可以加载页面并使用各自的数据填充下拉列表。单击提交按钮并发布数据后出现问题。由于下拉列表是动态创建的,因此我使用命名约定来链接哪些选择属于pdf字段并且属于db字段。在操作方面,我迭代FormCollection并创建一个字典,其中键是发布元素的名称,值是提交的元素的值。我只在词典中为具有非空,非空值的元素添加条目。

到目前为止,我已经完成了所有这些工作。您可能已经猜到,我的问题是在页面从Action返回视图时保持选择。我有一些非常残缺的代码很接近,但可能是一个远离良好解决方案的世界。

我将在下面发布我认为合理的代码。我有另一个想法,我不知道如何做的是将一个函数放在下拉列表的onLoad事件中并转到json操作并发送帖子名称下拉调用action / script (不管这变成了什么)。如果提交的名称存在于字典中,我将存储以前提交的名称&下拉列表的值,返回应该预先选择的相应值;否则不返回任何内容,并且没有预先选择下拉值。

我对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" />

   <% } %>  

MAJOR EDIT 1 为解决方案提供服务

我决定采用不同的方式。我认为最终可能会更加简化。在视图发布到操作后,我从之前使用的Dictionary中创建了一个字符串变量。此字符串放在ViewData中,页面上是隐藏字段。我有一个javascript函数来抓取这个字段并解析它。 nameValue字段的格式为“fieldname,fieldvalue; fieldname,fieldvalue; fieldname,fieldvalue”。

我在下面发布了一些测试代码。它实际上是一个完整的html页面,我正在用它来逐步开发这个过程。我唯一剩下的问题是在页面加载后触发加载代码。此代码将选择页面上的所有下拉菜单,迭代它们,并将下拉列表的名称传递给我创建的函数,该函数根据其名称处理预先选择下拉列表中的值以及该名称是否存在在页面上的nameValue隐藏字段中。

3 个答案:

答案 0 :(得分:0)

根据您的问题,这就是我假设您正在寻找的内容。

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);
    }

查看

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

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

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

&lt;%! - 在此处包含if语句以检查值是否已更改 - %&gt; 您为list1选择的值为:<%= selectedList1.DataValueField %> 您为list2选择的值为:<%= selectedList2.DataValueField %>

从头顶写下这个,可能不会第一次编译。

答案 1 :(得分:0)

所以问题是,在验证失败时,您希望再次显示视图并保留以前在动态级联选择中所做的选择?

为什么不渲染服务器上的所有选择并让ModelState处理以前的选择,而不是尝试重新自动化客户端上的select / cascades。您所要做的就是确保每个级别都有正确的选项。

答案 2 :(得分:0)

已解决的问题

我扩展了此示例html页面以更好地说明问题。

某个地方正在抛出一个javascript错误,但我还没有找到它。代码仍然有效,并根据postingFieldValues隐藏字段中的数据预先选择正确的下拉列表。

<!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>