Okay - so I have been pulling out my hair on this one for far too long now. Hopefully you guys can help out.
I have a form that allows a user to input/edit data about their company. Most of it is pretty straight-forward form field editing, but I have one part where I am allowing the user to select what state(s) their business operates in and then assign a contact to that state. I am using jQuery and 2 listBox controls where I allow the user to double-click the state(s) they want to operate in. The jQuery moves the selected state over to the other listBox as well as to a dropdown control where they can then enter their state-specific contact information.
Now for the "hair pulling out" part. I have seen a lot of posts about taking the data from the 2nd listBox control, putting it into an array and placing it into a hidden form field - but the example of how to do this are few and far between. The few that I have found I have not successfully integrated. Any help there would by much appreciated.
The other piece of the puzzle is that this page is supposed to function as a page the user can edit as well - so on the initial load my page should (ideally) preload the state(s) a user has already selected via jQuery into the second listBox...but the states that go into the second listBox should NOT show up in the first. Ugh. Any pointers as to how to accomplish this would also be greatly appreciated.
Here is my code:
ASPX file:
<%@ Page Title="Mappings" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Mapping.aspx.cs" Inherits="Account_Mapping" EnableEventValidation="false" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script language="javascript" type="text/javascript">
$(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");
});
});
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
Admin
</h2>
<p>
Please fill in all the required information and click "submit" when complete.
</p>
<div class="formLeft">
<b>Company Name:</b>
</div>
<div class="formRight">
<asp:TextBox ID="comp_Name" runat="server" CssClass="textEntry"></asp:TextBox>
</div>
<div class="formLeft">
<b>Company Phone:</b>
</div>
<div class="formRight">
<asp:TextBox ID="comp_Phone" runat="server" CssClass="textEntry"></asp:TextBox>
</div>
<div class="formLeft">
<b>Main Contact Person:</b>
</div>
<div class="formRight">
<asp:TextBox ID="comp_Contact" runat="server" CssClass="textEntry"></asp:TextBox>
</div>
<div class="formLeft">
<b>Main Email Address:</b>
</div>
<div class="formRight">
<asp:TextBox ID="comp_Email" runat="server" CssClass="textEntry"></asp:TextBox>
</div>
<div class="formLeft">
<b>Company Website:</b>
</div>
<div class="formRight">
<asp:TextBox ID="comp_Website" runat="server" CssClass="textEntry"></asp:TextBox>
</div>
<div class="formLeft">
<b>Company Description:</b>
</div>
<div class="formRight">
<asp:TextBox ID="comp_Desc" runat="server" CssClass="textAreaEntry" TextMode="MultiLine"></asp:TextBox>
</div>
<div class="formLeft">
<b>Company Access:</b>
</div>
<div class="formRight">
<asp:TextBox ID="comp_Access" runat="server" CssClass="textAreaEntry" TextMode="MultiLine"></asp:TextBox>
</div>
<hr />
<p>
<b>Which state(s) do you operate in?</b>
</p>
<div class="formLeft">
<b>OPTIONS:</b> <a id="stateAllA" href="#" style="font-size:11px" onclick="return false;">(add all)</a><br />
<em style="font-size:12px">(double-click an item to add it to your list)</em><br />
<asp:ListBox ID="sourceState" runat="server" CssClass="selectEntry" SelectionMode="Multiple" DataSourceID="myDSID" DataTextField="state_name" DataValueField="state_ID"></asp:ListBox>
<asp:SqlDataSource ID="myDSID" runat="server"
ConnectionString="<%$ ConnectionStrings:myDatasource %>"
SelectCommand="SELECT [state_ID], [state_name] FROM [states]">
</asp:SqlDataSource>
</div>
<div class="formRight">
<b>YOUR SELECTIONS:</b> <a id="stateAllR" href="#" style="font-size:11px" onclick="return false;">(remove all)</a><br />
<em style="font-size:12px">(double-click an item to remove it from your list)</em><br />
<asp:ListBox ID="targetState" runat="server" CssClass="selectEntry" SelectionMode="Multiple"></asp:ListBox>
<asp:HiddenField ID="hdnStates" runat="server" />
</div>
<p>
<b>Do you wish to assign state-specific contacts? If so, choose the appropriate state and fill out the info below.</b><br>
</p>
<p>
<asp:DropDownList ID="contactState" runat="server"></asp:DropDownList>
</p>
<div align="right" style="margin-top:5px;">
<asp:Button ID="Button1" runat="server" Text="Submit"
onclick="Button1_Click" />
</div>
</asp:Content>
And my 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];
}
}
So there you have it. It's a lot to digest, I know. I'd love a kick in the right direction. :)
