dropdown binding with jquery:-
J query:- J query always work asynchronous mode so you can async condition is false
example:- async: false,
database code:-
create database Jquerydropdownlist
use Jquerydropdownlist
create table Country
(
cid int primary key identity(1,1),
cname varchar(50)
)
insert into Country(cname) values('India'),('USA'),('Canada'),('Japan')
select * from Country
create proc usp_country_get
as
begin
select * from Country
end
drop table Employee
create table Employee
(
Empid int primary key identity(1,1),
Name varchar(50),
Country int,
Age int,
Address varchar(50)
)
select * from Employee
Insert procedure:-
create proc usp_employee_insert
@Name varchar(50),
@Country int,
@Age int,
@Address varchar(50)
as
begin
insert into Employee(Name,Country,Age,Address)values(@Name,@Country,@Age,@Address)
end
select * from Employee
How to join two table:-
How to create get data procedure:-
create proc usp_employee_get
as
begin
select Employee.*, country.* from Employee inner join Country on Employee.Country=Country.cid
end
Aspx code:-
How to bind dropdown in asp.net using jquery:-
aspx page coding-
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Registration.aspx.cs" Inherits="Jquerydropdownlist.Registration" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
Country_bind();
Data_bind();
});
function Country_bind()
{
$.ajax({
url: 'Registration.aspx/Get_Country',
type: 'post',
contentType: 'application/json;charset=utf-8',
datatype: 'json',
data: "{}",
async: false,
success: function (ds) {
ds = JSON.parse(ds.d);
$("#tbl").find("td:gt(0)").remove();
for (var i = 0; i < ds.length; i++)
{
$("#ddlcountry").append($('<option/>').attr("value", ds[i].cid).text(ds[i].cname));
}
},
error: function () {
alert('Get Country Error!!');
}
});
}
function Savedata() {
$.ajax({
url: 'Registration.aspx/Insertdata',
type: 'post',
contentType: 'application/json;charset=utf-8',
datatype: 'json',
data: "{A:'" + $("#Textname").val() + "',B:'" + $("#ddlcountry").val() + "',C:'" + $("#Textage").val() + "',D:'" + $("#Textaddress").val() + "'}",
async: false,
success: function () {
alert('Insert Successfull !!')
},
error: function () {
alert('Insert Error!!');
}
});
}
function Data_bind() {
$.ajax({
url: 'Registration.aspx/Getdata',
type: 'post',
contentType: 'application/json;charset=utf-8',
datatype: 'json',
data: "{}",
async: false,
success: function (ds) {
ds = JSON.parse(ds.d);
$("#tbl").find("tr:gt(0)").remove();
for (var i = 0; i < ds.length; i++)
{
$("#tbl").append('<tr> <td>' + ds[i].Name + '</td> <td>' + ds[i].cname + '</td> <td>' + ds[i].Age + '</td> <td>' + ds[i].Address + '</td> </tr>');
}
},
error: function () {
alert('databind error !!');
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>Name:</td>
<td><input type="text" id="Textname" /></td>
</tr>
<tr>
<td>Country:</td>
<td>
<select id="ddlcountry">
<option value="0">--select--</option>
</select>
</td>
</tr>
<tr>
<td>Age</td>
<td><input type="text" id="Textage" /></td>
</tr>
<tr>
<td>Address:</td>
<td><input type="text" id="Textaddress" /></td>
</tr>
<tr>
<td></td>
<td><input type="button" id="btnsave" value="Save" onclick="Savedata()" /></td>
</tr>
</table>
<table id="tbl" border="1" style="background-color:pink">
<tr style="background-color:maroon;color:white">
<th>Name</th>
<th>Country</th>
<th>Age</th>
<th>Address</th>
<th></th>
</tr>
</table>
</div>
</form>
</body>
</html>
.CS page coding :-
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Web.Services;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
namespace Jquerydropdownlist
{
public partial class Registration : System.Web.UI.Page
{
static SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString);
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string Get_Country()
{
string dt = "";
con.Open();
SqlCommand cmd = new SqlCommand("usp_country_get", con);
cmd.CommandType = CommandType.StoredProcedure;
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
con.Close();
if (ds.Tables[0].Rows.Count > 0)
{
dt = JsonConvert.SerializeObject(ds.Tables[0]);
}
return dt;
}
[WebMethod]
public static void Insertdata(string A,int B,int C,string D)
{
con.Open();
SqlCommand cmd = new SqlCommand("usp_employee_insert", con);
cmd.CommandType = CommandType.StoredProcedure;
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@Name", A);
cmd.Parameters.AddWithValue("@Country", B);
cmd.Parameters.AddWithValue("@Age", C);
cmd.Parameters.AddWithValue("@Address", D);
cmd.ExecuteNonQuery();
con.Close();
}
[WebMethod]
public static string Getdata()
{
string dt = "";
con.Open();
SqlCommand cmd = new SqlCommand("usp_employee_get", con);
cmd.CommandType = CommandType.StoredProcedure;
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
con.Close();
if(ds.Tables[0].Rows.Count>0)
{
dt=JsonConvert.SerializeObject(ds.Tables[0]);
}
return dt;
}
}
}
Web.config file code:-
<?xml version="1.0"?>
<!--
For more information on how to configure your ASP.NET application, please visit
http://go.microsoft.com/fwlink/?LinkId=169433
-->
<configuration>
<system.web>
<compilation debug="true" targetFramework="4.5" />
<httpRuntime targetFramework="4.5" />
</system.web>
<connectionStrings>
<add name="DBCS" connectionString="data source=Shiva;integrated security=true;initial catalog=Jquerydropdownlist"/>
</connectionStrings>
</configuration>
1 comment:
Really sir u r rock
Post a Comment