Javascript listbox item manipulation, and codebehind

B

Bob P.

Hello,

I have a page with:

* two side-by-side asp:listboxes and two arrow asp:buttons allowing
users to add/remove email addresses between them -- very much like
Outlook, where you have the address book on the left, and you build
the message recipients on the right.
* an asp:button that, when clicked, fires off some code to create and
send the mail message

The moving of entries from side to side is accomplished with some
fairly straightforward javascript code. It's all processed on the
client-- no postbacks.

THE PROBLEM IS, after I've set up the lists, when I click the button
and loop thru the recipients list box to get the list of recipients to
set to MailMessage.To, the loop doesn't recognize that the lists have
changed. It still thinks they're in the state they were when the page
loaded. How can I get the codebehind to recognize the changes that
have taken place on the client side? Can I do it without postbacks?
Thanks.

html:

<%@ Page language="c#" Codebehind="EmailDraft.aspx.cs"
AutoEventWireup="false" Inherits="xx.EmailDraft" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>Email Response Draft</title>
<script language="javascript">
function MoveRecipients( lboFrom, lboTo )
{
for ( var i=0; i < lboFrom.options.length; i++ )
{
if ( ( lboFrom.options.selected == true ) )
{
strItemToAdd = lboFrom.options.text;
lboTo.options[lboTo.length] = new Option(strItemToAdd);
lboFrom.options = null;
i--;
}
}
}
</script>
</HEAD>
<body>
<form id="frmEmailDraft" method="post" runat="server">
<table width="600">
<tr>
<td class="appField">
Address List:<br>
<asp:ListBox id=lboEmailAddresses runat="server" Width="250px"
Height="96px" DataSource="<%# arrEmailAddresses %>"
CssClass="appTextBox" SelectionMode="Multiple">
</asp:ListBox>
</td>
<td>
<input type="button" id="btnMoveTo" value=">" class="buttonstyle"
onclick="MoveRecipients( frmEmailDraft.lboEmailAddresses,
frmEmailDraft.lboRecipients)"
style="WIDTH: 72px; HEIGHT: 19px" size="20"></BUTTON><br>
<input type="button" id="btnMoveFrom" value="<" class="buttonstyle"
onclick="MoveRecipients(frmEmailDraft.lboRecipients,
frmEmailDraft.lboEmailAddresses )"
style="WIDTH: 72px; HEIGHT: 19px" size="20"></BUTTON>
</td>
<td class="appField">
Send To:<br>
<asp:ListBox id="lboRecipients" runat="server" Width="250px"
Height="96px" CssClass="appTextBox" SelectionMode="Multiple"
EnableViewState="False"></asp:ListBox>
</td>
</tr>
<tr>
<td colspan="3" class="appLabel" align="right">
<asp:Button id="btnSendEmail" runat="server" Width="75px"
CssClass="buttonstyle" Text="Send E-mail"></asp:Button>&nbsp;
<input class="buttonstyle" id="btnCancel" style="WIDTH: 75px"
onclick="window.close();" type="button" value="Cancel">
</td>
</tr>
</table>
</form>
</body>
</HTML>


c# :

public class EmailDraft : System.Web.UI.Page
{
protected System.Web.UI.WebControls.ListBox lboEmailAddresses;
protected System.Web.UI.WebControls.ListBox lboRecipients;
protected System.Web.UI.WebControls.TextBox txtDraft;
protected System.Web.UI.WebControls.TextBox txtAnnotation;
protected System.Web.UI.WebControls.Button btnSendEmail;
protected string[] arrEmailAddresses = { "(e-mail address removed)",
"(e-mail address removed)","(e-mail address removed)","(e-mail address removed)" } ;

private void Page_Load(object sender, System.EventArgs e)
{
lboEmailAddresses.DataBind();
}

#region Web Form Designer generated code
...snip...
#endregion

private void btnSendEmail_Click(object sender, System.EventArgs e)
{
MailMessage mm = new MailMessage();
mm.From = "(e-mail address removed)";
for ( int iRcpts = 0; iRcpts < lboRecipients.Items.Count; iRcpts++)
{
mm.To += lboRecipients.Items[iRcpts].Text;
if (iRcpts != lboRecipients.Items.Count - 1) mm.To += ";";
}
mm.Subject = "something";
mm.Body = "something else";
SmtpMail.Send(mm);
}
}
 
B

bruce barker

a listbox only postbacks its value. your javascript nned to send back the
nw item list data also. the best way is in a hidden field. in c# on the
postback, read the hidden field, and load the list from it.

-- bruce (sqlwork.com)


Bob P. said:
Hello,

I have a page with:

* two side-by-side asp:listboxes and two arrow asp:buttons allowing
users to add/remove email addresses between them -- very much like
Outlook, where you have the address book on the left, and you build
the message recipients on the right.
* an asp:button that, when clicked, fires off some code to create and
send the mail message

The moving of entries from side to side is accomplished with some
fairly straightforward javascript code. It's all processed on the
client-- no postbacks.

THE PROBLEM IS, after I've set up the lists, when I click the button
and loop thru the recipients list box to get the list of recipients to
set to MailMessage.To, the loop doesn't recognize that the lists have
changed. It still thinks they're in the state they were when the page
loaded. How can I get the codebehind to recognize the changes that
have taken place on the client side? Can I do it without postbacks?
Thanks.

html:

<%@ Page language="c#" Codebehind="EmailDraft.aspx.cs"
AutoEventWireup="false" Inherits="xx.EmailDraft" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>Email Response Draft</title>
<script language="javascript">
function MoveRecipients( lboFrom, lboTo )
{
for ( var i=0; i < lboFrom.options.length; i++ )
{
if ( ( lboFrom.options.selected == true ) )
{
strItemToAdd = lboFrom.options.text;
lboTo.options[lboTo.length] = new Option(strItemToAdd);
lboFrom.options = null;
i--;
}
}
}
</script>
</HEAD>
<body>
<form id="frmEmailDraft" method="post" runat="server">
<table width="600">
<tr>
<td class="appField">
Address List:<br>
<asp:ListBox id=lboEmailAddresses runat="server" Width="250px"
Height="96px" DataSource="<%# arrEmailAddresses %>"
CssClass="appTextBox" SelectionMode="Multiple">
</asp:ListBox>
</td>
<td>
<input type="button" id="btnMoveTo" value=">" class="buttonstyle"
onclick="MoveRecipients( frmEmailDraft.lboEmailAddresses,
frmEmailDraft.lboRecipients)"
style="WIDTH: 72px; HEIGHT: 19px" size="20"></BUTTON><br>
<input type="button" id="btnMoveFrom" value="<" class="buttonstyle"
onclick="MoveRecipients(frmEmailDraft.lboRecipients,
frmEmailDraft.lboEmailAddresses )"
style="WIDTH: 72px; HEIGHT: 19px" size="20"></BUTTON>
</td>
<td class="appField">
Send To:<br>
<asp:ListBox id="lboRecipients" runat="server" Width="250px"
Height="96px" CssClass="appTextBox" SelectionMode="Multiple"
EnableViewState="False"></asp:ListBox>
</td>
</tr>
<tr>
<td colspan="3" class="appLabel" align="right">
<asp:Button id="btnSendEmail" runat="server" Width="75px"
CssClass="buttonstyle" Text="Send E-mail"></asp:Button>&nbsp;
<input class="buttonstyle" id="btnCancel" style="WIDTH: 75px"
onclick="window.close();" type="button" value="Cancel">
</td>
</tr>
</table>
</form>
</body>
</HTML>


c# :

public class EmailDraft : System.Web.UI.Page
{
protected System.Web.UI.WebControls.ListBox lboEmailAddresses;
protected System.Web.UI.WebControls.ListBox lboRecipients;
protected System.Web.UI.WebControls.TextBox txtDraft;
protected System.Web.UI.WebControls.TextBox txtAnnotation;
protected System.Web.UI.WebControls.Button btnSendEmail;
protected string[] arrEmailAddresses = { "(e-mail address removed)",
"(e-mail address removed)","(e-mail address removed)","(e-mail address removed)" } ;

private void Page_Load(object sender, System.EventArgs e)
{
lboEmailAddresses.DataBind();
}

#region Web Form Designer generated code
...snip...
#endregion

private void btnSendEmail_Click(object sender, System.EventArgs e)
{
MailMessage mm = new MailMessage();
mm.From = "(e-mail address removed)";
for ( int iRcpts = 0; iRcpts < lboRecipients.Items.Count; iRcpts++)
{
mm.To += lboRecipients.Items[iRcpts].Text;
if (iRcpts != lboRecipients.Items.Count - 1) mm.To += ";";
}
mm.Subject = "something";
mm.Body = "something else";
SmtpMail.Send(mm);
}
}
Click to expand...
 
M

Matt Berther

Hello Bob P.,

Look at this control... It does all this for you...

http://www.metabuilders.com/Tools/DualList.aspx

--
Matt Berther
http://www.mattberther.com
Hello,

I have a page with:

* two side-by-side asp:listboxes and two arrow asp:buttons allowing
users to add/remove email addresses between them -- very much like
Outlook, where you have the address book on the left, and you build
the message recipients on the right.
* an asp:button that, when clicked, fires off some code to create and
send the mail message
The moving of entries from side to side is accomplished with some
fairly straightforward javascript code. It's all processed on the
client-- no postbacks.

THE PROBLEM IS, after I've set up the lists, when I click the button
and loop thru the recipients list box to get the list of recipients to
set to MailMessage.To, the loop doesn't recognize that the lists have
changed. It still thinks they're in the state they were when the page
loaded. How can I get the codebehind to recognize the changes that
have taken place on the client side? Can I do it without postbacks?
Thanks.

html:

<%@ Page language="c#" Codebehind="EmailDraft.aspx.cs"
AutoEventWireup="false" Inherits="xx.EmailDraft" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>Email Response Draft</title>
<script language="javascript">
function MoveRecipients( lboFrom, lboTo )
{
for ( var i=0; i < lboFrom.options.length; i++ )
{
if ( ( lboFrom.options.selected == true ) )
{
strItemToAdd = lboFrom.options.text;
lboTo.options[lboTo.length] = new Option(strItemToAdd);
lboFrom.options = null;
i--;
}
}
}
</script>
</HEAD>
<body>
<form id="frmEmailDraft" method="post" runat="server">
<table width="600">
<tr>
<td class="appField">
Address List:<br>
<asp:ListBox id=lboEmailAddresses runat="server" Width="250px"
Height="96px" DataSource="<%# arrEmailAddresses %>"
CssClass="appTextBox" SelectionMode="Multiple">
</asp:ListBox>
</td>
<td>
<input type="button" id="btnMoveTo" value=">" class="buttonstyle"
onclick="MoveRecipients( frmEmailDraft.lboEmailAddresses,
frmEmailDraft.lboRecipients)"
style="WIDTH: 72px; HEIGHT: 19px" size="20"></BUTTON><br>
<input type="button" id="btnMoveFrom" value="<" class="buttonstyle"
onclick="MoveRecipients(frmEmailDraft.lboRecipients,
frmEmailDraft.lboEmailAddresses )"
style="WIDTH: 72px; HEIGHT: 19px" size="20"></BUTTON>
</td>
<td class="appField">
Send To:<br>
<asp:ListBox id="lboRecipients" runat="server" Width="250px"
Height="96px" CssClass="appTextBox" SelectionMode="Multiple"
EnableViewState="False"></asp:ListBox>
</td>
</tr>
<tr>
<td colspan="3" class="appLabel" align="right">
<asp:Button id="btnSendEmail" runat="server" Width="75px"
CssClass="buttonstyle" Text="Send E-mail"></asp:Button>&nbsp;
<input class="buttonstyle" id="btnCancel" style="WIDTH: 75px"
onclick="window.close();" type="button" value="Cancel">
</td>
</tr>
</table>
</form>
</body>
</HTML>
c# :

public class EmailDraft : System.Web.UI.Page
{
protected System.Web.UI.WebControls.ListBox lboEmailAddresses;
protected System.Web.UI.WebControls.ListBox lboRecipients;
protected System.Web.UI.WebControls.TextBox txtDraft;
protected System.Web.UI.WebControls.TextBox txtAnnotation;
protected System.Web.UI.WebControls.Button btnSendEmail;
protected string[] arrEmailAddresses = { "(e-mail address removed)",
"(e-mail address removed)","(e-mail address removed)","(e-mail address removed)" } ;
private void Page_Load(object sender, System.EventArgs e)
{
lboEmailAddresses.DataBind();
}
#region Web Form Designer generated code
...snip...
#endregion
private void btnSendEmail_Click(object sender, System.EventArgs e)
{
MailMessage mm = new MailMessage();
mm.From = "(e-mail address removed)";
for ( int iRcpts = 0; iRcpts < lboRecipients.Items.Count; iRcpts++)
{
mm.To += lboRecipients.Items[iRcpts].Text;
if (iRcpts != lboRecipients.Items.Count - 1) mm.To += ";";
}
mm.Subject = "something";
mm.Body = "something else";
SmtpMail.Send(mm);
}
}
Click to expand...
 
V

Vidar Petursson

Hi

Did you select all in the listbox before posting... else it wont be sent

for(i=0;i<lbox.options.length;i++)
{
lbox.options.selected = true;
}
And use multiple

--
Best Regards
Vidar Petursson
==============================
Microsoft Visual: Scripting MVP 2000-2004
http://www.icysoft.com/
http://www.deus-x.com/ Instant e-commerce
http://www.microsoft.com/technet/scriptcenter/
Playground: http://213.190.104.211/ ( IE 5.5+ only )
2B||!2B=?
No matter where you go there you are
==============================
Bob P. said:
Hello,

I have a page with:

* two side-by-side asp:listboxes and two arrow asp:buttons allowing
users to add/remove email addresses between them -- very much like
Outlook, where you have the address book on the left, and you build
the message recipients on the right.
* an asp:button that, when clicked, fires off some code to create and
send the mail message

The moving of entries from side to side is accomplished with some
fairly straightforward javascript code. It's all processed on the
client-- no postbacks.

THE PROBLEM IS, after I've set up the lists, when I click the button
and loop thru the recipients list box to get the list of recipients to
set to MailMessage.To, the loop doesn't recognize that the lists have
changed. It still thinks they're in the state they were when the page
loaded. How can I get the codebehind to recognize the changes that
have taken place on the client side? Can I do it without postbacks?
Thanks.

html:

<%@ Page language="c#" Codebehind="EmailDraft.aspx.cs"
AutoEventWireup="false" Inherits="xx.EmailDraft" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>Email Response Draft</title>
<script language="javascript">
function MoveRecipients( lboFrom, lboTo )
{
for ( var i=0; i < lboFrom.options.length; i++ )
{
if ( ( lboFrom.options.selected == true ) )
{
strItemToAdd = lboFrom.options.text;
lboTo.options[lboTo.length] = new Option(strItemToAdd);
lboFrom.options = null;
i--;
}
}
}
</script>
</HEAD>
<body>
<form id="frmEmailDraft" method="post" runat="server">
<table width="600">
<tr>
<td class="appField">
Address List:<br>
<asp:ListBox id=lboEmailAddresses runat="server" Width="250px"
Height="96px" DataSource="<%# arrEmailAddresses %>"
CssClass="appTextBox" SelectionMode="Multiple">
</asp:ListBox>
</td>
<td>
<input type="button" id="btnMoveTo" value=">" class="buttonstyle"
onclick="MoveRecipients( frmEmailDraft.lboEmailAddresses,
frmEmailDraft.lboRecipients)"
style="WIDTH: 72px; HEIGHT: 19px" size="20"></BUTTON><br>
<input type="button" id="btnMoveFrom" value="<" class="buttonstyle"
onclick="MoveRecipients(frmEmailDraft.lboRecipients,
frmEmailDraft.lboEmailAddresses )"
style="WIDTH: 72px; HEIGHT: 19px" size="20"></BUTTON>
</td>
<td class="appField">
Send To:<br>
<asp:ListBox id="lboRecipients" runat="server" Width="250px"
Height="96px" CssClass="appTextBox" SelectionMode="Multiple"
EnableViewState="False"></asp:ListBox>
</td>
</tr>
<tr>
<td colspan="3" class="appLabel" align="right">
<asp:Button id="btnSendEmail" runat="server" Width="75px"
CssClass="buttonstyle" Text="Send E-mail"></asp:Button>&nbsp;
<input class="buttonstyle" id="btnCancel" style="WIDTH: 75px"
onclick="window.close();" type="button" value="Cancel">
</td>
</tr>
</table>
</form>
</body>
</HTML>


c# :

public class EmailDraft : System.Web.UI.Page
{
protected System.Web.UI.WebControls.ListBox lboEmailAddresses;
protected System.Web.UI.WebControls.ListBox lboRecipients;
protected System.Web.UI.WebControls.TextBox txtDraft;
protected System.Web.UI.WebControls.TextBox txtAnnotation;
protected System.Web.UI.WebControls.Button btnSendEmail;
protected string[] arrEmailAddresses = { "(e-mail address removed)",
"(e-mail address removed)","(e-mail address removed)","(e-mail address removed)" } ;

private void Page_Load(object sender, System.EventArgs e)
{
lboEmailAddresses.DataBind();
}

#region Web Form Designer generated code
...snip...
#endregion

private void btnSendEmail_Click(object sender, System.EventArgs e)
{
MailMessage mm = new MailMessage();
mm.From = "(e-mail address removed)";
for ( int iRcpts = 0; iRcpts < lboRecipients.Items.Count; iRcpts++)
{
mm.To += lboRecipients.Items[iRcpts].Text;
if (iRcpts != lboRecipients.Items.Count - 1) mm.To += ";";
}
mm.Subject = "something";
mm.Body = "something else";
SmtpMail.Send(mm);
}
}
Click to expand...
 
B

Bob P.

Thanks for all your help. I tried having all the options selected
before posting but it didn't seem to do the trick.

I wound up populating a hidden field, using Javascript, by iterating
through the contents of the 2nd listbox. That worked nicely.

Thanks again.


Vidar Petursson said:
Hi

Did you select all in the listbox before posting... else it wont be sent

for(i=0;i<lbox.options.length;i++)
{
lbox.options.selected = true;
}
And use multiple

--
Best Regards
Vidar Petursson
==============================
Microsoft Visual: Scripting MVP 2000-2004
http://www.icysoft.com/
http://www.deus-x.com/ Instant e-commerce
http://www.microsoft.com/technet/scriptcenter/
Playground: http://213.190.104.211/ ( IE 5.5+ only )
2B||!2B=?
No matter where you go there you are
==============================
Bob P. said:
Hello,

I have a page with:

* two side-by-side asp:listboxes and two arrow asp:buttons allowing
users to add/remove email addresses between them -- very much like
Outlook, where you have the address book on the left, and you build
the message recipients on the right.
* an asp:button that, when clicked, fires off some code to create and
send the mail message

The moving of entries from side to side is accomplished with some
fairly straightforward javascript code. It's all processed on the
client-- no postbacks.

THE PROBLEM IS, after I've set up the lists, when I click the button
and loop thru the recipients list box to get the list of recipients to
set to MailMessage.To, the loop doesn't recognize that the lists have
changed. It still thinks they're in the state they were when the page
loaded. How can I get the codebehind to recognize the changes that
have taken place on the client side? Can I do it without postbacks?
Thanks.

html:

<%@ Page language="c#" Codebehind="EmailDraft.aspx.cs"
AutoEventWireup="false" Inherits="xx.EmailDraft" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>Email Response Draft</title>
<script language="javascript">
function MoveRecipients( lboFrom, lboTo )
{
for ( var i=0; i < lboFrom.options.length; i++ )
{
if ( ( lboFrom.options.selected == true ) )
{
strItemToAdd = lboFrom.options.text;
lboTo.options[lboTo.length] = new Option(strItemToAdd);
lboFrom.options = null;
i--;
}
}
}
</script>
</HEAD>
<body>
<form id="frmEmailDraft" method="post" runat="server">
<table width="600">
<tr>
<td class="appField">
Address List:<br>
<asp:ListBox id=lboEmailAddresses runat="server" Width="250px"
Height="96px" DataSource="<%# arrEmailAddresses %>"
CssClass="appTextBox" SelectionMode="Multiple">
</asp:ListBox>
</td>
<td>
<input type="button" id="btnMoveTo" value=">" class="buttonstyle"
onclick="MoveRecipients( frmEmailDraft.lboEmailAddresses,
frmEmailDraft.lboRecipients)"
style="WIDTH: 72px; HEIGHT: 19px" size="20"></BUTTON><br>
<input type="button" id="btnMoveFrom" value="<" class="buttonstyle"
onclick="MoveRecipients(frmEmailDraft.lboRecipients,
frmEmailDraft.lboEmailAddresses )"
style="WIDTH: 72px; HEIGHT: 19px" size="20"></BUTTON>
</td>
<td class="appField">
Send To:<br>
<asp:ListBox id="lboRecipients" runat="server" Width="250px"
Height="96px" CssClass="appTextBox" SelectionMode="Multiple"
EnableViewState="False"></asp:ListBox>
</td>
</tr>
<tr>
<td colspan="3" class="appLabel" align="right">
<asp:Button id="btnSendEmail" runat="server" Width="75px"
CssClass="buttonstyle" Text="Send E-mail"></asp:Button>&nbsp;
<input class="buttonstyle" id="btnCancel" style="WIDTH: 75px"
onclick="window.close();" type="button" value="Cancel">
</td>
</tr>
</table>
</form>
</body>
</HTML>


c# :

public class EmailDraft : System.Web.UI.Page
{
protected System.Web.UI.WebControls.ListBox lboEmailAddresses;
protected System.Web.UI.WebControls.ListBox lboRecipients;
protected System.Web.UI.WebControls.TextBox txtDraft;
protected System.Web.UI.WebControls.TextBox txtAnnotation;
protected System.Web.UI.WebControls.Button btnSendEmail;
protected string[] arrEmailAddresses = { "(e-mail address removed)",
"(e-mail address removed)","(e-mail address removed)","(e-mail address removed)" } ;

private void Page_Load(object sender, System.EventArgs e)
{
lboEmailAddresses.DataBind();
}

#region Web Form Designer generated code
...snip...
#endregion

private void btnSendEmail_Click(object sender, System.EventArgs e)
{
MailMessage mm = new MailMessage();
mm.From = "(e-mail address removed)";
for ( int iRcpts = 0; iRcpts < lboRecipients.Items.Count; iRcpts++)
{
mm.To += lboRecipients.Items[iRcpts].Text;
if (iRcpts != lboRecipients.Items.Count - 1) mm.To += ";";
}
mm.Subject = "something";
mm.Body = "something else";
SmtpMail.Send(mm);
}
}
Click to expand...
Click to expand...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Loop through record in datareader in aspx for textbox other item 1
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Unable to get the selected item value of Listbox in codebehind 0
Tooltip in Listbox 0
Adding TextBox with default value 1
Image shifts to the right when export the page to pdf 4
Help with Visual Lightbox: Scripts 2
Hidden Panel with a ListBox and RequiredFieldValidator breaks page 2

Members online

Total: 62 (members: 3, guests: 59)
Robots: 202

Forum statistics

Threads
473,982
Messages
2,570,185
Members
46,737
Latest member
Georgeengab

Latest Threads

Top