Introduction
This article will describe how to add items to a dropdown using AJAX.
Background
I have used AjaxPro2.dll here and C# as the language. In the Value text box, type the value and press the
Save button. The value will be saved in a SQL Server table and then retrieved from it and populated in the dropdown with out postback.
Using the code
Download the source code from the link above. Create a table in SQL Server named testing with the following fields: ID, Name.
ID as identity Int
, and Name varchar(50)
.
In the web.config file, inlude the name of the database in which you created the table named testing.
Run the application.
namespace MyAjaxSample
{
public partial class Testing :System.Web.UI.Page
{
public static string connectionString =
(string)ConfigurationManager.AppSettings["ConnectionString"];
public DataSet ds = new DataSet();
DBClass MyClass = new DBClass();
public SqlDataAdapter ObjSDA;
public SqlCommand sc;
protected void Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(Testing));
if (!IsPostBack)
{
SqlConnection myConnection = new SqlConnection(connectionString);
ObjSDA = new SqlDataAdapter("Select * from Testing", myConnection);
ObjSDA.Fill(ds);
DropDownList1.DataSource = ds;
DropDownList1.DataTextField = "Name";
DropDownList1.DataValueField = "ID";
DropDownList1.DataBind();
DropDownList1.Items.Add("--Select table--");
DropDownList1.SelectedIndex = DropDownList1.Items.Count - 1;
}
}
[AjaxPro.AjaxMethod]
public DataSet Inserting(string Name)
{
SqlConnection myConnection = new SqlConnection(connectionString);
string strQuery = "Insert into Testing Values('" + Name + "')";
int res = MyClass.ExecuteQry(strQuery);
ObjSDA = new SqlDataAdapter("Select * from Testing", myConnection);
ObjSDA.Fill(ds);
return ds;
}
}
}
In the script side, you add the following code:
<script language="javascript">
function Inserting()
{
if(document.getElementById("TextBox2").value == "")
{
alert('Enter the name');
}
else
{
var name = document.getElementById("TextBox2").value;
MyAjaxSample.Testing.Inserting(name,InsertData_callback);
}
}
function InsertData_callback(response)
{
if (response != null && response.value != null)
{
var List = document.getElementById("DropDownList1");
List.options.length = 0;
for (var i = 0; i < response.value.Tables[0].Rows.length; ++i)
{
List.options[List.options.length] =
new Option(response.value.Tables[0].Rows[i].Name,
response.value.Tables[0].Rows[i].ID);
}
document.getElementById("TextBox2").value ="";
}
}
</script>
Here is the database class:
namespace Ganesh
{
public class DBClass
{
SqlConnection ObjCon =
new SqlConnection(
ConfigurationManager.AppSettings["ConnectionString"]);
public SqlCommand sc;
public SqlDataAdapter sda;
public SqlDataReader sdr;
public DataSet ds;
public int res;
public DBClass()
{
}
public int ExecuteQry(string qry)
{
if (ObjCon.State == ConnectionState.Open) ObjCon.Close();
ObjCon.Open();
sc = new SqlCommand(qry, ObjCon);
int res = sc.ExecuteNonQuery();
ObjCon.Close();
return res;
}
}
Try this and let me know me your suggestions. Thanks.