Jquery 在asp.net mvc 2中,如何在具有许多动态命名下拉列表的页面上维护下拉选择?
我已经阅读了创建此问题时列出的链接。我想我要做的事情略有不同。我正在使用ASP.NETMVC2 为即将到来的文字墙道歉。下面是我能想到的问这个问题的最简单的方式。在那个之后,我将进一步探讨这个问题的原因和方式 [问题的要点很快] 如何将字典作为操作的JSON结果返回,以及在下拉列表的onLoad事件中可以使用哪些jquery/javascript来搜索该JSON中的命名元素,如果找到了,则返回相应的值并在下拉列表中预先选择该值 [背景] 我正在为用户从2个初始下拉列表中选择一个选项的工作创建一个项目。第一个下拉列表包含pdf文件名列表。第二个下拉列表包含与别名关联的数据库查询列表(它们看不到sql…它们看到相应存储过程或视图的名称)。用户做出这两个选择后,页面将重新加载,并在下面的两列中显示更多下拉列表 左列是一个包含相同内容的下拉列表:所选pdf中包含的文本字段的名称列表(我使用CeTe软件的动态pdf处理pdf交互)。右侧列将是一个下拉列表,其中包含所选查询的字段名。两列的下拉列表数量相同;总数将是pdf上的字段数 [问题] 我可以很好地加载页面,并用它们各自的数据填充下拉列表。单击submit按钮并发布数据后出现问题。由于下拉列表是动态创建的,所以我使用命名约定来链接哪些选择属于pdf字段,哪些属于db字段。在操作端,我迭代FormCollection并创建一个字典,其中键是发布的元素的名称,值是提交的元素的值。我只为具有非null、非空值的元素向字典中添加条目 到目前为止,我所有的工作。正如您可能已经猜到的,我的问题是在页面从操作返回到视图时维护选择。我有一些非常残缺的代码,很接近,但可能离一个好的解决方案还有一段距离 我将在下面发布我拥有的有意义的代码。我的另一个想法是,我不知道如何去做,就是把一个函数放在下拉列表的onLoad事件中,然后转到一个json操作,并发送一个调用操作/脚本的下拉列表的名称(不管这是什么)。如果提交的名称存在于我存储以前提交的下拉列表名称和值的字典中,则返回应预先选择的相应值;否则,不会返回任何内容,也不会预先选择下拉列表中的任何值 我对JSON了解不多,但如果我可以将之前发布的名称/值字典作为JSON结果返回到页面,我可以使用jquery解析JSON并在下拉列表中处理所需的预选 请参阅下面我的当前代码。如果您愿意的话,可以通过为SelectItemList创建存根数据来模拟它。当前的问题是,无论预选字典中的姓氏/值元素是什么,都是为下拉列表的其余部分预选的 例: 选定值:Jquery 在asp.net mvc 2中,如何在具有许多动态命名下拉列表的页面上维护下拉选择?,jquery,asp.net-mvc,asp.net-mvc-2,drop-down-menu,Jquery,Asp.net Mvc,Asp.net Mvc 2,Drop Down Menu,我已经阅读了创建此问题时列出的链接。我想我要做的事情略有不同。我正在使用ASP.NETMVC2 为即将到来的文字墙道歉。下面是我能想到的问这个问题的最简单的方式。在那个之后,我将进一步探讨这个问题的原因和方式 [问题的要点很快] 如何将字典作为操作的JSON结果返回,以及在下拉列表的onLoad事件中可以使用哪些jquery/javascript来搜索该JSON中的命名元素,如果找到了,则返回相应的值并在下拉列表中预先选择该值 [背景] 我正在为用户从2个初始下拉列表中选择一个选项的工作创建一个
A FirstName
B LastName
C SSN
<no selection> <no selection>
<no selection> <no selection>
<no selection> <no selection>
<no selection> <no selection>
当前代码:
<% 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)%>
Select Database Field: <%=Html.DropDownList("DbFieldNames" + i.ToString(), dbFieldNames, "Select Database Field", dbHtmlAttrib)%>
<br />
<%
}%>
<input type="submit" value="Submit" />
<% } %>
p、 Value.Equals(pdfPreselectValue)).Selected=true;
pdfHtmlAttrib.Add(“选中”,空);
}
如果(!String.IsNullOrEmpty(dbPreselectValue))
{
dbFieldNames.Find(p=>p.Value.Equals(dbPreselectValue)).Selected=true;
dbHtmlAttrib.Add(“选中”,null);
}
%>
选择PDF字段:
选择数据库字段:
主要编辑1省略,以便为解决方案腾出空间
我决定用这个走另一条路。我认为这最终可能会更加简化。在视图发布到操作之后,我从以前使用的字典中创建了一个字符串变量。该字符串放在ViewData中,页面上是一个隐藏字段。我有一个javascript函数,它获取这个字段并解析它。nameValue字段的格式为“fieldname,fieldvalue;fieldname,fieldvalue;fieldname,fieldvalue”
我在下面发布了一些测试代码。它实际上是一个完整的html页面,我正在使用它一点一点地开发这个过程。我唯一剩下的问题是在页面加载后触发代码加载。这段代码将选择页面上的所有下拉列表,对它们进行迭代,然后将下拉列表的名称传递给我创建的函数,该函数根据下拉列表的名称以及该名称是否存在于页面上的nameValue隐藏字段中来处理在下拉列表中预选值的操作。根据您的问题,这就是我假设您要查找的内容 控制器
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);
}
public类选择列表
{
公共静态选择列表列表1(int key=1)
{
var listings=新字典
{
{“选项1”,“_opt1”},
{“选项2”,“_opt2”},
};
var list=新选择列表(列表,“值”,“键”,键!=1?键:键);
退货清单;
}
}
ActionResult页面开始()
{
ViewData[“selectList1”]=SelectListings.Listing1();
ViewData[“selectList2”]=SelectListings.Listing2();
返回视图(ViewData);
}
ActionResult页面提交(int listKey1,int listKey2)
{
查看数据[”选择li
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)%>
<!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>