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