Home > DeveloperSection > Forums > How to Use DropDownList Dynamically Using Ajax
Ankit Singh

Total Post:341

Points:2389
Posted on    November-26-2015 10:58 PM

 ASP.Net ASP.Net  AJAX  JQuery 
Ratings:


 1 Reply(s)
 307  View(s)
Rate this:
I want to use DropDownList Dynamically Using Ajax in asp.net please help me


aditya kumar Patel

Total Post:250

Points:1782
Posted on    November-26-2015 11:00 PM

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

Don't want to miss updates? Please click the below button!

Follow MindStick