HOW TO USE DROPDOWNLIST DYNAMICALLY USING AJAX

Ankit Singh

Total Post:341

Points:2389
Posted by  Ankit Singh
 551  View(s)
Ratings:
Rate this:
I want to use DropDownList Dynamically Using Ajax in asp.net please help me
  1. aditya kumar Patel

    Post:254

    Points:1810
    Re: How to Use DropDownList Dynamically Using Ajax

    HTML dropdown list statically is very easy. It is done directly using a “select” tag , but when we have a requirement to add the data in HTML dropdownlist dynamically then the things change. At that time we must load the data from the database.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UsingAjaxDropDown.aspx.cs" Inherits="Forumasp.UsingAjaxDropDown" %>

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
         <script src="Scripts/jquery-2.1.4.js"></script>
    </head>
    <body>
         <script>
             $(function () {
                 $.ajax({
                     type: "POST",                
                     url: "UsingAjaxDropDown.aspx/GetData",
                     data: {},
                     contentType: "application/json; charset=utf-8",
                     dataType: "json",
                     asnyc: false,               
                     success: function (data) {
                         var result = data['d'];
                         for (var i = 0; i < result.length; i++) {
                             console.log(result[i].Emp_Name);
                             var opt = new Option(result[i].Emp_Name);
                             $("#opemp").append(opt);
                         }

                     }
                 })
             });
            </script>
        <form id="form1" runat="server">
        <div>
         <div> 
                <label>Select Employee :</label> 
            </div> 
            <div> 
                <select class="form-control" id="opemp" style="width:200px;"> 
                    <option selected="selected">Select</option> 
                </select> 
            </div> 
        </div>
        </form>
    </body>
    </html>

    using System;
    using System.Collections.Generic;
    using System.Configuration;
    using System.Data;
    using System.Data.SqlClient;
    using System.Linq;
    using System.Web;
    using System.Web.Services;
    using System.Web.UI;
    using System.Web.UI.WebControls;

    namespace Forumasp
    {
        public partial class UsingAjaxDropDown : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {

            }

            [WebMethod]
            public static List<Employee> GetData()
            {
                List<Employee> Emp = new List<Employee>();
                DataTable dt = new DataTable();
                string constr = ConfigurationManager.ConnectionStrings["forumConnectionString"].ToString(); // connection string
                SqlConnection con = new SqlConnection(constr);
                con.Open();
                SqlCommand com = new SqlCommand("select *from Employee", con); // table name
                SqlDataAdapter da = new SqlDataAdapter(com);
                DataSet ds = new DataSet();
                da.Fill(ds);
                dt = ds.Tables[0];
                Emp = (from DataRow row in dt.Rows

                       select new Employee
                       {
                           Emp_ID = Convert.ToInt32(row["Emp_ID"]),
                           Emp_Name = row["Emp_Name"].ToString(),
                           Emp_Sal =Convert.ToDecimal( row["Emp_Sal"])

                       }).ToList();
                return Emp;
            }
        }


        public class Employee
        {
            public int Emp_ID { get; set; }
            public string Emp_Name { get; set; }
            public decimal Emp_Sal { get; set; }
        }
    }

     

     

      Modified On Nov-26-2015 11:01:41 PM

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!