Avatar of akohan
akohan
 asked on

How to work with Web Controls in ASP.NET?

hello group,

I'm trying to catch up with .net and now I'm about to design a UI where in there I need to have 2 list-boxes and two buttons in between (as you have seen in regular apps). Buttons are "Add" and "Remove".

Let's say a reseller wants to fill out a form and tell us about which states he is dealing with (to deal with taxing) so when he chooses a state on left list-box he can click "Add" button and add that state to the list box on right and etc ... or remove them.

How can I do such a thing in C# & ASP.NET?


Regards,
akohan
ASP.NETC#

Avatar of undefined
Last Comment
akohan

8/22/2022 - Mon
Carl Tawn

Something like that you might want to consider wrapping in a UserControl.

But basically you just need two ListBox controls and a couple of Buttons. Then, in the Click event handler for the Add button you can do something like:

    protected void AddButton_Click(object sender, EventArgs e)
    {
         if (ListBox1.SelectIndex != -1)
              ListBox2.Items.Add(ListBox1.SelectedItem);
    }


then do the reverse for the Remove button.
mortimer452

This is pseudo-code here, but pretty much like this.

You'll have two listboxes on the page, lets' call them lstUnSelected and lstSelected

<asp:listbox id="lstUnSelected" runat="server" />
<asp:listbox id="lstSelected" runat="server" />

And two buttons, one to "add" and one to "remove"

<asp:button id="cmdAdd" runat="Server" text ="Add" />
<asp:button id="cmdRemove" runat="server" text="Remove" />

First you'll need code to populate the "From" listbox with all the states, or just type them in manually as listitems like this in the aspx page:
<asp:listbox id="lstFrom" runat="Server">
  <asp:listitem value="AL" text="Alabama" />
  <asp:listitem value="AK" text="Alaska" />
 et cetera, et cetera
</asp:listbox>

In your code-behind page, you'll need to handle two events, the cmdAdd_Click and the cmdRemove_Click, with code something like this:

Protected sub cmdAdd_Click (sender as object, e as eventargs)
   lstSelected.items.add(lstUnSelected.SelectedItem)
   lstUnSelected.Items.remove(lstUnSelected.SelectedItem)
End Sub

Protected sub cmdRemove_Click(sender as object, e as eventargs)
   lstUnSelected.Items.add(lstSelected.SelectedItem)
   lstSelected.Items.Remove(lstSelected.SelectedItem)
End Sub

akohan

ASKER


how about when I user clicks on Add or Remove button? how can I avoid submitting the form?

All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
mortimer452

If you want to avoid postbacks you'll need to handle moving items from one list to another with Javascript instead -- no ASP.Net code required.  Is there a reason why you don't want it to post back?
akohan

ASKER

no reason it is just I'm not familiar with post back yet! I thought I must avoid that.

so can I ignore that?
Carl Tawn

Alternatively you you can use AJAX to perform a partial postback. Doing a full postback shouldn't really matter, because it is events you react to rather than simply the fact that the page has posted back.
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
mortimer452

Yes, to handle the OnClick event of the buttons you'll need to postback the form, which will submit the form data and refresh the page.  ASP.Net handles re-populating controls on the page with their old values automagically.

For example, if you also had a couple textboxes on that page, clicking the button to postback won't clear those out, when the page refreshes the values that were there before the click will persist.
akohan

ASKER

OK, the problem is that I'm not familiar with AJAX. do I need to know AJAX to send a piece of information from a listbox A to listbox B?
if yes, then does anybody know a link where I can learn enough to make this work?
I have seen huge book on Ajax but I don't have that time.

Thank you!
Carl Tawn

You don't need to know AJAX specifically. As long as you have the AJAX toolkit referenced from your project then you only really need to drop your controls into an AJAX UpdatePanel; the IDE code generator will plumb in all the background stuff for you.
Your help has saved me hundreds of hours of internet surfing.
fblack61
ASKER CERTIFIED SOLUTION
guru_sami

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
akohan

ASKER


Thank you all!
Carl Tawn

Erm, my initial comment answered the original question. The rest of the stuff was outside of the original remit.
akohan

ASKER

Sorry, I have been out of town and busy with unexpected things ... may I choose an answer?
I apologize all for being late. Currently (happens sometimes) I don't see any button on page to choose one or more answers.


Regards.
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Carl Tawn

In that case hit the "Object" button and post a comment letting the moderators know what you would like to do.
akohan

ASKER

Let me assign a score.
akohan

ASKER
Thanks to all.
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes