Displaying user details using ModalPopupExtender

Kasarlaravi
Posted by in ASP.NET category on for Intermediate level | Points: 250 | Views : 12394 red flag
Rating: 5 out of 5  
 1 vote(s)

ModalPopupExtender is used to open a pop-up or to open a separate ASP.NET page as a pop-up


Introduction


ModalPopupExtender is used to open a pop-up or to open a separate ASP.NET page as a pop-up.
In this example , we will know displaying individual user details using ModalPopupExtender

If you want to use ModalPopupExtender, your website should have ajax controls enabled
Add the below code to  register the Ajax control assembly (make sure the that AjaxControlToolkit.dll file exists in your website



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


Please place the script manager tag in your form where you are going to use ModalPopupExtender

<asp:ScriptManager ID="ScriptManager1" runat="server">    </asp:ScriptManager>


Using the code


Now place the following code

<cc1:ModalPopupExtender id="viewProfile" runat="server"  Enabled="true"    TargetControlID="PopUpSpan" PopupControlID="divViewPro"     DropShadow="false" Drag="True" Animations="" CancelControlID="viewProClose" BackgroundCssClass="d-overlay2"/>


Place the below HTML code to display user in  grid

<asp:GridView runat="server" ID="grdPublicDir" AllowPaging="True"                       AllowSorting="True" AutoGenerateColumns="False" CssClass ="listing-table"   Width="100%"   GridLines="None"EmptyDataText="No Records Found"onrowcommand="grdPublicDir_RowCommand" >       <RowStyle/><EmptyDataRowStyle Font-Bold="True" ForeColor="Red" HorizontalAlign="Center" />

  <Columns>    

 <asp:TemplateField HeaderText="">                      

      <ItemTemplate

            <asp:Image ID="imgProfile" ImageUrl=”images/no-image.jpeg” Width="45px" Height="45px" runat="server" />

          </ItemTemplate>

         <ItemStyle Width="7%"/>

   </asp:TemplateField>                                      

 <asp:TemplateField HeaderText="Name" SortExpression="LastName">

     <ItemTemplate>

         <asp:LinkButton ID="lblLname" runat="server" CommandName="ViewProfile" CommandArgument='<%# Eval("id") %>'  Text='<%# Eval("FullName")' Font-Bold="True" CssClass="pink f-size14"></asp:LinkButton>  <br /><asp:LinkButton ID="lbtnView" CommandArgument='<%# Eval("id") %>' CommandName="ViewProfile" runat="server">View&nbsp;Profile</asp:LinkButton>

        </ItemTemplate>

       <ItemStyle Width="20%" />

     </asp:TemplateField>             

  <asp:TemplateField HeaderText="City" SortExpression="City">

        <ItemTemplate>

           <asp:Label ID="lblCity" runat="server" Text='<%#  Eval("City")%>'> <asp:Label>    </ItemTemplate> <ItemStyle Width="16%" />

</asp:TemplateField>                                           

<asp:TemplateField HeaderText="State" SortExpression="State" >

      <ItemTemplate>

  <%# Convert.ToInt32(Eval("State")) == 0 ? "" : Eval("StateName")%>

    </ItemTemplate>  <ItemStyle Width="14%"/> </asp:TemplateField>

  <asp:TemplateField>

<HeaderTemplate > <asp:Label Text="Zip" runat="server" CssClass="pink"></asp:Label>   </HeaderTemplate>

 <ItemTemplate> <%# Convert.ToString(Eval("Zipcode")) == "" ? "Not Specified" : Eval("Zipcode")%>

   </ItemTemplate>

  <ItemStyle Width="12%"/>

 </asp:TemplateField>

  <asp:TemplateField >

  <HeaderTemplate >

       <asp:Label ID="Label1" Text="Phone" runat="server" CssClass="pink"></asp:Label>

    </HeaderTemplate>

  <ItemTemplate>

      <%# Convert.ToString(Eval("Phoneno")) == "" ? "Not Specified" : Eval("Phoneno")%>

    </ItemTemplate>

    <ItemStyle Width="12%"/>

  </asp:TemplateField>

  </Columns><PagerStyle  HorizontalAlign="Right" />

 </asp:GridView>

HTMl code for display popup:

<div id="divViewPro"  runat="server" class="ModalWindow" style="display:none;" ><span id="PopUpSpan" runat="server" style="display:none;"></span>

<div class="popUpclose"><a runat="server" id="viewProClose"> <img src="images/zoom/closebox.png" /> </a></div>

//Table with your controls to display user details

</div>



Server Side Code:
Call the below function (not exactly ) to fill the grid control

  protected void GetUsers ()    {

        DataTable dt;

        dt = Users.getUsers (1);

        DataView dv = dt.DefaultView;

  grdPublicDir.DataSource = dv;

        grdPublicDir.DataBind();

    }

Below function(not exactly)executes when user hits view profile link

protected void grdPublicDir_RowCommand(object sender, GridViewCommandEventArgs e)    {

        if (e.CommandName == "ViewProfile")        {

           ProfileInfo(Convert.ToInt32(e.CommandArgument.ToString()));

           viewProfile.Show();         

        }

    }

  protected void ProfileInfo(int proID)    {

        try        {

            DataTable dt = Validateuser.getprofile(proID);

            if (dt.Rows.Count > 0)            {

//Code to assign values to controls               

}

        }

        catch (Exception ex)        {

 

        }

  }

 





Conclusion:

If we want to implement ModalPopupExtender we need to know it’s properties

ModalPopupExtender Control Properties:

  • TargetControlID - The ID of the element that activates the modal popup
  • PopupControlID - The ID of the element to display as a modal popup
  • BackgroundCssClass - The CSS class to apply to the background when the modal popup is displayed
  • DropShadow - True to automatically add a drop-shadow to the modal popup
  • OkControlID - The ID of the element that dismisses the modal popup
  • OnOkScript - Script to run when the modal popup is dismissed with the OkControlID
  • CancelControlID - The ID of the element that cancels the modal popup
  • OnCancelScript - Script to run when the modal popup is dismissed with the CancelControlID
  • PopupDragHandleControlID - The ID of the embedded element that contains the popup header/title which will be used as a drag handle
  • X - The X coordinate of the top/left corner of the modal popup (the popup will be centered horizontally if not specified)
  • Y - The Y coordinate of the top/left corner of the modal popup (the popup will be centered vertically if not specified)
  • RepositionMode - The setting that determines if the popup needs to be repositioned when the window is resized or scrolled.

Reference

http://www.asp.net/ajaxlibrary/AjaxControlToolkitSampleSite/modalpopup/modalpopup.aspx


Page copy protected against web site content infringement by Copyscape

About the Author

Kasarlaravi
Full Name: ravi kasarla
Member Level: Starter
Member Status: Member
Member Since: 6/30/2011 7:08:03 AM
Country: India
Ravi Kasarla
http://www.dotnetfunda.com
HI , i am currently working for oztek software pvt ltd as a web developer.i am having 1.5 years experience on .net frame work and php.

Login to vote for this post.

Comments or Responses

Posted by: CS1401 on: 9/15/2011 | Points: 25
hi ravi.. U didnt specified the correct source you taken here post it with your article..

http://mattberseth.com/blog/2008/04/masterdetail_with_the_gridview.html
Posted by: Kasarlaravi on: 9/15/2011 | Points: 25
@CS1401, i didnt refer this url ever before.......

Login to post response

Comment using Facebook(Author doesn't get notification)