Sunday, July 17, 2011

Dynamically Load User Control Using Ajax Tab Container



<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"  TagPrefix="cc1" %>
<%@ Register Src="~/Controls/UC1.ascx" TagName="UC1" TagPrefix="UC1" %>
<%@ Register Src="~/Controls/UC2.ascx" TagName="UC2" TagPrefix="UC2" %>
<%@ Register Src="~/Controls/UC3.ascx" TagName="UC3" TagPrefix="UC3" %>
<!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 id="Head1" runat="server">
    <title></title>
   
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:ScriptManager ID="sc1" runat="server" ></asp:ScriptManager>
    
    <table>
    <tr>
    <td>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
    
    
    
    
    <cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" AutoPostBack="true">
    <cc1:TabPanel ID="TabPanel1" runat="server">
    <HeaderTemplate>Home</HeaderTemplate>
    <ContentTemplate>
    <asp:UpdatePanel ID="up1" runat="server">
    <ContentTemplate>
    <asp:Panel ID="panel1" runat="server">
    <asp:Button ID="btn" runat="server" OnClick="btn_Click" Visible="false"/>
    
    
    </asp:Panel>
    </ContentTemplate>
    
    <Triggers>
    <asp:AsyncPostBackTrigger ControlID="btn" />
    </Triggers>
    </asp:UpdatePanel>
    
    
    </ContentTemplate>
    </cc1:TabPanel>
    
    <cc1:TabPanel ID="TabPanel2" runat="server">
    <HeaderTemplate>Contact</HeaderTemplate>
    <ContentTemplate>
    <asp:UpdatePanel ID="Up2" runat="server">
    <ContentTemplate>
    <asp:Panel ID="panel2" runat="server">
 <asp:Button ID="btn2" runat="server" OnClick="btn_Click"  Visible="false"/>
    
    </asp:Panel>
    </ContentTemplate>
    
    <Triggers>
    <asp:AsyncPostBackTrigger ControlID="btn2" />
    </Triggers>
    </asp:UpdatePanel>
    
    
    </ContentTemplate>
    </cc1:TabPanel>
    
    
    
    <cc1:TabPanel ID="TabPanel3" runat="server">
    <HeaderTemplate>Office Map</HeaderTemplate>
    <ContentTemplate>
    <asp:UpdatePanel ID="Up3" runat="server">
    <ContentTemplate>
    <asp:Panel ID="panel3" runat="server">
 <asp:Button ID="btn3" runat="server" OnClick="btn_Click"  Visible="false"/>
    
    </asp:Panel>
    </ContentTemplate>
    
    <Triggers>
    <asp:AsyncPostBackTrigger ControlID="btn3" />
    </Triggers>
    </asp:UpdatePanel>
    
    
    </ContentTemplate>
    </cc1:TabPanel>
    
    
    </cc1:TabContainer>
    
    </ContentTemplate>
    </asp:UpdatePanel>
    </td>
    </tr>
    </table>
    </div>
    
        
    <asp:HiddenField ID="hdnhome" runat="server" />
<asp:HiddenField ID="hdncon" runat="server" />
    
    </form>
</body>
</html>
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
public partial class Default2 : System.Web.UI.Page
{
    ASP.controls_uc1_ascx uc1 = new ASP.controls_uc1_ascx();
    ASP.controls_uc2_ascx uc2 = new ASP.controls_uc2_ascx();
    ASP.controls_uc3_ascx uc3 = new ASP.controls_uc3_ascx();
    protected void Page_Load(object sender, EventArgs e)
    {
        btn_Click(sender, e);
    }
    #region btn_Click
    protected void btn_Click(object sender, EventArgs e)
    {
        if (TabContainer1.ActiveTabIndex == 0)
        {
            uc1.LoadControl("~/Controls/UC1.ascx");
            panel1.Controls.Add(uc1);
            ClientScript.RegisterClientScriptBlock(GetType(), "clientscript", "<script> alert('This is Tab1'); </script>", false);
        }
        if (TabContainer1.ActiveTabIndex == 1)
        {
            uc2.LoadControl("~/Controls/UC2.ascx");
            panel2.Controls.Add(uc2);
            ClientScript.RegisterClientScriptBlock(GetType(), "clientscript", "<script> alert('This is Tab2'); </script>", false);
        }
        if (TabContainer1.ActiveTabIndex == 2)
        {
            uc2.LoadControl("~/Controls/UC3.ascx");
            panel3.Controls.Add(uc3);
            ClientScript.RegisterClientScriptBlock(GetType(), "clientscript", "<script> alert('This is Tab2'); </script>", false);
        }
        //panel1.Visible = false;
    }
    #endregion
}

Output :


-------------


usercontrol

Friday, July 15, 2011

call JavaScript - jQuery code from ASP.NET Server-Side

Default.aspx
--------------------
<!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>Register Client Script Block with Updatepanel</title>
    <script src="JavaScript/jquery.min.js" type="text/javascript"></script>
</head>
<body>
    <form id="theForm" runat="server">
    <div>
        <asp:ScriptManager ID="sm" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="upPnl" runat="server">
            <ContentTemplate>
                <asp:Button ID="btnPostback" runat="server" Text="Standard Postback" OnClick="btnPostback_Click" />
                <asp:Button ID="btnAsynchPostback" runat="server" Text="Asynchronous Postback" OnClick="btnAsynchPostback_Click" />
            <asp:Label ID="lbl1" runat="server"></asp:Label>
            </ContentTemplate>
            <Triggers>
                <asp:PostBackTrigger ControlID="btnPostback" />
            </Triggers>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>
Default.aspx.cs
--------------------
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Text;
public partial class Default2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    protected void btnPostback_Click(object sender, EventArgs e)
    {
        runjQueryCode("alert('After a standard postback.')");
        lbl1.Text = "This is  postback";
    }
    protected void btnAsynchPostback_Click(object sender, EventArgs e)
    {
        runjQueryCode("alert('After an asynchronous postback.')");
        lbl1.Text = "This is Asynchrounous postback";
    }
    private string getjQueryCode(string jsCodetoRun)
    {
        StringBuilder sb = new StringBuilder();
        sb.AppendLine("$(document).ready(function() {");
        sb.AppendLine(jsCodetoRun);
        sb.AppendLine(" });");
        return sb.ToString();
    }
    private void runjQueryCode(string jsCodetoRun)
    {
        ScriptManager requestSM = ScriptManager.GetCurrent(this);
        if (requestSM != null && requestSM.IsInAsyncPostBack)
        {
            ScriptManager.RegisterClientScriptBlock(this,
                                                    typeof(Page),
                                                    Guid.NewGuid().ToString(),
                                                    getjQueryCode(jsCodetoRun),
                                                    true);
        }
        else
        {
            ClientScript.RegisterClientScriptBlock(typeof(Page),
                                                   Guid.NewGuid().ToString(),
                                                   getjQueryCode(jsCodetoRun),
                                                   true);
        }
    }
}

Output:

-------------- javascript postback

Thursday, July 7, 2011

Passing parameters to javascripts from code behind

Default.aspx
------------------
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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">
    <div>
    <asp:Label ID="lblValue" runat="server"></asp:Label>
    <asp:HiddenField ID="hdn1" runat="server" />
    </div>
    </form>
</body>
</html>
Default.aspx.cs
------------------
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Random rand = new Random((int)DateTime.Now.Ticks);
        
        hdn1.Value =  "ooty";
        Response.Write("<script> alert('" + hdn1.Value +"');</script>");
        System.Text.StringBuilder sb = new System.Text.StringBuilder();
        sb.Append("<script type='text/javascript'>");
        sb.Append("var ws_wsid = '9ad5fdccd9224b53a60db7369ab5b733';");
        sb.Append("var ws_address ='" + hdn1.Value + "' ;var ws_width = '600';var ws_height = '460';var ws_layout = 'horizontal';var ws_transit_score = 'true';");
        sb.Append("var ws_commute = 'true';");
        sb.Append("var ws_map_modules = 'all';");
        sb.Append("</script><style type='text/css'>#ws-walkscore-tile{position:relative;text-align:left}#ws-walkscore-tile *{float:none;}#ws-footer a,#ws-footer a:link{font:11px/14px Verdana,Arial,Helvetica,sans-serif;margin-right:6px;white-space:nowrap;padding:0;color:#000;font-weight:bold;text-decoration:none}#ws-footer a:hover{color:#777;text-decoration:none}#ws-footer a:active{color:#b14900}</style><div id='ws-walkscore-tile'><div id='ws-footer' style='position:absolute;top:442px;left:8px;width:588px'><form id='ws-form'><a id='ws-a' href='http://www.walkscore.com/' target='_blank'>What's Your Walk Score?</a><input type='text' id='ws-street' style='position:absolute;top:0px;left:170px;width:386px' /><input type='image' id='ws-go' src='http://cdn.walkscore.com/images/tile/go-button.gif' height='15' width='22' border='0' alt='get my Walk Score' style='position:absolute;top:0px;right:0px' /></form></div></div><script type='text/javascript' src='http://www.walkscore.com/tile/show-walkscore-tile.php'></script>");
         sb.ToString();
         Response.Write(sb.ToString());
    }
}

walkscore

Sunday, July 3, 2011

Dynamically Load User Control in Asp.Net

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Panel.aspx.cs" Inherits="Panel" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc2" %>
<%@ Register Src="~/UserControl/Menu.ascx" TagName="Menu" TagPrefix="cc1" %>
 <%@ Reference Control="~/UserControl/Emp1.ascx"  %>
   <%@ Reference Control="~/UserControl/Emp2.ascx" %>
  <%@ Reference Control="~/UserControl/Emp3.ascx" %>
<!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>Untitled Page</title>
    <style type="text/css">
    .Button
       {
        background-color: #316ac4;
        width:75px;  
        height:25px;          
        padding: 0;
        color:Black;
        cursor:pointer;
        color:White;
        font-weight:bold; 
        margin-top:0px;
         
         -moz-border-radius: 15px;
         -webkit-border-radius: 15px;
         -khtml-border-radius: 15px;
          behavior: url(/border-radius.htc);  border-radius: 15px;
          
         }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
       <asp:ScriptManager ID="sc1" runat="server"></asp:ScriptManager>
        <table border="0" width="700px" bgcolor="#316ac4">
        <tr>
        <td>
         <asp:UpdatePanel ID="UpdatePanel4" runat="server">
       <ContentTemplate>
         <asp:Button ID="Button1" runat="server" Text="Home"  CssClass="Button" OnClick="Button1_Click"/>
          <asp:Button ID="Button2" runat="server" Text="Contact"  CssClass="Button" OnClick="Button2_Click"/>
 <asp:Button ID="Button3" runat="server" Text="Phone"  CssClass="Button" OnClick="Button3_Click"/>
        </ContentTemplate>
        </asp:UpdatePanel>
        </td>
        </tr>
     </table>
       
       <table border="1"  width="700px" height="500px">
       <tr>
       <td>
       <asp:Panel ID="Panelmain" runat="server">
       <asp:UpdatePanel ID="UpdatMain" runat="server">
       <ContentTemplate>
       <asp:Panel ID="Panel1" runat="server">
         <asp:UpdatePanel ID="UpdatePanel1" runat="server">
          <ContentTemplate>
           <%-- Add Text Here--%>
            
        </ContentTemplate>
          </asp:UpdatePanel>
           
       </asp:Panel>
       
       <asp:Panel ID="Panel2" runat="server">
        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
          <ContentTemplate>
               <%-- Add Text Here--%>
          </ContentTemplate>
        </asp:UpdatePanel>
       </asp:Panel>
       
       
        <asp:Panel ID="Panel3" runat="server">
        <asp:UpdatePanel ID="UpdatePanel3" runat="server">
          <ContentTemplate>
                <%-- Add Text Here--%>
          </ContentTemplate>
        </asp:UpdatePanel>
       </asp:Panel>
       
       </ContentTemplate>
       </asp:UpdatePanel>
       
       </asp:Panel>
       </td>
       </tr>
       </table>
        
    </div>
    </form>
</body>
</html>
Default.aspx.cs
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
public partial class Panel : System.Web.UI.Page
{
    protected ASP.usercontrol_emp1_ascx control1;
    protected ASP.usercontrol_emp2_ascx control2;
    protected ASP.usercontrol_emp3_ascx control3;
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            Panel1.Visible = true;
            Panel2.Visible = false;
            Panel3.Visible = false;
        } 
    }
    //Button1_Click
    protected void Button1_Click(object sender, EventArgs e)
    {
        Panel1.Visible = true;
        Panel2.Visible = false;
        Panel3.Visible = false;
        control1 = (ASP.usercontrol_emp1_ascx)LoadControl("~/UserControl/Emp1.ascx");
        UpdatePanel1.ContentTemplateContainer.Controls.Add(control1);
    }
    protected void Button2_Click(object sender, EventArgs e)
    {
        Panel1.Visible = false;
        Panel2.Visible = true;
        Panel3.Visible = false;
        control2 = (ASP.usercontrol_emp2_ascx)LoadControl("~/UserControl/Emp2.ascx");
        UpdatePanel2.ContentTemplateContainer.Controls.Add(control2);
    }
    protected void Button3_Click(object sender, EventArgs e)
    {
        Panel1.Visible = false;
        Panel2.Visible = false;
        Panel3.Visible = true;
        control3 = (ASP.usercontrol_emp3_ascx)LoadControl("~/UserControl/Emp3.ascx");
        UpdatePanel3.ContentTemplateContainer.Controls.Add(control3);
    }
}
Output:

dynamic