Change Dynamic controls With AJAX In ASP.NET Using VB.NET

In this article you will learn that how can you create and change dynamic controls.
  • 3572
 

Introduction

In this article I am explaining that how we can use AJAX to dynamically interact with controls, Without using PostBack or refreshing the page. You can also dynamically create and alter controls using AJAX. You can achieve this simply, but the principle can be applied to any control, giving you powerful result. Here we are simply creating three custom controls and use a dropdown list to change these controls. We will create three web controls:RedControl.ascx, GreenControl.ascx, YellowControl.ascx. We will also add ScriptManager, UpdatePanel, DropDownList and a Placeholder control for implementation.



Getting Started

  • Simply create a new ASP.NET web application. 
  • Drag a ScriptManager, UpdatePanel, DropDownList and a PlaceHolder control on your web page. Your page will look like below.

    Ajaxcontrol1.gif
     
  • After adding controls your Default.aspx page will look like below.

    <%@ Page Title="Home Page" Language="vb" MasterPageFile="~/Site.Master" AutoEventWireup="false"
    CodeBehind="Default.aspx.vb" Inherits="AJAXControls._Default" %>
    <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    </
    asp:Content>
    <
    asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <
    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>Yellow</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>
    </
    asp:Content>
     
  • All RedControl.ascx, GreenControl.ascx, YellowControl.ascx will contain the similar code. As given below.

    <%@ Control Language="vb" AutoEventWireup="false" CodeBehind="RedControl.ascx.vb"
    Inherits="AJAXControls.RedControl" %>
    <div style="background-color: Red; width: 200px; height: 200px">
    </
    div>
     
  • Then attach the below code in code behind file of the web page.

       
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            SetColor()
       
    End Sub
        Private Sub SetColor()
           
    Dim c As Control = Page.LoadControl(ddColor.SelectedValue & "Control.ascx")
            placeHolder.Controls.Clear()
            placeHolder.Controls.Add(c)
       
    End Sub
        Protected Sub ddColor_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs
        Handles ddColor.SelectedIndexChanged
            SetColor()
       
    End Sub
     
  • Now run your application.

Output:-

Ajaxcontrol2.gif


Ajaxcontrol3.gif


Ajaxcontrol4.gif

Summary

In this article you learned that how to create and change dynamic Control with AJAX. 

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.