Showing posts with label Web. Show all posts
Showing posts with label Web. Show all posts

Friday, November 26, 2010

Disabling Browser Back Button after Logout

Recently in an application we developed there was a requirement to stop the browser back button after user logs out of the application.

The reason behind this was to stop the security risk of another user without proper permissions peeking into the earlier users screens. If you notice in many applications if the browser back is not properly handled then after the user is logged out you can re visit the site by just pressing the browser back button. This happens because the browser shows the cached page when the back is pressed. Even if you have server side code to check for the user they will not fire since the page will load from cache.

With the limited time I found a genius idea to handle this in the internet. What this javascript does is it will always try to put the user back to the last page in the history. For example, I am having a login page and a default page which I am taking a user after he logs in. You need to place the following javascript in the default page to make the above happen.





  1. <script type="text/javascript" language="JavaScript">
  2.     window.history.forward(1);
  3. </script>




Then once a user logs out from the system and if presses the back button of the browser, when the default page loads it will put the user again to login (history forward) page which is the login page. Ultimately user needs to login again to go back to the site.

Thursday, July 15, 2010

Firing TreeView TreeNodeCheckChanged Event

Normally in ASP.Net TreeView you can enable it to show checkboxes in its node levels. So if you need to do any actions when a node is checked or unchecked you need to use the TreeNodeCheckChanged event. But the problem is TreeNodeCheckChanged event will not fire when a checkbox is clicked. The cause for this is because the TreeNode class which represents a node in the TreeView will not add onClick event on the checkbox.

But if you carefully check it the event is getting fired at the next page postback. Since I needed to do some actions when the checkbox statuses are changed I made the page post back when a checkbox is checked or unchecked by the following java script. What it does is simply it will check the element which caused the event is a checkbox and do a postback of the page.





  1. <script type="text/javascript">
  2.     function TreeViewCheckBoxClicked(Check_Event) {
  3.         var objElement;
  4.         try {
  5.             // Get the element which fired the event.
  6.             objElement = window.event.srcElement;
  7.         }
  8.         catch (Error) {
  9.             //srcElement is failing, objElement is null.
  10.         }
  11.         if (objElement != null) {
  12.             // If the element is a checkbox do postback.
  13.             if (objElement.tagName == "INPUT" && objElement.type == "checkbox") {
  14.                 __doPostBack("", "");
  15.             }
  16.         }
  17.         else {
  18.             //    If the srcElement is failing due to browser incompatibility determine
  19.             // whether the element is and HTML input element and do postback.
  20.             if (Check_Event != null) {
  21.                 if (Check_Event.target.toString() == "[object HTMLInputElement]") {
  22.                     __doPostBack("", "");
  23.                 }
  24.             }
  25.         }
  26.     }
  27. </script>




To make this work you need to bind the onClick event with the javascript shown above as shown below.





  1. protected void Page_Load(object sender, EventArgs e)
  2. {
  3.     // Adding the onClick script to the TreeView.
  4.     TreeView1.Attributes.Add("onClick", "TreeViewCheckBoxClicked(event)");
  5. }




Even though I have done this in Page Load this can be done in other places of code as well, for example if you are adding the TreeView by code you can use this right before adding it to the page.

The above will make the page post back when ever a checkbox in the TreeView is clicked, but nothing special will happen. You need to implement the code for TreeNodeCheckChanged event to get some task done out of it, for example I am using the following code to check or uncheck the child nodes depending on the action done for the parent node.





  1. protected void TreeView1_TreeNodeCheckChanged(object sender, TreeNodeEventArgs e)
  2. {
  3.     // Loop through all the child nodes and change the checked status as required.
  4.     foreach (TreeNode tn in e.Node.ChildNodes)
  5.     {
  6.         if (e.Node.Checked)
  7.             tn.Checked = true;
  8.         else
  9.             tn.Checked = false;
  10.     }
  11. }




Tuesday, June 22, 2010

Changing the Tab Container

Are you seeking a way to customize the tabcontainer which comes with AJAX toolkit? AJAX tab container has several Cascade Style Sheet (CSS) properties which you can use to change the look of the tab container. But you need to make sure that you are not changing the keywords used in the CSS (ajax__tab_header, ajax__tab_outer, etc…).

You can change the look of the tabs by two methods. Tab container is using few images to give the 3D look it is having in its default view. so the first method is by changing the images and associating the new images to the tab container using a style sheet, second method is to change the tabs using the CSS without images, by using the CSS you can change the colors, sizes etc of the tabs.

Following are the default images that are shipped with the toolkit.

tab tab
tab-active tab-active
tab-active-left tab-active-left
tab-active-right tab-active-right
tab-hover tab-hover
tab-hover-left tab-hover-left
tab-hover-right tab-hover-right
tab-left tab-left
tab-right tab-right
tab-line tab-line

 

In the following code I am changing the tabcontainer look by using CSS and then placing the updated images to the relevant (Images/Controls) folder.





  1. .tabCont .ajax__tab_header
  2. {
  3.     font-family: verdana,tahoma,helvetica;
  4.     font-size: 11px;
  5.     background: url(../Images/Controls/tab-line.gif) repeat-x bottom;
  6. }
  7. .tabCont .ajax__tab_outer
  8. {
  9.     padding-right: 4px;
  10.     background: url(../Images/Controls/tab-right.gif) no-repeat right;
  11.     height: 21px;
  12. }
  13. .tabCont .ajax__tab_inner
  14. {
  15.     padding-left: 3px;
  16.     background: url(../Images/Controls/tab-left.gif) no-repeat;
  17. }
  18. .tabCont .ajax__tab_tab
  19. {
  20.     height: 13px;
  21.     padding: 4px;
  22.     margin: 0px;
  23.     background: url(../Images/Controls/tab.gif) repeat-x;
  24. }
  25. .tabCont .ajax__tab_hover .ajax__tab_outer
  26. {
  27.     cursor: pointer;
  28.     background: url(../Images/Controls/tab-hover-right.gif) no-repeat right;
  29. }
  30. .tabCont .ajax__tab_hover .ajax__tab_inner
  31. {
  32.     cursor: pointer;
  33.     background: url(../Images/Controls/tab-hover-left.gif) no-repeat;
  34. }
  35. .tabCont .ajax__tab_hover .ajax__tab_tab
  36. {
  37.     cursor: pointer;
  38.     background: url(../Images/Controls/tab-hover.gif) repeat-x;
  39. }
  40. .tabCont .ajax__tab_active .ajax__tab_outer
  41. {
  42.     background: url(../Images/Controls/tab-active-right.gif) no-repeat right;
  43. }
  44. .tabCont .ajax__tab_active .ajax__tab_inner
  45. {
  46.     background: url(../Images/Controls/tab-active-left.gif) no-repeat;
  47. }
  48. .tabCont .ajax__tab_active .ajax__tab_tab
  49. {
  50.     background: url(../Images/Controls/tab-active.png) repeat-x;
  51. }
  52. .tabCont .ajax__tab_disabled
  53. {
  54.     color: #A0A0A0;
  55. }
  56. .tabCont .ajax__tab_body
  57. {
  58.     font-family: verdana,tahoma,helvetica;
  59.     font-size: 10pt;
  60.     border: 0px solid #999999;
  61.     border-top: 0;
  62.     padding: 8px;
  63.     background-color: #f1f1f1;
  64.     margin: 12px;
  65. }




 

To apply the style to the tab container you can use the following code.

<asp:TabContainer ID="tcnManageUsers" runat="server" ActiveTabIndex="0" CssClass="tabCont">

Following is the full code of my tab container.





  1. <asp:TabContainer ID="tcnManageUsers" runat="server" ActiveTabIndex="0" CssClass="tabCont">
  2.      <asp:TabPanel runat="server" HeaderText="Add" ID="tplAdd" >
  3.          <ContentTemplate>
  4.              <uc1:CreateUser ID="AddCreateUser" runat="server" />
  5.          </ContentTemplate>  
  6.      </asp:TabPanel>
  7.      <asp:TabPanel ID="tplEdit" runat="server" HeaderText="Edit" >
  8.          <ContentTemplate >
  9.             <asp:Button ID="btnSelectUser" runat="server" Text="Select User" OnClick="btnSelectUser_Click"/>
  10.             <uc1:CreateUser ID="EditCreateUser" runat="server" />
  11.          </ContentTemplate>
  12.      </asp:TabPanel>
  13.  </asp:TabContainer>




Friday, June 18, 2010

Creating Rounded Corners

When designing web sites it always looks nicer if you could round the sharp corners, for example see below, what looks nicer to you?

Sharp Corners

Rounded Corners

My feeling is the rounded corners are better looking than the normal one. But the problem is, there is no easy way to create this. You need some Cascade Style Sheet (CSS) knowledge to do this. The easy way to round the required corners is to use the following code.





  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head runat="server">
  3.     <title></title>
  4.     <style type="text/css">
  5.         .CornerTopLeft
  6.         {
  7.             float: right;
  8.             width: 100%;
  9.             margin-top: 10px;
  10.             background: url(../Images/TopLeft.png) 0 0 no-repeat rgb(237,28,36);
  11.             border: 1px double #f1f1f1;
  12.         }
  13.         .CornerTopRight
  14.         {
  15.             float: right;
  16.             width: 100%;
  17.             background: url(../Images/TopRight.png) 100% 0 no-repeat;
  18.         }
  19.         .CornerBottomLeft
  20.         {
  21.             float: right;
  22.             width: 100%;
  23.             background: url(../Images/BottomLeft.png) 0 100% no-repeat;
  24.             height: 100%;
  25.         }
  26.         .CornerBottomRight
  27.         {
  28.             float: right;
  29.             width: 100%;
  30.             background: url(../Images/BottomRight.png) 100% 100% no-repeat;
  31.         }
  32.         div#Content
  33.         {
  34.             margin: 15px;
  35.         }
  36.     </style>
  37. </head>
  38. <body bgcolor="rgb(232,232,232)">
  39.     <form id="form1" runat="server">
  40.     <div class="CornerTopLeft">
  41.         <div class="CornerTopRight">
  42.             <div class="CornerBottomLeft">
  43.                 <div class="CornerBottomRight">
  44.                     <div id="Content">
  45.                         Your content here.....
  46.                         <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
  47.                         <asp:Button ID="Button1" runat="server" Text="Button" />
  48.                     </div>
  49.                 </div>
  50.             </div>
  51.         </div>
  52.     </div>
  53.     </form>
  54. </body>
  55. </html>




The above code is self explanatory so I didn’t put any comments there. To make it work you need the following 4 images placed on your Images directory.

TopLeft.png –

TopRight.png –

BottomLeft.png –

BottomRight.png –

If I am to explain the code, the corners are curved by using 4 different DIVs and placing the above images on them. For example the following DIVs does the trick.

<div class="CornerTopLeft">
<div class="CornerTopRight">
<div class="CornerBottomLeft">
<div class="CornerBottomRight">





  1. <div class="CornerTopLeft">
  2.         <div class="CornerTopRight">
  3.             <div class="CornerBottomLeft">
  4.                 <div class="CornerBottomRight">
  5.                     <div id="Content">
  6.                         Your content here.....
  7.                         <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
  8.                         <asp:Button ID="Button1" runat="server" Text="Button" />
  9.                     </div>
  10.                 </div>
  11.             </div>
  12.         </div>
  13.     </div>




The content you need to put in the middle should be wrapped by these DIVs. In the above code I used another DIV for placing content having the ID Content.

Inserting curved images to the corners of the DIVs are done by using a style per DIV. The CSS classes which are used to change these DIVs are as of below.





  1. <style type="text/css">
  2.         .CornerTopLeft
  3.         {
  4.             float: right;
  5.             width: 100%;
  6.             margin-top: 10px;
  7.             background: url(../Images/TopLeft.png) 0 0 no-repeat rgb(237,28,36);
  8.             border: 1px double #f1f1f1;
  9.         }
  10.         .CornerTopRight
  11.         {
  12.             float: right;
  13.             width: 100%;
  14.             background: url(../Images/TopRight.png) 100% 0 no-repeat;
  15.         }
  16.         .CornerBottomLeft
  17.         {
  18.             float: right;
  19.             width: 100%;
  20.             background: url(../Images/BottomLeft.png) 0 100% no-repeat;
  21.             height: 100%;
  22.         }
  23.         .CornerBottomRight
  24.         {
  25.             float: right;
  26.             width: 100%;
  27.             background: url(../Images/BottomRight.png) 100% 100% no-repeat;
  28.         }
  29.         div#Content
  30.         {
  31.             margin: 15px;
  32.         }
  33.     </style>




The filling of the required area is done by assiging a color at the background tag in CornerTopLeft style which will be applied to CornerTopLeft DIV.

background: url(../Images/TopLeft.png) 0 0 no-repeat rgb(237,28,36);

Note the last div#Content which was placed to style the Content DIV making the contents placed centered so the final output will be nicer.

Saturday, May 15, 2010

Preserving State in ASP.Net

As you know a main challenge in web development is preserving the state of the application. We say web is stateless because web server treats each HTTP request for a page as an independent request. The server will not know any knowledge of variable values that were set/used during the previous requests. For example in Windows applications after we start the application if we set a variable to a certain value in a form it will be there until we close the form. But in web since the page is getting posted back the value will be normally lost.

To overcome this limitation in web ASP.Net provides two main methods and they are having different options under them.

  1. Client Side State Management
    1. View State
    2. Cookies
    3. Query String
  2. Server Side State Management
    1. Session State
    2. Application State
    3. Profile Properties

1.1- View State

Viewstate is a technique used in ASP.Net to preserve the state changes during the page postbacks. The viewstate data is always belong to the page, so this needs to be used when we want to store data at page level and retrieve them on the same page. Viewstate data will not be available from another page.

Viewstate uses a hidden form field named __VIEWSTATE as default to store the state information. When the “EnableViewstate” property of a control is set to true ASP.Net will start saving the control state in the viewstate. If we enable this property for many controls then soon the viewstate hidden variable will be large, and that may slow our application since this needs to be transferred at each postback. For example each time we submit a page the viewstate will go from our machine to server and from server to our machine. Due to this reason we should consider whether it is really required before enabling viewstate for a control. One advantage viewstate has is that it is not using server resources.

Apart from the viewstates of the controls in the form we can also add the values we need to preserve to the viewstate.

Adding a value -





  1. ViewState["Text"] = value;








  1. ViewState.Add("Text", value);




Retrieving a value -





  1. object o = ViewState["Text"];








  1. string str = (string) ViewState["Text"];




Read more at http://msdn.microsoft.com/en-us/library/bb386448.aspx.

1.2- Cookies

We use cookies to store frequently changed small amount of data at client side. We can control the life span of a cookie. For example we can create a cookie which expires when the session is over or which exists indefinitely in the client machine.

Cookies are light weight since they are text based structures having key value pairs. They are not taking any server resources since they are at client, but this also adds a disadvantage on security because users/hackers can tamper them. To prevent this we can encrypt cookies but this will reduce application performance. There is also a limit to the amount of data which we can be stored in a cookie. Also if cookies are blocked in browser the application will fail.

Adding a value -





  1. Response.Cookies["userData"]["Name"] = "Arjuna";
  2. Response.Cookies["userData"]["lastVisit"] = DateTime.Now.ToString();
  3. Response.Cookies["userData"].Expires = DateTime.Now.AddDays(1);








  1. HttpCookie aCookie = new HttpCookie("userData");
  2. aCookie.Values["Name"] = "Arjuna";
  3. aCookie.Values["lastVisit"] = DateTime.Now.ToString();
  4. aCookie.Expires = DateTime.Now.AddDays(1);
  5. Response.Cookies.Add(aCookie);




Retrieving a value -





  1. HttpCookie cookie = Request.Cookies["userData"];
  2. if (cookie == null)
  3. {
  4.     lblCookieText.Text = "Cookie not found.";
  5. }
  6. else
  7. {
  8.     lblCookieText.Text = cookie.Values[0] + ", " + cookie.Values["lastVisit"];
  9. }




Read more at http://msdn.microsoft.com/en-us/library/ms178194.aspx.

1.3- Query String

A query string is the information added at the end of the URL. This is supported by all the browsers and does not consume server resources. But this has limited capacity and security problems.

Adding a value -





  1. Response.Redirect("Webform2.aspx?Name=" +
  2. this.txtName.Text + "&LastName=" +
  3. this.txtLastName.Text);




Retrieving a value -

Using Webform2.





  1. this.TextBox1.Text = Request.QueryString[0];
  2. this.TextBox2.Text = Request.QueryString["LastName"];




 

2.1- Session State

Session state (variables) needs to be used to store session specific data. For example the logged in user information can be stored in session. Session variables are accessible by the entire set of pages in an application within the same session.

Session is created once a user visits a site and the session will end when the user leaves a site or when user becomes idle. Session variables are stored in a SessionStateItemCollection object that is exposed through the HttpContext.Session property. In an ASP.NET page, the current session variables are exposed through the Session property of the Page object. One disadvantage is that the session variables are taking server resources.

Adding a value -





  1. Session["Name"] = “My Name”;




Retrieving a value -





  1. string str = (string) Session["Name"];




Read more at http://msdn.microsoft.com/en-us/library/ms178581.aspx.


2.2- Application State

Application state (variables) are used to store application specific data. Application state will be accessible to any users connected to the application. Normally global data which are infrequently changed, having no security concerns are stored in an application state.

The HttpApplicatioState instance is created at the first time a user accesses any URL resource in an application and the application state is lost when the application is ended. For example if the web server is restarted. If the value is required after application restart then before application end the required values needs to be transfered to a non volatile medium such as a database for later retrieval. The HttpApplicationState class is most often accessed through the Application property of the HttpContext class. When using the application state we need to remove any unnecessary items as soon as it is not required to maintain the site performance.

Adding a value -

When adding a value to an application variable it is always good to lock it before adding data since application state data can be accessed by multiple threads at the same time. Otherwise invalid data or erroneous data will appear. The loack needs to be removed after adding or changing the value to make the application state available for other threads.





  1. Application.Lock ();
  2. Application["NumberofViews"] = 1;
  3. Application.UnLock ();




Retrieving a value -





  1. string str = (string)Application["NumberofViews"];




Read more at http://msdn.microsoft.com/en-us/library/ms178594.aspx.

2.3 Profile Properties

Profile properties uses an ASP.Net profile and is user specific. This is similar to session state except that the data stored in profile properties are not lost when session is ended.

We can store the profile data in a place that we like. If we are using SQL Server to store them then we can use SqlProfileProvider, if not we can write our own profile provider classes so the profile data will be stored in custom formats and in a custom storage mechanisms, such as an XML file, or even to a Web service. But performance will be less since the data is stored in a data store. Also to use it additional configurations and to keep it in a fully optimized level maintenance activities are required.

Adding a value -

First we need to add the required provider and the properties to the web.config file.





  1. <profile enabled="true">
  2.   <providers>
  3.     <clear/>
  4.     <add name="AspNetSqlProfileProvider" type="System.Web.Profile.SqlProfileProvider" connectionStringName="ApplicationServices" applicationName="/"/>
  5.   </providers>
  6.   <properties>
  7.     <add name="UserName" />
  8.   </properties>
  9. </profile>




Retrieving a value -





  1. TextBox1.Text = System.Web.Profile.DefaultProfile.Properties["UserName"].DefaultValue.ToString();




Read more at http://msdn.microsoft.com/en-us/library/2y3fs9xs.aspx.

Read more on ASP.Net state managements at http://msdn.microsoft.com/en-us/library/75x4ha6s.aspx.

Monday, August 11, 2008

HTML Meta Tags

Do you know what can be done with HTML Meta tags?
If not then you will also struggle when trying to do a page refresh or a redirect.
To get more details on how to please refer the following web site.
http://webdesign.about.com/od/metataglibraries/a/aa080300a.htm

Wednesday, May 07, 2008

Know More On Finding Stuff

Recently I came up to see an article showing how you can improve the searching capabilities while using Google. It is more towards finding things on your GMail. But definitely you will be able to use some of the skills you get on Google search as well.
Thought it would be helpful to you.
http://gmailblog.blogspot.com/2008/05/how-to-find-any-email-with-gmail-search.html