Showing posts with label Extender. Show all posts
Showing posts with label Extender. Show all posts

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


Monday, 5 August 2013

Text Changed Event on Ajax HTML Editor Extender Control Textbox

Java Script to be Used :

<script type="text/javascript">
function onContentsChange12() 
        {
            //document.getElementById('Labeld21').innerText = document.getElementById('TextBoxd21').value;
    var inputText = document.getElementById('TextBoxd12').value;
    var returnText = "" + inputText;
        //-- remove BR tags and replace them with line break
    returnText=returnText.replace(/<br>/gi, "\n");
    returnText=returnText.replace(/<br\s\/>/gi, "\n");
    returnText=returnText.replace(/<br\/>/gi, "\n");

    //-- remove P and A tags but preserve what's inside of them
    returnText=returnText.replace(/<p.*>/gi, "\n");
    returnText=returnText.replace(/<a.*href="(.*?)".*>(.*?)<\/a>/gi, " $2 ($1)");

    //-- remove all inside SCRIPT and STYLE tags
    returnText=returnText.replace(/<script.*>[\w\W]{1,}(.*?)[\w\W]{1,}<\/script>/gi, "");
    returnText=returnText.replace(/<style.*>[\w\W]{1,}(.*?)[\w\W]{1,}<\/style>/gi, "");
    //-- remove all else
    returnText=returnText.replace(/<(?:.|\s)*?>/g, "");

    //-- get rid of more than 2 multiple line breaks:
    returnText=returnText.replace(/(?:(?:\r\n|\r|\n)\s*){2,}/gim, "\n\n");

    //-- get rid of more than 2 spaces:
    returnText = returnText.replace(/ +(?= )/g,'');

    //-- get rid of html-encoded characters:
    returnText=returnText.replace(/&nbsp;/gi," ");
    returnText=returnText.replace(/&amp;/gi,"&");
    returnText=returnText.replace(/&quot;/gi,'"');
    returnText=returnText.replace(/&lt;/gi,'<');
    returnText=returnText.replace(/&gt;/gi,'>');
    //-- return
    document.getElementById('Labeld12').innerHTML = returnText;
        }
</script>

paste this in header section and then write below code in body tag

<ajt:HtmlEditorExtender ID="HtmlEditorExtenderd12" runat="server" 
            TargetControlID="TextBoxd12" EnableSanitization="false"  OnClientChange="onContentsChange12">
            
        </ajt:HtmlEditorExtender>