Showing posts with label Popup. Show all posts
Showing posts with label Popup. Show all posts

Wednesday, 23 October 2013

Open New Window as Popup with defined size on Button Click using C#

Use this Code on button click event:

ScriptManager.RegisterStartupScript(this, typeof(string), "OPEN_WINDOW", "var Mleft = (screen.width/2)-(760/2);var Mtop = (screen.height/2)-(700/2);window.open( 'popup.aspx', null, 'height=500,width=560,status=yes,toolbar=no,scrollbars=yes,menubar=no,location=no,top=\'+Mtop+\', left=\'+Mleft+\'' );", true);

Thursday, 22 August 2013

Open Ajax Modal Popup Extender in ListView ItemCommand in ASP.NET

.aspx Page Content:

Header Section:

<style type="text/css">
        .btn-sign
        {
            width: 200px;
            margin-bottom: 10px;
            margin: 0 auto;
            padding: 10px;
            border-radius: 5px;
            background: -moz-linear-gradient(center top, #00c6ff, #018eb6);
            background: -webkit-gradient(linear, left top, left bottom, from(#00c6ff), to(#018eb6));
            background: -o-linear-gradient(top, #00c6ff, #018eb6);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#00c6ff', EndColorStr='#018eb6');
            text-align: center;
            font-size: 20px;
            color: #fff;
            text-transform: uppercase;
        }
        .textbox
        {
            width: 230px;
            margin: 15px auto;
            height: 240px;
            padding-top: 25px;
            border: 1px solid Silver;
            border-radius: 5px 5px 5px 5px;
            background-color: rgb(236, 246, 217);
            box-shadow: 0px 0px 3px 2px rgb(211, 230, 175);
        }
        .btn-sign a
        {
            color: #fff;
            text-shadow: 0 1px 2px #161616;
        }
        #mask
        {
            display: none;
            background: #000;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 10;
            width: 100%;
            height: 100%;
            opacity: 0.8;
            z-index: 999;
        }
        .login-popup
        {
            display: block;
            background: #333;
            padding: 10px;
            border: 2px solid #DA9F49;
            font-size: 1.2em;
            width: 310px;
            position: fixed;
            height: 340px;
            top: 15%;
            left: 35%; /*z-index: 99999;*/
            box-shadow: 0px 0px 20px #999;
            -moz-box-shadow: 0px 0px 20px #999; /* Firefox */
            -webkit-box-shadow: 0px 0px 20px #999; /* Safari, Chrome */
            border-radius: 7px;
            -moz-border-radius: 7px; /* Firefox */
            -webkit-border-radius: 10px; /* Safari, Chrome */
        }
        .textbox label, .textboxnew label
        {
            display: block;
            padding-bottom: 7px;
            font-size: 11px;
        }
        form.signin p, form.signin span
        {
            color: #999;
            font-size: 11px;
        }
        .textbox input, .textboxnew input
        {
            background: #666666;
            border-bottom: 1px solid #333;
            border-left: 1px solid #000;
            border-right: 1px solid #333;
            border-top: 1px solid #000;
            color: #fff;
            border-radius: 3px 3px 3px 3px;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            font: 13px Arial, Helvetica, sans-serif;
            padding: 6px 6px 4px;
            width: 200px;
        }
        form.signin input:-moz-placeholder
        {
            color: #bbb;
            text-shadow: 0 0 2px #000;
        }
        form.signin input::-webkit-input-placeholder
        {
            color: #bbb;
            text-shadow: 0 0 2px #000;
        }
        .button
        {
            background: -moz-linear-gradient(center top, #f3f3f3, #dddddd);
            background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#dddddd));
            background: -o-linear-gradient(top, #f3f3f3, #dddddd);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f3f3f3', EndColorStr='#dddddd');
            border-color: #000;
            border-width: 1px;
            border-radius: 4px 4px 4px 4px;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            color: #333;
            cursor: pointer;
            display: inline-block;
            padding: 6px 6px 4px;
            margin-top: 10px;
            font: 12px;
            width: 214px;
        }
        .button:hover
        {
            background: #ddd;
        }
        .BackgroundStyle
        {
            background-color: #f3f3f3;
            filter: alpha(opacity=50);
            opacity: 0.5;
        }
    </style>


Body Section:

<ajt:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" 
        CombineScripts="True">

    </ajt:ToolkitScriptManager>
<asp:Label ID="lblmsg" runat="server" Text="" ForeColor="Red" Font-Bold="true" Font-Size="15px"></asp:Label>
        <asp:ListView ID="ListView1" runat="server" GroupItemCount="2" GroupPlaceholderID="groupPlaceHolder1"
                                          ItemPlaceholderID="itemPlaceHolder1" onitemcommand="ListView1_ItemCommand">
                                                            <LayoutTemplate>
                                                                <table>
                                                                    <asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder>
                                                                </table>
                                                            </LayoutTemplate>
                                                            <GroupTemplate>
                                                                <tr>
                                                                    <asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>
                                                                </tr>
                                                            </GroupTemplate>
                                                            <ItemTemplate>
                                                                <td>
                                                                    <table cellpadding="0" cellspacing="0" 
                                                                    style="width:450px; background-color: #FFFFFF; font-family:Calibri;
                                                                border-radius: 5px; border: solid 1px #dddddd; font-size: 9pt; color: #666666">
                                                                <tr>
                                                                <td align="left" height="20px" bgcolor="#8ebe12" style="padding-left: 7px; color: #ffffff" colspan="2">
                                                                <b>Roll No: </b>
                                                                <asp:Label ID="lblid" runat="server" Text='<%# Eval("Row_Id")%>' Visible="false"></asp:Label>
                                                                <%# Eval("RollNo")%>
                                                                </td>
                                                                </tr>
                                                                <tr>
                                                                <td height="2px"  colspan="2">
                                                                </td>
                                                                </tr>
                                                                <tr>
                                                                <td style="width:25%" align="left" valign="top">
                                                                <asp:Image ID="Image2" runat="server" Height="96px" Width="96px"
                                                                style="border:Solid 2px #8ebe12; border-radius:5px" 
                                                                ImageUrl='<%#"../RegStudent/"+Eval("Photo")%>' />
                                                                </td>
                                                                <td style="width:75%" valign="top">
                                                                <table style="width:100%; text-align:left">
                                                                <tr>
                                                                <td style="width:30%"><span style="color: Maroon"><b>Name: </b></span></td>
                                                                <td>:</td>
                                                                <td style="width:69%">
                                                                <asp:Label ID="lblname" runat="server" Text='<%# Eval("Name")%>'></asp:Label></td>
                                                                </tr>
                                                                <tr>
                                                                <td><span style="color: Maroon"><b>Class: </b></span></td>
                                                                <td>:</td>
                                                                <td>
                                                                <%# Eval("Quali1")%> ( <%# Eval("Quali2")%> )</td>
                                                                </tr>
                                                                <tr>
                                                                <td><span style="color: Maroon"><b>Father's Name: </b></span></td>
                                                                <td>:</td>
                                                                <td>
                                                                <%# Eval("FName")%></td>
                                                                </tr>
                                                                <tr>
                                                                <td><span style="color: Maroon"><b>Mobile: </b></span></td>
                                                                <td>:</td>
                                                                <td>
                                                                <%# Eval("Mob1")%></td>
                                                                </tr>
                                                                <tr>
                                                                <td></td>
                                                                <td></td>
                                                                <td align="right">
                                                                <asp:ImageButton ID="btnDetails" runat="server" ImageUrl="Admin/Image/explore.jpg" 
                                                                ToolTip="Details" CommandName="Details"/>
                                                                </td>
                                                                </tr>
                                                                </table>
                                                                </td>
                                                                </tr>
                                                                </table>
                                                                </td>
                                                            </ItemTemplate>
                                                        </asp:ListView>
      <asp:Button ID="Button1" runat="server" Text="Button" style="display:none" />                           
    <ajt:ModalPopupExtender ID="mdlpopup1" runat="server" TargetControlID="Button1" PopupControlID="pnllogin1" 
    DropShadow="true" BackgroundCssClass="BackgroundStyle" CancelControlID="ibtnclose1">
    </ajt:ModalPopupExtender>
    <asp:Panel ID="pnllogin1" runat="server" style="display:none; font-family:Calibri" DefaultButton="Button2">
    <div id="login-box" class="login-popup" style="height:360px">
        <div  style="margin-top:-26px; margin-right:-24px; text-align:right"><asp:ImageButton ID="ibtnclose1" runat="server" ImageUrl="~/img/close_pop.png"/></div>
        <div style="color:#89BD24; font-weight:bold; font-family:Calibri; font-size:18px; text-align:center; 
            margin-top:-10px; margin-bottom:10px">Student SignIn</div>
        <fieldset class="textbox" style="height:260px; text-align:left">
        <asp:Label ID="lblname" runat="server" Text="" ForeColor="Red" Font-Size="11px"></asp:Label>
            <label>
                <span>Email Id</span>
                <input id="txtemail" name="Email Id" runat="server" value="" type="text"
                    placeholder="Email Id"/>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="txtemail"
                    SetFocusOnError="true" Display="None" ValidationGroup="reguser" ErrorMessage="Plesse enter your email id" />
                <ajt:ValidatorCalloutExtender ID="ValidatorCalloutExtender7" TargetControlID="RequiredFieldValidator5"
                    runat="server" />
                <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ControlToValidate="txtemail"
                    ValidationExpression="^([a-zA-Z0-9_\-\.]+)@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$"
                    Display="None" ErrorMessage="Please enter valid EmailID" ValidationGroup="reguser"
                    SetFocusOnError="True" />
                <ajt:ValidatorCalloutExtender ID="ValidatorCalloutExtender8" runat="server" Enabled="True"
                    TargetControlID="RegularExpressionValidator2" />
            </label>
            <label>
                <span>Password</span>
             
               <input id="txtpass" runat="server" name="password" value="" type="password" placeholder="Password"/>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" ControlToValidate="txtpass"
                    SetFocusOnError="true" ValidationGroup="reguser" Display="None" ErrorMessage="Please enter password" />
                <ajt:ValidatorCalloutExtender ID="ValidatorCalloutExtender9" runat="server" TargetControlID="RequiredFieldValidator6" />
            </label>
            <br />
            <asp:Label ID="lblerror" runat="server" Text="" ForeColor="Red" Font-Size="11px"></asp:Label>
            <asp:Button ID="Button2" class="submit button" runat="server" Text="Sign in"
                BackColor="#669900" ForeColor="White" Font-Names="calibri" 
                Font-Size="14pt" Font-Bold="True" ValidationGroup="reguser" 
                onclick="Button2_Click"/>
            <br /><br />
                <a href="#" style="color: red; font-size:11px">
                    Forgot your password?</a>
        </fieldset>
    </div>

    </asp:Panel>


.cs Page Content:


        Datautility app = new Datautility();
        DataSet ds;
        protected void Page_Load(object sender, EventArgs e)
        {
            try
            {
                if (!IsPostBack)
                {
                    BindGridView();
                 }
            }
            catch (Exception ex)
            {
                Response.Write(ex.Message);
            }
        }

        private void BindGridView()
        {
            ds = app.GetDataSet("Select * from tb_Regstd_mst where Center='" + Request.QueryString["Centre"].ToString() + "' and Quali1='" + Request.QueryString["Course"].ToString() + "'"+
                "and Quali2='" + Request.QueryString["Grade"].ToString() + "' order by RollNo Asc");
            ViewState["ds"] = ds;
            ListView1.DataSource = ds.Tables[0];
            ListView1.DataBind();
            if (ListView1.Items.Count > 0)
                lblmsg.Text = "";
            else
                lblmsg.Text = "No Student Records Found in this Category.";

        }

protected void ListView1_ItemCommand(object sender, ListViewCommandEventArgs e)
        {
            try
            {
                if (e.CommandName == "Details")
                {
                    Label id = (Label)e.Item.FindControl("lblid");
                    Label name = (Label)e.Item.FindControl("lblname");
                    ViewState["STDID"] = id.Text;
                    lblname.Text = "Dear " + name.Text + ", login to continue......";
                    this.mdlpopup1.Show();
                    //Response.Redirect("StudentProfile.aspx");
                }
            }
            catch (Exception ex)
            {
                Response.Write(ex.Message);
            }

        }

Image1: Close.png