How to Use DropDownList Dynamically Using Ajax

Anonymous User 2001 26 Nov 2015

I want to use DropDownList Dynamically Using Ajax in asp.net please help me

Ask by Anonymous User

Updated 26 Nov 2015

1 Answers

Anonymous User 26 Nov 2015

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; }
    }
}

Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md

forum

How to Use DropDownList Dynamically Using Ajax

Can you answer this question?

1 Answers