How to use ModelPopupExtender Control in website

Introduction :- The ModelPopupExtender control enables you to display the simple text of the page content of the user by displaying a model pop-up window.When the pop-up window appears,the remainder of the web page grays out,preventing you from interacting with page.However, at that time, you can interact with the pop-up window contents.This (ModelPopupExtender) popup is fired by onclick event on the target controls.
There are some properties of ModelPopupExtender Control as given below:-

  • TargetControlIID :- It sets the ID of the control that activates the model-pop-up.
  • PopupControlIID :- It sets the ID of the control that is displayed as a model pop-up.
  • DropShadow:- It determines whether the model pop-up has a drop shadow effect or not.
  • OkControlId :- It sets the Id of the control that dismisses the model pop-up.You can use it.
  • OnOkScript :- It specifies the script to run when the model pop-up dismissed the OkControlId property.
  • CancelControlID:- It sets the ID of the control that cancel the model pop-up.
  • OnCancelScript:-It specifies the script to run when the model pop-up dismissed the OnCancelScript property.
  • BackgroundCssClass:- It sets the Css class that be applied to the background when the model model pop-up has displayed.
  • X :- It Sets the X coordinate at the top/left corner of the model pop-up.
  • Y:- It sets the Y coordinate at the top/left corner of the model pop-up. 
  • RepositionMode :- It sets the reposition mode that determines if the model pop-up needs to be repositioned when the window is resized or scrolled. 
There are some steps to implement this whole concepts as given below:-

Step 1 :- First open your visual studio --> File --> New -->Website -->Select ASP.NET Empty Website -->OK --> Add New Page(Default.aspx) --> drag and drop ToolkitScriptManager Labels, Buttons and Radio Button controls as shown below:- 

Step 2 :- Now Go Design View and drag and drop ModelPopupExtender control. Now sets its properties as shown below:-

Step 3 :- See all design codes :-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">
<head runat="server">
    <form id="form1" runat="server">
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        <asp:Button ID="Button1" runat="server" 
            style="font-weight: 700; background-color: #FF99FF" Text="Go Here" 
            Width="162px" />
        <br />
        <asp:Label ID="Label7" runat="server" style="font-weight: 700; color: #FF0000" 
        <br />
        <asp:Panel ID="Panel1" runat="server" Height="193px" Width="907px">
            <span class="style1">Select Your Favorite Company...</span><br /> Microsoft
            <asp:RadioButton ID="RadioButton1" runat="server" GroupName="ram" />
            <br />
            <asp:Label ID="Label2" runat="server" Text="Google"></asp:Label>
            <asp:RadioButton ID="RadioButton2" runat="server" GroupName="ram" />
            <br />
            <asp:Label ID="Label3" runat="server" Text="Facebook"></asp:Label>
            <asp:RadioButton ID="RadioButton3" runat="server" GroupName="ram" />
            <br />
            <asp:Label ID="Label4" runat="server" Text="Yahoo"></asp:Label>
            <asp:RadioButton ID="RadioButton4" runat="server" GroupName="ram" />
            <br />
            <asp:Label ID="Label5" runat="server" Text="Adobe"></asp:Label>
            <asp:RadioButton ID="RadioButton5" runat="server" GroupName="ram" />
            <br />
            <asp:Label ID="Label6" runat="server" Text="Tcs"></asp:Label>
            <asp:RadioButton ID="RadioButton6" runat="server" GroupName="ram" />
            <br />
            <asp:Label ID="Wipro" runat="server" Text="Wipro"></asp:Label>
            <asp:RadioButton ID="RadioButton7" runat="server" GroupName="ram" />
            <br />
            <asp:Button ID="Button2" runat="server" 
                style="font-weight: 700; background-color: #99CCFF" Text="Submit" 
                Width="115px" onclick="Button2_Click" />
            <br />
        <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button1" 
Step 4 :- Now double click on Go Here Button --> write the c# codes as given below:-
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
    protected void Page_Load(object sender, EventArgs e)

    protected void Button2_Click(object sender, EventArgs e)
        if (RadioButton1.Checked)
            Label7.Text = "You have Selected Microsoft..thank you..";
        else if (RadioButton2.Checked)
            Label7.Text = "You have Selected Google..thank you..";
        else if (RadioButton3.Checked)
            Label7.Text = "You have Selected Facebook..thank you..";
        else if (RadioButton4.Checked)
            Label7.Text = "You have Selected Yahoo..thank you..";
        else if (RadioButton5.Checked)
            Label7.Text = "You have Selected Adobe..thank you..";
        else if (RadioButton6.Checked)
            Label7.Text = "You have Selected TCS..thank you..";
        else if (RadioButton7.Checked)
            Label7.Text = "You have Selected Wipro..thank you..";
            Label7.Text = "You have not selected any company..thank you..";

Step 5 :- Now Run the application (press F5)--> you will see following output as shown below:-

For More...
  1. Learn more C# concepts
  2. Learn concepts
  3. Learn SQL Server Concepts
  4. Learn Ajax Concepts
  5. Learn xml concepts
  6. Learn interview Questions
Download Whole Attached File


Post a Comment

Powered by Blogger.