We help IT Professionals succeed at work.

How to work with Web Controls in ASP.NET?

akohan
akohan asked
on
387 Views
Last Modified: 2012-05-10
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
Comment
Watch Question

Carl TawnSenior Systems and Integration Developer
CERTIFIED EXPERT

Commented:
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.
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

Author

Commented:


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

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?

Author

Commented:

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 TawnSenior Systems and Integration Developer
CERTIFIED EXPERT

Commented:
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.
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.

Author

Commented:

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 TawnSenior Systems and Integration Developer
CERTIFIED EXPERT

Commented:
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.
Top Expert 2013
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:


Thank you all!
Carl TawnSenior Systems and Integration Developer
CERTIFIED EXPERT

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

Author

Commented:

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.
Carl TawnSenior Systems and Integration Developer
CERTIFIED EXPERT

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

Author

Commented:

Let me assign a score.

Author

Commented:
Thanks to all.
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.