Select a row on GridView

There are many ways to select a row and perform whatever actions you desire in GridView. The easiest is to let its CommandField generate the select button and use the SelectedIndexChanging and SelectedIndexChanged events for the actions desired.

    <asp:CommandField ShowSelectButton="true" />

However, it would be more elegant if you can just select the row. 3 steps needed in order to achieve that:

Step 1: Add the SELECT command in RowDataBound event to each row (Assuming the ID of your GridView is “myGridView“)

    protected void PeopleGridView_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            // Just adding styles and effects
            e.Row.Attributes["onmouseover"] = "this.style.cursor='hand';this.style.textDecoration='underline';";
            e.Row.Attributes["onmouseout"] = "this.style.textDecoration='none';";

            e.Row.Attributes["onclick"] = ClientScript.GetPostBackClientHyperlink(this.myGridView, "Select$" + e.Row.RowIndex);
        }
    }

Step 2: Register these SELECT commands in Render to avoid the Event Validation errors

    protected override void Render(HtmlTextWriter writer)
    {
        for (int i = 0; i < this.myGridView.Rows.Count; i++)
        {
            Page.ClientScript.RegisterForEventValidation(this.myGridView.UniqueID, "Select$" + i);
        }
        base.Render(writer);
    }

Step 3: Use the SelectedIndexChanging and SelectedIndexChanged events for the actions desired

Server.HttpEncode vs. HttpUtility.HttpEncode

Just use HttpUtility.Encode because Server.HttpEncode simply calls HttpUtility.Encode. Basically if you are trying to display text back to the user and these text are either straight from database, or from databound objects, or from current page textbox entered by user, etc, use HttpUtility.Encode, mainly to prevent script-injection and handle specials characters such as blanks and punctuations, and <, >, etc…

Example:
TextBox TextBoxRoleName = (TextBox)RolesGridView.FooterRow.FindControl(“TextBoxRoleName”);
string newRoleName = TextBoxRoleName.Text.Trim();
LabelMessage.Text = “Role ‘” + Server.HtmlEncode(newRoleName) + “‘ already exists.”;

Of course, this leads to some quite important MSDN articles:

• HttpUtility.HtmlEncode Method
• MSDN – How To: Prevent Cross-Site Scripting in ASP.NET
• MSDN – Security Practices: ASP.NET 2.0 Security Practices at a Glance

The last two articles of the above are under the following bigger, boarder title:

MSDN – .NET Security

ASP.NET AJAX username availability check

ASP.NET AJAX username availability check with UpdatePanel

ASP.NET AJAX username availability check without UpdatePanel

I used UpdatePanel in our project and it works alright. I didn’t read either of these posts when I did it. It was not too hard to figure out even though I did remember myself having some issues. However, the web service method is much much better and well worth the time to learn and implement.

Great great posts from both sites!

Modal Popup with Rounded Corners

If you set the TargetControlID of both ModalExtender and RoundedCornerExtender to one panel, ASP.NET will not like it, probably because of some JavaScript clashes.

One simply trick is to have an inner panel, surrounded by an outer panel. Set the outer panel’s background color to transparent and let the inner panel have the rounded corner extender.

Like so: (key is the transparent)
.modalPopupOuter {
background-color:Transparent;
padding:10px 10px;
width:700px;
height:520px;
}
.modalPopupInner {
background-color:#ffffff;
padding: 10px;
width:700px;
height:500px;
}
The screen shot below doesn’t have rounded corners, but it has a stand-out “X” on the top-right corner, that’s achieved by having the transparent outer panel, obviously.

ScrollBar styles

Apparently scroll bar styles are only supported by IE. Diddn’t realize this until today.

Regardless, I think it’s a pretty cool thing to have and Firefox and Safari will eventually adopt it. Here’s a site to generate the CSS codes. It’s pretty darn good…

http://www.spectrum-research.com/V2/projects_scrollbar_generator.asp

http://www.spectrum-research.com/V2/generators/scrollbar.asp

CSS CSS CSS

Don’t know how to make your website pretty? Nothing new, it’s always a struggle… TURN FOR HELP AND LEARN!

WebDesignerWall – This site is just GOD LIKE. It’s beyond awesomeness!! Don’t know how? LEARN!!

Below are several other misc sites, none has tutorials except the first couple, but one of the best ways, and the first step, of learning how to make things pretty is to look at pretty things, isn’t it? Look at the sample works, featured sites or whatever…

N.Design Studio

BestWebGallery

FlashMint

StyleMedia

EKOnline

GraphicallySpeaking

CSS – Fonts

font-family

CSS defines 5 generic font families: (You can employ any of these families in a document by using the property font-family.)

1. Serif fonts
   These fonts are proportional and have serifs. A font is proportional if all characters in the font have different widths due to their various sizes. Serifs are the decorations on the ends of strokes within each character, such as little lines at the top and bottom of a lowercase l, or at the bottom of each leg of an uppercase A.
2. Sans-serif fonts
   These fonts are proportional and do not have serifs.
3. Monospace fonts
   Monospace fonts are not proportional. These fonts may or may not have serifs. If a font has uniform character widths, it is classified as monospace, regardless of the presence of serifs.
4. Cursive fonts
   These fonts attempt to emulate human handwriting. Usually, they are composed largely of curves and have stroke decorations that exceed those found in serif fonts. For example, an uppercase A might have a small curl at the bottom of its left leg or be composed entirely of swashes and curls. Examples of cursive fonts are Zapf Chancery, Author, and Comic Sans.
5. Fantasy fonts
   Such fonts are not really defined by any single characteristic other than our inability to easily classify them in one of the other families. A few such fonts are Western, Woodblock, and Klingon.

By combining specific font names with generic font families, you can create documents that come out, if not exact, at least close to your intentions.
h1 {font-family: Georgia, serif;}
Based on this list, a user agent will look for the fonts in the order they’re listed. If none of the listed fonts are available, then it will simply pick a serif font that is available.
p {font-family: Times, TimesNR, ‘New Century Schoolbook’, Georgia, ‘New York’, serif;}

---

font-weight

Values:
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

One of the numeric values (100, etc.), or one of the numeric values plus one of the relative values (bolder or lighter)

---

font-size

There are seven absolute-size values for font-size: xx-small, x-small, small, medium, large, x-large, and xx-large. These are not defined precisely, but are relative to each other:

p.one {font-size: xx-small;}
p.two {font-size: x-small;}
p.three {font-size: small;}
p.four {font-size: medium;}
p.five {font-size: large;}
p.six {font-size: x-large;}
p.seven {font-size: xx-large;}

The difference (or scaling factor) between one absolute size and the next should be about 1.5 going up the ladder, or 0.66 going down. Different user agents have assigned the “default” font size to different absolute keywords. Note that there are seven absolute-size keywords, just as there are seven font sizes (e.g., <font size=”5″>). The typical default font size was historically 3.

In a way, percentage values are very similar to the relative-size keywords. A percentage value is always computed in terms of whatever size is inherited from an element’s parent.

Note: Although font-size is inherited in CSS, it is the computed values that are inherited, not percentages.

---

font-style

• Italic text is a separate font face, with small changes made to the structure of each letter to account for the altered appearance. This is especially true of serif fonts, where, in addition to the fact that the text characters “lean,” the serifs may be altered in an italic face.
• Oblique text, on the other hand, is simply a slanted version of the normal, upright text.

---

font-variant

Values:
small-caps | normal | inherit
Purpose:
Turns fonts to capitalized characters, with the originally capitalized characters slightly larger than the non-capitalized ones.

---

font

h1 {font: italic 900 small-caps 30px Verdana, Helvetica, Arial, sans-serif;}
h2 {font: bold normal italic 24px Verdana, Helvetica, Arial, sans-serif;}

It’s important to realize, however, that this free-for-all situation applies only to the first three values of font. The last two are much stricter in their behavior. Not only must font-size and font-family appear in that order as the last two values in the declaration, but both must always be present in a font declaration.

So far, we’ve treated font as though it has only five values, which isn’t quite true. It is also possible to set the line-height using font, despite that fact that line-height is a text property, not a font property. It’s done as a sort of addition to the font-size value, separated from it by a forward slash (/):

body {font-size: 12px;}
h2 {font: bold italic 200%/1.2 Verdana, Helvetica, Arial, sans-serif;}
This addition of a value for line-height is entirely optional, just as the first three font values are. If you do include a line-height, remember that the font-size always comes before line-height, never after, and the two are always separated by a slash.

Injection Attacks

• Understanding Script Injection Attacks
• MSDN – How To: Protect From Injection Attacks in ASP.NET

ASP.NET includes a feature designed to automatically combat script injection attacks, known as request validation. Two ways to disable request validation:

• Disable for individual page
  

  <%@ Page ValidateRequest="false" Language="C#" AutoEventWireup="true"
  CodeFile="Default.aspx.cs" Inherits="_Default" %>

• Disable the entire web application by modifying the web.config
  

  <configuration>
      <appSettings/>
      <connectionStrings/>
      <system.web>
        <pages validateRequest="false"/>
      </system.web>
  </configuration>

To prevent these script injection attacks, use Server.HtmlEncode:

Response.Write("Entered Input is:" + Server.HtmlEncode(txtInput.Text));

HtmlEncode replaces characters that have special meaning in HTML-to-HTML variables that represent those characters. For example, < is replaced with < and ” is replaced with “. Encoded data does not cause the browser to execute code. Instead, the data is rendered as harmless HTML.

CSS Keyword "inherit"

“inherit” makes the value of a property the same as the value of its parent element. In most cases, you don’t need to specify inheritance, since most properties inherit naturally.  Ordinarily, directly assigned styles override inherited styles, but inherit can reverse that behavior.

CSS url

There are absolute url and relative url. In CSS, relative URLs are relative to the style sheet itself, not to the HTML document that uses the style sheet.

Example:

@import url(special/toppings.css);

Note that there cannot be a space between the url and the opening parenthesis:

body {background: url(http://www.pix.web/picture1.jpg);}   /* correct */
body {background: url  (images/picture2.jpg);}          /* INCORRECT */