Wednesday, March 21, 2012

Need Help with Ajax Examples

Hi..

can anybody provide a working example of using the dropdownlist and grid view control and saving the data with a button using AJAX..

please help..

The page requirements:
1) Table/Grid displays a list of states (U.S. states) with a column for the state name and a column that contains a dropdown list of the state's cities.
2) Upon selecting a city, the page will display the city name (and perhaps futher lookup some information specific to the city).

The basic ASP.NET flow here is (using 2.0 here, but works similarly in 1.1 using DataGrid):
1) Create a GridView with a bound column for state and a template column for the DropDownList
2) Create a label to display the city name upon selecting it in the DropDownList.
3) Bind the GridView to an array of state objects (could be bound to many other things as well, but keeping it simple for this example). State contains properties for Name and for Cities.
4) Hookup RowCreated event on the GridView so that we can populate the cities into the particular row's DropDownList.
5) Add postback event for getting the selected city and populating the label with it.

Here's what the aspx code looks like:

<asp:GridView ID="gvStates" AutoGenerateColumns="false"
runat="server" OnRowCreated="gvStates_RowCreated">
<Columns>
<asp:BoundField HeaderText="State" DataField="Name" />
<asp:TemplateField HeaderText="Cities">
<ItemTemplate>
<asp:DropDownList ID="ddlCities"
AutoPostBack="true" runat="server"
OnSelectedIndexChanged="ddlCities_SelectedIndexChanged">
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView
<asp:Label ID="lblCity" runat="server" Text="Label">
</asp:Label
And here's the code behind:

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
// Create states array and bind it to Grid
ArrayList states = new ArrayList();

string[] cities =
new string[] { "Portland", "Salem", "Eugene" };
State state = new State("OR", cities);
states.Add(state);
cities =
new string[] { "Seattle", "Tacoma", "Olympia" };
state = new State("WA", cities);
states.Add(state);

this.gvStates.DataSource = states;
this.gvStates.DataBind();
}
}

protected void gvStates_RowCreated(object sender,
GridViewRowEventArgs e)
{
if (!IsPostBack)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
// Bind drop down to cities
DropDownList ddl =
(DropDownList)e.Row.FindControl("ddlCities");
ddl.DataSource = ((State)e.Row.DataItem).Cities;
ddl.DataBind();
}
}
}

protected void ddlCities_SelectedIndexChanged(object sender,
EventArgs e)
{
this.lblCity.Text = ((DropDownList)sender).SelectedValue;
}

In Ajax framework,you can place them in a asp:UpdatePanel and specify asynchronous postback in the triggers of the asp:UpdatePanel.

Wish this can help you.

No comments:

Post a Comment