Search code examples
asp.netevent-handlingcheckboxlist

Creating an event handler for a submit button in ASP.NET


I've created a web form which contains different checkbox lists, then I created a submit button. How can I write an event handler in the button so that it shows a different result for different options? For example: if the user checked "apple" and "banana" from checkboxList1 and "Lettuce" from checkboxList3 then pressed the button, the result would appear in a new page, let's say: result= vegetarian.

PS: I'm using ASP.NET in Visual Studio 2008

I tried to look it up on Youtube but I didn't find anything


Solution

  • So, say this markup:

    <h4>Pizzia Toppings</h4>
    
    <div style="float:left;border:solid 1px;padding:8px">
        <asp:CheckBoxList ID="FoodGroup1" runat="server">
            <asp:ListItem>Green Peppers</asp:ListItem>
            <asp:ListItem>Onions</asp:ListItem>
            <asp:ListItem>Mushrooms</asp:ListItem>
        </asp:CheckBoxList>
    </div>
    
    <div style="float:left;border:solid 1px;padding:8px;margin-left:20px">
        <asp:CheckBoxList ID="FoodGroup2" runat="server">
            <asp:ListItem>Red Peppers</asp:ListItem>
            <asp:ListItem>Tomatos (fresh)</asp:ListItem>
            <asp:ListItem>Spinach</asp:ListItem>
        </asp:CheckBoxList>
    </div>
    
    <div style="float:left;width:200px;border:solid 1px;padding:8px;margin-left:20px">
        <asp:CheckBoxList ID="FoodGroup3" runat="server">
            <asp:ListItem>Ham</asp:ListItem>
            <asp:ListItem>Pepperoni</asp:ListItem>
            <asp:ListItem>Ground Beef</asp:ListItem>
            <asp:ListItem>Salami</asp:ListItem>
        </asp:CheckBoxList>
    </div>
    
    <div style="clear:both;height:15px"></div>
    
    <asp:Button ID="Button1" runat="server" 
        Text="Submit" CssClass="btn"
        OnClick="Button1_Click" />
    

    And then the code for this button:

    Protected Sub Button1_Click(sender As Object, e As EventArgs)
    
        Dim sFoodType As String = ""
    
        ' check food group 1 (Vegatarin)
        For Each MyChoice As ListItem In FoodGroup1.Items
            If MyChoice.Selected Then
                sFoodType = "Vegetarian"
            End If
        Next
    
        ' check food group 2 (Vegatarin)
        For Each MyChoice As ListItem In FoodGroup2.Items
            If MyChoice.Selected Then
                sFoodType = "Vegetarian"
            End If
        Next
        ' check food group 3 (Meats)
        For Each MyChoice As ListItem In FoodGroup3.Items
            If MyChoice.Selected Then
                sFoodType = "Non Vegetarian"
            End If
        Next
    
        ' save this result, and then jump to next page
        Session("FoodType") = sFoodType
        Response.Redirect("FoodTypeResult.aspx")
    
    End Sub
    

    And on the next page we navigate to we have this markup:

            <h3>Food type choosen</h3>
            <asp:Label ID="Label1" runat="server" Font-Size="Large">
    
            </asp:Label>
    

    And code for that 2nd page to show the food group type:

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    
        If Not IsPostBack Then
            Label1.Text = Session("FoodType")
        End If
    
    End Sub
    

    So, the result is this:

    enter image description here

    So, to create the "event" for the button? You can type in the markup, or just double click on the button, do so should jump you to code behind for the given button, and thus a event will have been created for that one button.