Archive

Archive for June, 2010

Ajax ModalPopup with Iframe Within Gridview

June 15, 2010 8 comments

Hi all,

try this example to open Ajax ModalPopup with Iframe Within Gridview for Details

In this Example i will use Northwind Database

Step1 :- Create a new Website and Add Two Pages “Orders.aspx” , “CustomerDetails.aspx”

Step2:- Add Web.Config file and add the connection String of your Database to be like that

<connectionStrings>
  <add name="NorthwindConnectionString" connectionString="Data Source=.;Initial Catalog=Northwind;Integrated Security=True" providerName="System.Data.SqlClient"/>
 </connectionStrings>

Srep3:- Open Orders.aspx and Add ScriptManager and  Gridview control and Bind it using SqlDataSource control and put them inside UpdatePanel control so your page will be like that

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Orders.aspx.cs" Inherits="Orders" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
    body, div, p, h1, h2, h3, h4, ul, li, table
    {
      margin:0;
      padding:0;
      border:none;
    }
    /*Modal Popup*/
    .modalBackground
    {
      background-color:Gray;
      filter:alpha(opacity=70);
      opacity:0.7;
    }
    .modalPopup
    {
      background-color:Gray;
      border-width:3px;
      border-style:solid;
      border-color:Gray;
      padding:3px;     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
                    DataKeyNames="OrderID" DataSourceID="SqlDataSource1" AllowPaging="True">
                    <Columns>
                        <asp:BoundField DataField="OrderID" HeaderText="OrderID" InsertVisible="False"
                            ReadOnly="True" SortExpression="OrderID" />
                        <asp:BoundField DataField="OrderDate" DataFormatString="{0:dd/MM/yyyy}"
                            HeaderText="OrderDate" SortExpression="OrderDate" />
                        <asp:BoundField DataField="RequiredDate" DataFormatString="{0:dd/MM/yyyy}"
                            HeaderText="RequiredDate" SortExpression="RequiredDate" />
                        <asp:BoundField DataField="ShippedDate" DataFormatString="{0:dd/MM/yyyy}"
                            HeaderText="ShippedDate" SortExpression="ShippedDate" />
                        <asp:BoundField DataField="ShipCity" HeaderText="ShipCity"
                            SortExpression="ShipCity" />
                        <asp:BoundField DataField="ShipCountry" HeaderText="ShipCountry"
                            SortExpression="ShipCountry" />
                        <asp:TemplateField HeaderText="CustomerID" SortExpression="CustomerID">
                            <ItemTemplate>
                                <asp:LinkButton ID="lbtn_Details" runat="server" Text="Show Customers"></asp:LinkButton>
                                <cc1:ModalPopupExtender ID="mdl1" runat="server" TargetControlID="lbtn_Details" PopupControlID="GVMP"
                                            BackgroundCssClass="modalBackground" OkControlID="OkButton"
                                            CancelControlID="CancelButton"/>
                                <asp:Panel ID="GVMP" runat="server" CssClass="modalPopup" style='display:none;'>
                                 <iframe src="CustomerDetails.aspx?CustomerID=<%# Eval("CustomerID") %>" width="60%" height="100%" scrolling="auto"></iframe><br /><br />
                                    <asp:Button ID="OkButton" runat="server" Text="OK" Width="50" />
                                    <asp:Button ID="CancelButton" runat="server" Text="Cancel" Width="50" />
                                </asp:Panel>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
                <asp:SqlDataSource ID="SqlDataSource1" runat="server"
                    ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                    SelectCommand="SELECT [OrderID], [CustomerID], [OrderDate], [RequiredDate], [ShippedDate], [ShipCity], [ShipCountry] FROM [Orders]">
                </asp:SqlDataSource>
            </ContentTemplate>
        </asp:UpdatePanel> 
    </form>
</body>
</html>

Step3:- Open Page CustomerDetails.aspx and add Gridview and Bind it to Customers Table and filter it with CustomerID which will be from Querystring from Orders.aspx page so your page will be like that

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CustomerDetails.aspx.cs" Inherits="CustomerDetails" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
      <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
            DataKeyNames="CustomerID" DataSourceID="SqlDataSource1">
            <Columns>
                <asp:BoundField DataField="CustomerID" HeaderText="CustomerID" ReadOnly="True"
                    SortExpression="CustomerID" />
                <asp:BoundField DataField="CompanyName" HeaderText="CompanyName"
                    SortExpression="CompanyName" />
                <asp:BoundField DataField="ContactName" HeaderText="ContactName"
                    SortExpression="ContactName" />
            </Columns>
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName] FROM [Customers] WHERE ([CustomerID] = @CustomerID)">
            <SelectParameters>
                <asp:QueryStringParameter Name="CustomerID" QueryStringField="CustomerID"
                    Type="String" />
            </SelectParameters>
        </asp:SqlDataSource>
    </form>
</body>
</html>

Hope that helps

Good Luck

Advertisements
Categories: AJAX, ASP.Net

JQuery to Show a popup message at the top of browser window

June 10, 2010 Leave a comment

Hi all ,

try this example to use JQuery to Show a popup message at the top of browser window

Download jquery-1.3.2.min.js first

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function() {
$('#message').fadeIn('slow');
$('#message a.close-notify').click(function() {
$('#message').fadeOut('slow');
return false;
});
});
</script>
<style type="text/css">
#message
{
font-family: Arial,Helvetica,sans-serif;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
z-index: 105;
text-align: center;
font-weight: bold;
font-size: 100%;
color: white;
padding: 10px 0px 10px 0px;
background-color: #8E1609;
}
#message span
{
text-align: center;
width: 95%;
float: left;
}
.close-notify
{
white-space: nowrap;
float: right;
margin-right: 10px;
color: #fff;
text-decoration: none;
border: 2px #fff solid;
padding-left: 3px;
padding-right: 3px;
}
.close-notify a
{
color: #fff;
}
</style>

<div id="message" style="display: none;">
        <span>This is test message.</span> <a href="#">X</a>
</div>

Hope this helps

Categories: ASP.Net, Javascript, Jquery

Open Popup window from Selected value from DropdownList

June 4, 2010 3 comments

Hi

try this example to Open Popup window from Selected value from DropdownList

1) Create a new website and add 2 pages Default.aspx and popup.aspx

2) In Default.aspx page add DropdownList control and add List Items to it

    Select Name :
     <asp:DropDownList ID="ddl_Names" runat="server" Width="108px" >
            <asp:ListItem Value="-1">Select</asp:ListItem>
         <asp:ListItem Value="1">Yasser</asp:ListItem>
         <asp:ListItem Value="2">Ahmed</asp:ListItem>
         <asp:ListItem Value="3">Zaid</asp:ListItem>
    </asp:DropDownList>
    <a href="#" onclick="javascript:popup();return false;" /> Show Details</a>
    </div>

and add this javascript code in the page

<script language="javascript" type="text/javascript">
    function popup()
    {
        var dd=document.getElementById('<%= ddl_Names.ClientID %>').selectedIndex;
        //alert(dd);
        var yr=document.getElementById('<%= ddl_Names.ClientID %>').options[dd].value;
        //alert(yr);
        if(yr=="-1")
            {
              alert('Select Something');
            }
        else
            {   
              window.open("popup.aspx?ID="+yr,"List","scrollbars=no,resizable=no,width=400,height=480");
            }
    }
</script>

3) In popup.aspx page you can get ID from Querstring passed from Default.aspx to this page

Hope this helps

Good Luck

Categories: ASP.Net, Javascript