|
| Navigator:
Home - Tutorials - AJAX - Creating & Changing Dynamic Controls using AJAX & C# |
 |
This tutorial shows how we can use AJAX to dynamically interact with controls, without using postback or refreshing the page. C# version.
This tutorial will demonstrate how we can dynamically create and alter controls using AJAX. This tutorial is very simple, but the principle can be applied to any control, giving you powerful results.
In the tutorial, we will simply create 3 custom controls and use a dropdown list to change these controls.
We create three WebControls: BlueControl.ascx, GreenControl.ascx and RedControl.ascx all with similar code as below:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="BlueControl.ascx.cs" Inherits="BlueControl" %>
<div style="background-color: Blue; width: 200px; height: 200px">
</div> |
We moved our web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.
On Default.aspx, we add a ScriptManager, UpdatePanel, DropDownList and a PlaceHolder:
<form id="frmMain" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" /> <h2>Using AJAX to Dynamically Create Controls</h2> <div>
<table width="500">
<tr valign="top">
<td style="width: 150px">
<span style="font-size: 10pt">Choose Color:<br /> </span> <asp:DropDownList ID="ddColor" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddColor_SelectedIndexChanged" Width="100px">
<asp:ListItem Selected="True">Red</asp:ListItem> <asp:ListItem>Blue</asp:ListItem> <asp:ListItem>Green</asp:ListItem> </asp:DropDownList></td> <td>
<asp:UpdatePanel ID="updatePanel" runat="server">
<ContentTemplate>
<asp:PlaceHolder ID="placeHolder" runat="server"></asp:PlaceHolder> </ContentTemplate> <Triggers>
<asp:AsyncPostBackTrigger ControlID="ddColor" /> </Triggers> </asp:UpdatePanel> </td> </tr> </table> </div> |
We chose Server Intellect for its dedicated servers, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.
The code-behind will look something like this:
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e) {
SetColor(); } protected void ddColor_SelectedIndexChanged(object sender, EventArgs e) {
SetColor(); } private void SetColor() {
Control c = Page.LoadControl(ddColor.SelectedValue +
"Control.ascx"); placeHolder.Controls.Clear(); placeHolder.Controls.Add(c); } |
We are using Server Intellect and have found that by far, they are the most friendly, responsive, and knowledgeable support team we've ever dealt with!
Web.config will look something like this:
<?xml version="1.0"?>
<configuration>
<configSections>
<sectionGroup name="system.web.extensions" type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
<sectionGroup name="scripting" type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
<section name="scriptResourceHandler" type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/> <sectionGroup name="webServices" type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
<section name="jsonSerialization" type="System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="Everywhere"/>
<section name="profileService" type="System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/>
<section name="authenticationService" type="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/> </sectionGroup> </sectionGroup> </sectionGroup> </configSections> <system.web>
<pages>
<controls>
<add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> </controls> </pages> <!--
Set compilation debug="true" to insert debugging
symbols into the compiled page. Because this
affects performance, set this value to true only
during development. --> <compilation debug="true">
<assemblies>
<add assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> </assemblies> </compilation> <httpHandlers>
<remove verb="*" path="*.asmx"/> <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> <add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> <add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/> </httpHandlers> <httpModules>
<add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> </httpModules> </system.web> <system.web.extensions>
<scripting>
<webServices>
<!-- Uncomment this line to customize maxJsonLength and add a custom converter -->
<!-- <jsonSerialization maxJsonLength="500">
<converters>
<add name="ConvertMe" type="Acme.SubAcme.ConvertMeTypeConverter"/> </converters> </jsonSerialization> -->
<!-- Uncomment this line to enable the authentication service. Include requireSSL="true" if appropriate. -->
<!-- <authenticationService enabled="true" requireSSL = "true|false"/> -->
<!-- Uncomment these lines to enable the profile service. To allow profile properties to be retrieved
and modified in ASP.NET AJAX applications, you need to add each property name to the readAccessProperties and
writeAccessProperties attributes. -->
<!-- <profileService enabled="true"
readAccessProperties="propertyname1,propertyname2"
writeAccessProperties="propertyname1,propertyname2" /> -->
</webServices>
<!-- <scriptResourceHandler enableCompression="true" enableCaching="true" /> --> </scripting> </system.web.extensions> <system.webServer>
<validation validateIntegratedModeConfiguration="false"/> <modules>
<add name="ScriptModule" preCondition="integratedMode" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> </modules> <handlers>
<remove name="WebServiceHandlerFactory-Integrated"/> <add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> <add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> <add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> </handlers> </system.webServer> |
Looking for the VB.NET 2005 Version? Click Here! Looking for more ASP.NET Tutorials? Click Here!
|
|
|