ASP.NET jQuery双列表框编辑和保存

好的 – 所以我现在已经把这头发拔了太久了。 希望你们能帮帮忙。

我有一个表单，允许用户输入/编辑有关其公司的数据。 其中大部分是非常直接的表单字段编辑，但我有一个部分，我允许用户选择他们的业务运作的状态，然后为该状态分配联系人。 我正在使用jQuery和2个listBox控件，我允许用户双击他们想要操作的状态.jQuery将选定的状态移动到另一个listBox以及下拉控件，然后他们就可以输入他们的州特定联系信息。

现在为“头发拔出”部分。 我看过很多关于从第二个listBox控件获取数据的post，将它放入一个数组并将其放入一个隐藏的表单字段中 – 但是如何做到这一点的例子很少。 我发现的少数几个我没有成功整合。 非常感谢任何帮助。

另一个难题是该页面应该用作用户可以编辑的页面 – 所以在初始加载时我的页面应该（理想情况下）将用户已经通过jQuery选择的状态预加载到第二个listBox …但进入第二个listBox的状态不应该出现在第一个列表框中。 啊。 关于如何实现这一点的任何指示也将非常感激。

这是我的代码：

ASPX文件：

   $(function () { var sourceState = $('#MainContent_sourceState option').clone(); $('#stateAllA').click(function () { $('#MainContent_sourceState option').appendTo('#MainContent_targetState, #MainContent_contactState'); }); $('#stateAllR').click(function () { $('#MainContent_targetState option').appendTo('#MainContent_sourceState'); $('#MainContent_contactState option').remove(); }); $('#MainContent_sourceState').dblclick(function () { $('#MainContent_sourceState option:selected').appendTo('#MainContent_targetState, #MainContent_contactState'); }); $('#MainContent_targetState').dblclick(function () { var targetList = $('#MainContent_targetState option:selected'); var targetVal = $('#MainContent_targetState option:selected').val(); targetList.appendTo('#MainContent_sourceState'); $('#MainContent_contactState option[value=' + targetVal + ']').remove(); //$('#contactState option:selected').remove(); var foption = $('#MainContent_sourceState option:first'); var soptions = $.makeArray($('#MainContent_sourceState option:not(:first)')).sort(function (a, b) { return a.text == b.text ? 0 : a.text < b.text ? -1 : 1 }); $('#MainContent_sourceState').html(soptions).prepend(foption); foption.attr("selected", true).siblings("option").removeAttr("selected"); }); });    
 Admin 
 
 Please fill in all the required information and click "submit" when complete. 
 
 Company Name: 
 
  
 
 Company Phone: 
 
  
 
 Main Contact Person: 
 
  
 
 Main Email Address: 
 
  
 
 Company Website: 
 
  
 
 Company Description: 
 
  
 
 Company Access: 
 
  
 
 
 Which state(s) do you operate in? 
 
 OPTIONS: (add all)
 (double-click an item to add it to your list)
  <asp:SqlDataSource ID="myDSID" runat="server" ConnectionString="" SelectCommand="SELECT [state_ID], [state_name] FROM [states]">  
 
 YOUR SELECTIONS: (remove all)
 (double-click an item to remove it from your list)
   
 
 Do you wish to assign state-specific contacts? If so, choose the appropriate state and fill out the info below.
 
 
  
 
  
  

而我的CodeBehind：

 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Services; using System.Web.UI; using System.Web.UI.WebControls; using System.Data.SqlClient; using System.Configuration; using System.Data; public partial class Account_Mapping : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { //let's get our passed variables //the company you're editing comes from a dropdown on prev page string passedComp = Session["searchCompany"].ToString(); if (!IsPostBack) { //now let's get all the relevant data from the DB //first, the easy stuff DataTable dt1 = GetBasicCompData(passedComp); //let's populate those fields in the form comp_Name.Text = dt1.Rows[0][0].ToString(); comp_Phone.Text = dt1.Rows[0][1].ToString(); comp_Contact.Text = dt1.Rows[0][2].ToString(); comp_Email.Text = dt1.Rows[0][3].ToString(); comp_Website.Text = dt1.Rows[0][4].ToString(); comp_Desc.Text = dt1.Rows[0][5].ToString(); comp_Access.Text = dt1.Rows[0][6].ToString(); //state mapping DataTable dt2 = GetStateCompData(passedComp); for (int i = 0; i < dt2.Rows.Count; i++) { //targetState.DataSource = dt2; //targetState.DataValueField = "state_ID"; //targetState.DataTextField = "state_Name"; //targetState.DataBind(); //contactState.DataSource = dt2; //contactState.DataValueField = "state_ID"; //contactState.DataTextField = "state_Name"; //contactState.DataBind(); } } } protected void Button1_Click(object sender, EventArgs e) { //breakpoint here to try and return my values string myStates = hdnStates.Value; } public DataTable GetBasicCompData(string strComp) { //Query DB based on result string strConn = ConfigurationManager.ConnectionStrings["myConn"].ConnectionString; SqlConnection con = new SqlConnection(strConn); SqlCommand cmd = new SqlCommand(); cmd.Connection = con; cmd.CommandType = System.Data.CommandType.Text; cmd.Parameters.AddWithValue("@Comp", strComp); cmd.CommandText = "SELECT companies.comp_Name, companies.comp_Phone, companies.comp_Contact, companies.comp_Email, companies.comp_Website, companies.comp_Desc, companies.comp_Access FROM companies WHERE comp_ID = ''+ @Comp +''"; DataSet objDs = new DataSet(); SqlDataAdapter dAdapter = new SqlDataAdapter(); dAdapter.SelectCommand = cmd; con.Open(); dAdapter.Fill(objDs); con.Close(); return objDs.Tables[0]; } public DataTable GetStateCompData(string strComp) { //Query DB based on result string strConn = ConfigurationManager.ConnectionStrings["myConn"].ConnectionString; SqlConnection con = new SqlConnection(strConn); SqlCommand cmd = new SqlCommand(); cmd.Connection = con; cmd.CommandType = System.Data.CommandType.Text; cmd.Parameters.AddWithValue("@Comp", strComp); cmd.CommandText = "SELECT states.state_ID, states.state_Name, contact_Name, contact_Phone, contact_Email FROM states INNER JOIN companies_states ON states.state_ID = companies_states.state_ID WHERE comp_ID = ''+ @Comp +''"; DataSet objDs = new DataSet(); SqlDataAdapter dAdapter = new SqlDataAdapter(); dAdapter.SelectCommand = cmd; con.Open(); dAdapter.Fill(objDs); con.Close(); return objDs.Tables[0]; } } 

所以你有它。 我知道，消化很多。 我喜欢朝正确的方向踢球。 🙂

Answer 1

这是一种方法，我正在使用：

• jquery ， nuget
• json.net ， nuget
• knockoutjs ， nuget

这是一个完整的工作示例，输出是：

如您所见，每个post都模拟了视图状态，因此您可以在服务器代码中访问这两个列表项

这是代码：

ASPX

 <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="KnockoutJS1.aspx.cs" Inherits="WebApplication1.KnockoutJS1" %>             
   

代码背后

 public partial class KnockoutJS1 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!this.IsPostBack) { this.list1.Attributes.Add("data-bind", "options: states1, optionsText: 'Name', value: states1Selected, event: { dblclick: execute1 }"); this.list2.Attributes.Add("data-bind", "options: states2, optionsText: 'Name', value: states2Selected, event: { dblclick: execute2 }"); var s = Builder.CreateListOfSize(6).Build(); this.list1.DataSource = s; this.list1.DataBind(); } else { var states1 = JsonConvert.DeserializeObject>(this.list1Values.Value); var states2 = JsonConvert.DeserializeObject>(this.list2Values.Value); this.list1.DataSource = states1; this.list1.DataBind(); this.list2.DataSource = states2; this.list2.DataBind(); } } protected void saveData_Click(object sender, EventArgs e) { this.lblMessage.Text = string.Empty; var states1 = JsonConvert.DeserializeObject>(this.list1Values.Value); var states2 = JsonConvert.DeserializeObject>(this.list2Values.Value); foreach (var item in states1) { this.lblMessage.Text += "List1: " + item.Name + " " + item.ID.ToString() + "
"; } this.lblMessage.Text += "

"; foreach (var item in states2) { this.lblMessage.Text += "List2: " + item.Name + " " + item.ID.ToString() + "
"; } } } public class State { public int ID { get; set; } public string Name { get; set; } }