Wednesday, 29 May 2013

How to access server side Listbox using JavaScript in asp.net

How to access server side Listbox using JavaScript in asp.net




Step 1 : First create your website in asp.net and create one .aspx page .

Step2: Open .aspx page and drag and drop ListBox contol

<asp:ListBox ID="lbScriptAccess" runat="server" Height="200px" Width="350px" ></asp:ListBox >

Step 3:Add Asp:Button control on page to handle javascript

<asp:Button ID="Button1" runat="server" Text="Add Item" OnClientClick="return AddItem();" />

Step 4 : Add javascript function to fill Listbox

<script type="text/javascript">
        function AddItem() {
            var list = document.getElementById("<%=lbScriptAccess.ClientID %>");
            var option1 = document.createElement("option");
            option1.text ="Value" + list.length;
            option1.value = list.length;
            list.options.add(option1);
            return false;
        }
    </script>

Step 5 : Just run your page and and click on asp:button  each and every click will add one record to drop down list and add text and value property.


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JavaListBoxControl.aspx.cs" Inherits="JavaListBoxControl" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>List Box Example</title>
    <script type="text/javascript">
        function AddItem() {
            var list = document.getElementById("<%=lbScriptAccess.ClientID %>");
            var option1 = document.createElement("option");
            option1.text ="Value" + list.length;
            option1.value = list.length;
            list.options.add(option1);
            return false;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        Drop Down :
        <asp:ListBox ID=" lbScriptAccess " runat="server" Height="200px" Width="350px" ></asp:ListBox >
        <br />
  <asp:Button ID="Button1" runat="server" Text="Add Item" OnClientClick="return AddItem();" />
    </form>
</body>
</html>

No comments:

Post a Comment

Thank you for your interest .