Free ASP.NET & Web Resources

How to encrypt and decrypt Query String Parameters in ASP.NET

2012-02-12T18:46:00.000+07:00

Query strings are very easy way of passing data from one page to another page. The problem with query strings is that the information is visible in the url. However, many developers have been using this way carelessly including me and we are vulnerable to use the query string in some circumstances. In my experience, one friend of mine web site had attacked by hacker using SQL Injection method since he used the Inline SQL Statemnet and Query String in his programming. Hence query strings are able to see, we should encrypt the parameters where it is confidential or not so that we prevent our application from malicious access. In the following sample, I show you using RC2 encryption for the query strings when you click "Details" link on Gridview and it go to other page with encrypted query strings.

Create BasePage.cs as below.
using System;
using System.Collections.Generic;
using System.Web;
using System.Text;
using System.IO;
using System.Collections.Specialized;
using System.Security.Cryptography;
public class BasePage : System.Web.UI.Page
{
    // Key management for scrambling support
    public byte[] ScrambleKey
    {
        set
        {
            byte[] key = value;
            if (null == key)
            {
                // Use existing key if non provided
                key = ScrambleKey;
            }
            Session["ScrambleKey"] = key;
        }
        get
        {
            byte[] key = (byte[])Session["ScrambleKey"];
            if (null == key)
            {
                RC2CryptoServiceProvider rc2 = new RC2CryptoServiceProvider();
                rc2.GenerateKey();
                key = rc2.Key;
                Session["ScrambleKey"] = key;
            }
            return key;
        }
    }
    // Initialization vector management for scrambling support
    public byte[] ScrambleIV
    {
        set
        {
            byte[] key = value;
            if (null == key)
            {
                key = ScrambleIV;
            }
            Session["ScrambleIV"] = key;
        }
        get
        {
            byte[] key = (byte[])Session["ScrambleIV"];
            if (null == key)
            {
                RC2CryptoServiceProvider rc2 = new RC2CryptoServiceProvider();
                rc2.GenerateIV();
                key = rc2.IV;
                Session["ScrambleIV"] = key;
            }
            return key;
        }
    }
    public string Encrypt(string message)
    {
        UTF8Encoding textConverter = new UTF8Encoding();
        RC2CryptoServiceProvider rc2CSP = new RC2CryptoServiceProvider();

        //Convert the data to a byte array.
        byte[] toEncrypt = textConverter.GetBytes(message);

        //Get an encryptor.
        ICryptoTransform encryptor = rc2CSP.CreateEncryptor(ScrambleKey, ScrambleIV);

        //Encrypt the data.
        MemoryStream msEncrypt = new MemoryStream();
        CryptoStream csEncrypt = new CryptoStream(msEncrypt, encryptor, CryptoStreamMode.Write);

        //Write all data to the crypto stream and flush it.
        // Encode length as first 4 bytes
        byte[] length = new byte[4];
        length[0] = (byte)(message.Length & 0xFF);
        length[1] = (byte)((message.Length >> 8) & 0xFF);
        length[2] = (byte)((message.Length >> 16) & 0xFF);
        length[3] = (byte)((message.Length >> 24) & 0xFF);
        csEncrypt.Write(length, 0, 4);
        csEncrypt.Write(toEncrypt, 0, toEncrypt.Length);
        csEncrypt.FlushFinalBlock();

        //Get encrypted array of bytes.
        byte[] encrypted = msEncrypt.ToArray();

        // Convert to Base64 string
        string b64 = Convert.ToBase64String(encrypted);

        // Protect against URLEncode/Decode problem
        string b64mod = b64.Replace('+', '@');

        // Return a URL encoded string
        return HttpUtility.UrlEncode(b64mod);
    }
    public string Decrypt(string scrambledMessage)
    {
        UTF8Encoding textConverter = new UTF8Encoding();
        RC2CryptoServiceProvider rc2CSP = new RC2CryptoServiceProvider();
        // URL decode , replace and convert from Base64
        string b64mod = HttpUtility.UrlDecode(scrambledMessage);
        // Replace '@' back to '+' (avoid URLDecode problem)
        string b64 = b64mod.Replace('@', '+');
        // Base64 decode
        byte[] encrypted = Convert.FromBase64String(b64);

        //Get a decryptor that uses the same key and IV as the encryptor.
        ICryptoTransform decryptor = rc2CSP.CreateDecryptor(ScrambleKey, ScrambleIV);

        //Now decrypt the previously encrypted message using the decryptor
        // obtained in the above step.
        MemoryStream msDecrypt = new MemoryStream(encrypted);
        CryptoStream csDecrypt = new CryptoStream(msDecrypt, decryptor, CryptoStreamMode.Read);

        byte[] fromEncrypt = new byte[encrypted.Length - 4];

        //Read the data out of the crypto stream.
        byte[] length = new byte[4];
        csDecrypt.Read(length, 0, 4);
        csDecrypt.Read(fromEncrypt, 0, fromEncrypt.Length);
        int len = (int)length[0] | (length[1] << 8) | (length[2] << 16) | (length[3] << 24);

        //Convert the byte array back into a string.
        return textConverter.GetString(fromEncrypt).Substring(0, len);
    }
    public NameValueCollection DecryptQueryString(string scrambledMessage)
    {
        // Decode the query string
        string queryString = Decrypt(scrambledMessage);

        NameValueCollection result = new NameValueCollection();
        char[] splitChar = new char[] { '&' };
        char[] equalChar = new char[] { '=' };
        // Split query string to components
        foreach (string s in queryString.Split(splitChar))
        {
            // split each component to key and value
            string[] keyVal = s.Split(equalChar, 2);
            string key = keyVal[0];
            string val = String.Empty;
            if (keyVal.Length > 1) val = keyVal[1];
            // Add to the hashtable
            result.Add(key, val);
        }
        // return the resulting hashtable
        return result;
    }
}

Create a .aspx page and extend BasePage.cs we created before.
Put the following gridview that use ObjectDataSource and "Northwind" DB in <form> tag(for creating the below gridview and data access, you can see in the my previous post).
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" CellPadding="4"
    AllowPaging="True" AllowSorting="True" AlternatingRowStyle-Wrap="True"
    DataSourceID="ObjectDataSource2" EmptyDataText="There is no data.">
    <RowStyle BackColor="#EFF3FB" />
    <Columns>
        <asp:BoundField HeaderText="No." DataField="No" />
        <asp:BoundField HeaderText="CustomerID" DataField="CustomerID" SortExpression="CustomerID"/>
        <asp:BoundField HeaderText="CompanyName" DataField="CompanyName" SortExpression="CompanyName" />
        <asp:BoundField HeaderText="ContactName" DataField="ContactName" SortExpression="ContactName" />
        <asp:TemplateField HeaderText="Action" >
            <ItemTemplate>
                <asp:HyperLink ID="hlkdetail" runat="server"
                NavigateUrl='<%# querystringencodedecode.aspx?query=" + Encrypt("ID=" + Eval("CustomerID"))%>'
                Text="Detail"></asp:HyperLink>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
    <AlternatingRowStyle BackColor="White" />
</asp:GridView>
<asp:ObjectDataSource ID="ObjectDataSource2" runat="server" SelectMethod="GridDataPage"
    TypeName="DAL" SelectCountMethod="DataRowCount"
    SortParameterName="SortExpression" EnablePaging="True">
    <SelectParameters>
        <asp:Parameter Name="maximumRows" Type="Int32" />
        <asp:Parameter Name="startRowIndex" Type="Int32" />
        <asp:Parameter Name="SortExpression" Type="String" />
    </SelectParameters>
</asp:ObjectDataSource>

Create querystringencodedecode.aspx and put the below label control to <form> tag.
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

Add the following code to Page_Load.
protected void Page_Load(object sender, EventArgs e)
{
    if (!string.IsNullOrEmpty(Request.QueryString["query"]))
    {
        System.Collections.Specialized.NameValueCollection querystring = DecryptQueryString(Request.QueryString["query"]);
        string id = querystring["ID"];
        //Handle id here.
        Label1.Text = id.ToString();
    }
}

Here are two snapshots to show how this example works.


Gridview page

When you click on Detail link, it go to below page with encrypted query string and then decrypt the query string again and show the parameter value on page.


querystringencodeDecode.aspx

You should avoid the query string method for passing data between pages when your data is important.

Original post : http://www.codeproject.com/kb/aspnet/ScrambleQueryStrings.aspx?fid=220116&df=90&mpp=25&noise=3&sort=Position&view=Quick&fr=26&display=Mobile&prof=False

How to show PDF in new browser without showing Download File dialog

2012-02-04T15:06:00.004+07:00

Sometimes, we need to show user guideline or user manual as PDF format in browser and we want to generate the PDF file and show it in browser according to their user info often.This example illustrates the simple way to show the PDF in new/tab browser without showing "Download File dialog" as below.


PDF in browser

Create a .aspx page and add the following control to <form> tag. Its navigateUrl will redirect the "AppGenerator.ashx" page we created later (navigateUrl has querystring also that it just show how to pass the parameter and we don't use).

<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/AppGenerator.ashx?id=1" Target="_blank">PDF Generate</asp:HyperLink>

Creaet a Generic Handler AppGenerato.ashx here as below.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
public class AppGenerator : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
         try
        {
            int id;
            string Qs = context.Request.QueryString["id"];

            if (int.TryParse(Qs, out id))
            {
                //go here to handle the querystring parameter
                //you can get the byte array data from your DB depend on parameter.

                //I use the static file here for sample and added pdf file in "Files" folder.

                 string fileName = "Tutorial.pdf";
                string fullPath = context.Request.MapPath("~/Files/" + fileName);//here is relative file path in your project.

                //get byte array from file.
                System.IO.FileStream fs = System.IO.File.OpenRead(fullPath);
                int byteLen = (int)fs.Length;
                byte[] file = new byte[byteLen];
                fs.Read(file, 0, byteLen);

                //context.Response.ContentType = "image/jpeg"; // for images
                //context.Response.ContentType = "image/gif";
                //context.Response.ContentType = "image/png";
                //context.Response.ContentType = "text/plain"; for .txt
                //context.Response.ContentType = "text/HTML";   for .html, .htm

                context.Response.ContentType = "application/pdf";
                context.Response.BinaryWrite(file);
                context.Response.Flush();
            }
        }
        catch (Exception ex)
        { }
    }
    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}
That's it. When you click on the "PDF Generate" hyperlink, it show the PDF on new browser. I haven't found yet for showing MS Word or Excel in browser. If you've got, pls drop a line. :)

Creating a Simple Auto-Complete TextBox with ASP.Net Ajax

2012-01-29T21:11:00.001+07:00

AutoComplete is an ASP.NET AJAX extender that can be attached to any TextBox control, and will associate that control with a popup panel to display words that begin with the prefix typed into the textbox. The dropdown with your words supplied by a web service is positioned on the bottom left of the text box.
When you have typed more content than the specified minimum word length, a popup will show words or phrases starting with that value. We'll create an auto-complete textbox by following these steps.

1. Create an .aspx page and add the following CSS to <head> tag.

<style type="text/css">

        /*AutoComplete flyout */

        .autocomplete_completionListElement

        {

            margin: 0px !important;

            background-color: inherit;

            color: windowtext;

            border: buttonshadow;

            border-width: 1px;

            border-style: solid;

            cursor: 'default';

            overflow: auto;

            height: 200px;

            text-align: left;

            left: 0px;

            list-style-type: none;

        }

        /* AutoComplete highlighted item */

        .autocomplete_highlightedListItem

        {

            background-color: #ffff99;

            color: black;

            padding: 1px;

        }

        /* AutoComplete item */

        .autocomplete_listItem

        {

            background-color: window;

            color: windowtext;

            padding: 1px;

        }

</style>

2.    Add a ToolkitScriptManager to <form> tag.

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>

3.    Add an textbox and button servercontrol to <form> tag. Here, we use javascript “onkeydown” event to caugh the “Enter” press.

<asp:TextBox ID="txtQuery" runat="server" Width="300px" Height="20px" autocomplete="off" onkeydown="if(window.event.keyCode == 13){document.getElementById('btnSearch').click();};"></asp:TextBox><asp:Button ID="btnSearch" OnClick="btnSearch_Click" runat="server" Text="Search" CausesValidation="False">
</asp:Button>

4.    Add the following button click event in code-behind.

protected void btnSearch_Click(object sender, EventArgs e)
        {
            if (txtQuery.Text != "")
            {
        //when you press “Search” button, it go to search.aspx.
                Response.Redirect("~/search.aspx?query=" + txtQuery.Text);
                //you need to get “query” QueryStirng for further processing in search.aspx page.
            }
            else
            {
                Response.Redirect("search.aspx");
            }
        }

5.    Add an AutoCompleteExtender as below.

<asp:AutoCompleteExtender ID="autoComplete1" runat="server" DelimiterCharacters=";,:"      CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem" CompletionListItemCssClass="autocomplete_listItem"        CompletionListCssClass="autocomplete_completionListElement" CompletionSetCount="20" EnableCaching="true" CompletionInterval="500" MinimumPrefixLength="1" ServiceMethod="GetCompletionList"        ServicePath="AutoComplete.asmx" TargetControlID="txtQuery" BehaviorID="AutoCompleteEx">
</asp:AutoCompleteExtender>

6.    Add an AutoComplete.asmx and put the following code. It use Microsoft Enterprise Library (Microsoft.Practices.EnterpriseLibrary.Data.dll) to get the data access. So, we nee to add .dll to bin folder.

using System.Data;
using Microsoft.Practices.EnterpriseLibrary.Data;
[System.Web.Script.Services.ScriptService]
public class AutoComplete : System.Web.Services.WebService
{
private Database getDBConn()
        {
//To get sql connection.
            Database sqlDB = DatabaseFactory.CreateDatabase("sqlConn");
            return sqlDB;
        }
        [WebMethod]
        public string[] GetCompletionList(string prefixText)
        {
            DataSet ds = null;
            List<string> items = new List<string>(50);
            try
            {
                Database DB = getDBConn();
                ds = DB.ExecuteDataSet("GetProductsWithPrefix", prefixText);

                for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
                {
                    items.Add(ds.Tables[0].Rows[i][0].ToString());
                }
            }
            catch (Exception ex)
            {
                items = null;
            }
            return items.ToArray();
        }
}

7.    Add the Sql server connection in web.config look like below. We use "Northwind" database and it depends on your server setting.

<connectionStrings>
    <add name="sqlConn" connectionString="Data Source=.\SQLEXPRESS;Initial Catalog=Northwind;User ID=sa;Password=sa@sa"
      providerName="System.Data.SqlClient" />
</connectionStrings>

8.    Add the following stored procedure into “Northwind” database.

USE [Northwind]
GO
CREATE PROCEDURE [dbo].[GetProductsWithPrefix]
    @keyword nvarchar(100)
AS
BEGIN

 SELECT TOP 50 ProductName  FROM Products WHERE ProductName LIKE @keyword + '%' ORDER BY ProductID DESC

END

By default, the AutoCompleteExtender will not display suggestions until after you have typed at least 3 characters. I changed this default behavior by modifying the AutoCompleteExtender MinimumPrefixLength property.

More detail about AutoCompleteExtender :
http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/AutoComplete/AutoComplete.aspx

How to stop ASP.NET Development Server after stopping the solution.

2012-01-28T17:09:00.000+07:00

When we run the very big solution, asp.net icon is still in system tray even after stopping that solution (ASP.NET Development Server is running behind scene). It is very tedious to close the icon one by one. Don’t be worry. The way to solve is simple and we have to use macros in Visual Studio.

To create the macros, Open the Visual Studio and go to Tools Menu > Macros > Macros IDE, otherwise use short cut key Alt+F11. You see IDE as below.

Visual Studio Macros IDE

On Visual Studio Macros, go to MyMacros Project > EnvironmentEvent Module and create DebuggerEvents_OnEnterDesignMode event as below.

Private Sub DebuggerEvents_OnEnterDesignMode(ByVal Reason As EnvDTE.dbgEventReason) Handles DebuggerEvents.OnEnterDesignMode

        For Each p In System.Diagnostics.Process.GetProcesses

            If p.ProcessName.IndexOf("WebDev.WebServer40") > -1 Then

                p.Kill()

            End If

        Next

End Sub

That’s is all you have to do. Right now, you don’t need to worry about it. Just mouse over the asp.net icons.:)

How to make QR codes that can be scanned by a mobile phone.

2012-01-28T15:07:00.000+07:00

A QR code (Quick Response code) is a type of matrix barcode (or two-dimensional code) first designed for the automotive industry. More recently, the system has become popular outside of the industry due to its fast readability and large storage capacity compared to traditional UPC barcodes. The code consists of black modules arranged in a square pattern on a white background. The information encoded can be text, URL or other data - like in the pages of magazines, in advertisements and even on TV and Web sites, and is readable by dedicated QR barcode readers and camera phones. You can make a QR code to link to your website, your email address or something else.


Structure of a QR code, highlighting functional elements


QR code has been used and printed on Chinese train tickets since late 2009.

It is quite easy to make the QR code and short url as well. Popular URL shortener Bit.ly automatically creates QR codes for every URL. In order to see QR code, simply add “.qr” at the end of your shortened URL. Another one is qr.net and I used it for my web site.

Google’s URL shortener, goo.gl, can also do the same and more – you can see the QR created for every URL and traffic sources in the statics page.

To scan the QR, you need QR app. If you have a smart phone, go to the App store and search for a QR code reader. You’ll find several free apps. Run the App and then hold your phone’s camera over a QR code to read it. For iPhone 4s, I use QR Reader from here. It is quite easy and effective.

Now, it is time to make QR code for your business.

More about QR code : http://en.wikipedia.org/wiki/QR_code

How to fix "The Remote server returned an error :(407) Proxy Authentication Required".

2012-01-22T00:58:00.003+07:00

When your network use a proxy server for your LAN, you got the error for running the web application as below.

Error : The Remote server returned an error :(407) Proxy Authentication Required.

At that time, go Tools Menu> Internet Options> Connections Tab> LAN Settings and see Proxy Server information as below.

Add the following section to web.config.
<system.net>
    <defaultProxy enabled="true" useDefaultCredentials="true">
       <proxy bypassonlocal="True" proxyaddress="http://webproxy:80/>
    </defaultProxy>
</system.net>

That's it. How's easy!

How to show Modal Dialog Boxes with .Net Ajax

2012-01-03T01:34:00.001+07:00

With Microsoft® ASP.NET AJAX, dialog boxes are especially important for displaying context-sensitive information without a page reload or new page. It is therefore important to devise a different implementation of dialog boxes that are as effective as modal popups but hassle-free for users.
The ModalPopup extender takes the markup generated by a server-side ASP.NET panel and shows or hides it as the user clicks on an associated HTML element. Initially styled as hidden, the dialog box is downloaded onto the client when the page is loaded and then shown or hidden on demand.
The following example show Modal Dialog popup to edit the customer information as below :

First of all, you need to add AjaxControlToolKit.dll to References like look:

Here is Stylesheet and Javascript to add <head> tag.

<style type="text/css">

    .modalPopup

    {

        background-color: #ffffdd;

        border-width: 3px;

        border-style: solid;

        border-color: Gray;

        padding: 3px;

        width: 350px;

    }

    .modalBackground

    {

        background-color: Gray;

        filter: alpha(opacity=70);

        opacity: 0.7;

    }

</style>

<script type="text/javascript">

    function ok(sender, e) {

        $find('ModalPopupExtender1').hide();

        __doPostBack('editBox_OK', e);

    }

    function cancel(sender, e) {

        $find('ModalPopupExtender1').hide();

    }

    function pageLoad(sender, args) {

    //Note that the OnKeyPress event handler will not work unless you register it with the Microsoft AJAX     //Library. The best place to run this registration code is the pageLoad function, like so:

        $addHandler(document, "keydown", onKeyDown);

    }

    function onKeyDown(args) {

        //Closing the Popup Using the Esc Key 

        if (args.keyCode == Sys.UI.Key.esc) {

            $find('ModalPopupExtender1').hide();

        }

    } 

</script>

Here is server controls in .aspx page.

<form id="form1" runat="server">

    <asp:ScriptManager ID="ScriptManager1" runat="server"/>

    <div>

        <!--Using Partial Rendering to Update the Customer View -->

        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">

            <ContentTemplate>

                <table>

                    <tr>

                        <td><b>Customer ID:</b></td>

                        <td><asp:Label runat="server" ID="lblCustomerID" Text="C00001"/></td>

                    </tr>

                    <tr>

                        <td><b>Company Name:</b></td>

                        <td><asp:Label runat="server" ID="lblCompanyName" Text="Eastern Connection"/></td>

                    </tr>

                    <tr>

                        <td><b>Contact Name:</b></td>

                        <td><asp:Label runat="server" ID="lblContactName" Text="Ann Devon"/></td>

                    </tr>

                    <tr>

                        <td><b>Country:</b></td>   

                        <td><asp:Label runat="server" ID="lblCountry" Text="Germany"/></td>

                    </tr>

                     <tr>

                        <td>

                            <asp:Button runat="server" ID="btnEditText" Text="Edit text" OnClick="btnEditText_Click" />

                        </td>

                        <td>

                        </td>

                    </tr>

                </table>

            </ContentTemplate>

            <Triggers>

                <asp:AsyncPostBackTrigger ControlID="editBox_OK"/>

            </Triggers>

        </asp:UpdatePanel>

    </div>

    <div>

        <asp:Button runat="server" ID="hiddenTargetControlForModalPopup" Style="display: none" />           <!-- Dialog box:: Edit customer info -->

<asp:Panel ID="pnlEditCustomer" runat="server" CssClass="modalPopup" style="display:none;">
            <div style="margin:10px">
            <asp:UpdatePanel runat="server" ID="ModalPanel1" RenderMode="Inline" UpdateMode="Conditional">
                <ContentTemplate>
                <table>
                    <tr>
                        <td><b>Customer ID:</b></td>
                        <td><asp:Label runat="server" id="editCustomerID" />
                        </td>
                    </tr>
                    <tr>
                        <td><b>Company Name:</b></td>
                        <td><asp:TextBox runat="server" id="editTxtCompanyName" /></td>
                    </tr>
                    <tr>
                        <td><b>Contact Name:</b></td>
                        <td><asp:TextBox runat="server" id="editTxtContactName" /></td>
                    </tr>
                    <tr>
                        <td><b>Country:</b></td>
                        <td><asp:TextBox runat="server" id="editTxtCountry" /></td>
                    </tr>
                </table>
                <hr />
                <asp:Button ID="btnApply" runat="server" Text="Apply" width="50px" OnClick="btnApply_Click"/>
                </ContentTemplate>
                </asp:UpdatePanel>
                <asp:Button ID="editBox_OK" runat="server" Text="OK" width="50px"
                    onclick="editBox_OK_Click"/>
                <asp:Button ID="editBox_Cancel" runat="server" Text="Cancel" width="50px" />
            </div>
        </asp:Panel>
    </div>
    <div>
        <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
            TargetControlID="hiddenTargetControlForModalPopup"
            PopupControlID="pnlEditCustomer"
            BackgroundCssClass="modalBackground"
            DropShadow="false"
            OkControlID="editBox_OK"
            OnOkScript="ok()"
            OnCancelScript="cancel()"
            CancelControlID="editBox_Cancel" />
    </div>
</form>

Add the following to code-behind.
protected void btnEditText_Click(object sender, EventArgs e)
{
   // Initialize the controls in the panel used as the UI of the dialog box
   InitDialog();

   // The panel markup has been served already to the page. To edit it,
   // you need to a) wrap the panel's content in an UpdatePanel region and
   // b) update the panel once you made any changes
   ModalPanel1.Update();

   // Order to inject the script to show the dialog as the page loads up
   // in the browser.
   ModalPopupExtender1.Show();
}
protected void InitDialog()
{
   editCustomerID.Text = lblCustomerID.Text;
   editTxtCompanyName.Text = lblCompanyName.Text;
   editTxtContactName.Text = lblContactName.Text;
   editTxtCountry.Text = lblCountry.Text;
   SetFocus("editTxtCompanyName");
}
protected void btnApply_Click(object sender, EventArgs e)
{
   // Edit the server controls in the modal panel. Because the
   // call occurs over a partial rendering call, any updates
   // will be automatically reflected by the client UI.
   if (editTxtCountry.Text == "Germany")
       editTxtCountry.Text = "Cuba";
   else
       editTxtCountry.Text = "USA";
}
protected void editBox_OK_Click(object sender, EventArgs e)
{
   // Save to the database
   // Refresh the UI
   lblCompanyName.Text = editTxtCompanyName.Text;
   lblContactName.Text = editTxtContactName.Text;
   lblCountry.Text = editTxtCountry.Text;
}

That's it. Develope on the trend!

Original Post : http://msdn.microsoft.com/en-us/magazine/cc164247.aspx

ModalPopup Demonstration :
http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/ModalPopup/ModalPopup.aspx

Note : Don't forget to add EnableEventValidation="false" to the 'page' directive.

How to download image from a web site programatically using HttpWebRequest

2012-01-02T00:56:00.000+07:00

I was working on adding new features to Car Pass application. The new feature will show some details about the car accident and one of the details is showing map image associated with car accident event. To get that, I have developed an image service that downloads the map images(Google Static Map see here) in the background. This is done using HttpWebRequest object to send request to image URL with parameter. Following code shows you how you can download an image from a Url programatically using HttpWebRequest.

Create .aspx page and put the following code in code-behind.

protected void Page_Load(object sender, EventArgs e)

{

    //Here should be your image url.

    String url = "http://maps.googleapis.com/maps/api/staticmap?center=huamark,bangkapi,th&zoom=15&size=500x500&scale=1&format=jpg&maptype=roadmap&language=en&markers=icon:http://www.iblogseeker.com/favicon.ico|13.758185,100.628732&sensor=false";

    HttpWebRequest webRequest = HttpWebRequest.Create(url) as HttpWebRequest;

    HttpWebResponse resp = webRequest.GetResponse() as HttpWebResponse;

    if (resp.StatusCode == HttpStatusCode.OK)

{

        if (resp.ContentType.Contains("image/"))

{

            int pos = resp.ContentType.IndexOf("/");

            string fileName = string.Format("{0}.{1}", "Map", resp.ContentType.Substring(pos + 1));

            byte[] imageContent = ProcessImageStream(resp);

            MemoryStream ms = new MemoryStream(imageContent);

            System.Drawing.Image img = System.Drawing.Image.FromStream(ms);

            string path = string.Format(@"G:\{0}", fileName);

            img.Save(path);

            //for image manipulation with third party component such as Telerik Reporting, Bitmap is better.

            //e.g. when you rotate image and put in Telerik Report as image.

            System.Drawing.Bitmap bmap= new Bitmap(ms);

            bmap.RotateFlip(RotateFlipType.Rotate90FlipXY);

            bmap.Save(string.Format(@"G:\B{0}", fileName));

}

}

}

Here is utility function called from Page_Load.

private static byte[] ProcessImageStream(HttpWebResponse resp)

{

    byte[] streamContent;

    MemoryStream memStream = new MemoryStream();

    const int BUFFER_SIZE = 4096;

    int iRead = 0;

    Int64 iSize = 0;

    memStream.SetLength(BUFFER_SIZE);

try

{

        using (memStream)

{

            while (true)

{

                iRead = 0;

                byte[] respBuffer = new byte[BUFFER_SIZE];

                iRead = resp.GetResponseStream().Read(respBuffer, 0, BUFFER_SIZE);

                if (iRead == 0)

{

                    break; 

}

                iSize += iRead;

                memStream.SetLength(iSize);

                memStream.Write(respBuffer, 0, iRead);

}

            streamContent = memStream.ToArray();

}

}

    catch (Exception ex)

{

        throw ex;

}

    return streamContent;

}

When you run the application, it download image and save two images in drive G:.

ASP.NET Gridview with custom paging and sorting.

2011-12-25T01:16:00.000+07:00

When displaying large amounts of data it's often best to only display a portion of the data, allowing the user to step through the data ten or so records at a time. Additionally, the end user's experience can be enhanced if they are able to sort the data by one of the columns.
While default paging was easy to implement, it carried with it a performance cost since all records to be paged through were being returned from the database. That is, if the DataGrid was paging through a total of 1,000 records, showing 10 records per page, on each and every page request all 1,000 records would be returned from the database, but only the 10 appropriate ones would be displayed.
Custom paging solved this performance issue by requiring the page developer to tell the DataGrid exactly how many total records were being paged through as well as returning the precise subset of records to display on the page. The following example use ObjectDataSource for DAL and Microsoft.Practices.EnterpriseLibrary.Data.dll to shorten code.

//Here is server control.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4"
    AllowPaging="True" AllowSorting="True" AlternatingRowStyle-Wrap="True"
    DataSourceID="ObjectDataSource1" EmptyDataText="There is no data.">
    <RowStyle BackColor="#EFF3FB" />
    <Columns>
        <asp:BoundField HeaderText="No." DataField="No" />
        <asp:BoundField HeaderText="CustomerID" DataField="CustomerID" SortExpression="CustomerID"/>
        <asp:BoundField HeaderText="CompanyName" DataField="CompanyName" SortExpression="CompanyName" />
        <asp:BoundField HeaderText="ContactName" DataField="ContactName" SortExpression="ContactName" />
        <asp:BoundField HeaderText="ContactTitle" DataField="ContactTitle" SortExpression="ContactTitle" />
    </Columns>
    <AlternatingRowStyle BackColor="White" />
</asp:GridView>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="GridDataPage"
    TypeName="DAL" SelectCountMethod="DataRowCount"
    SortParameterName="SortExpression" EnablePaging="True">
    <SelectParameters>
        <asp:Parameter Name="maximumRows" Type="Int32" />
        <asp:Parameter Name="startRowIndex" Type="Int32" />
        <asp:Parameter Name="SortExpression" Type="String" />
    </SelectParameters>
</asp:ObjectDataSource>

//Here is the connection string in web.config and it use sample "Northwind" db and "Customers" table.
<connectionStrings>
    <add name="sqlConn" providerName="System.Data.SqlClient" connectionString="Server='.\SQLEXPRESS';uid='xxxxxx';pwd='xxxxxxxx';Database='Northwind';Pooling=False;"/>
</connectionStrings>

//Here is the underlying DAL class for ObjectDataSource.
using System.Configuration;
using Microsoft.Practices.EnterpriseLibrary.Data;
public class DAL
{
    // Methods
    private static Database getDatabase()
    {
        Database database = null;
        try
        {
            database = DatabaseFactory.CreateDatabase("sqlConn");
        }
        catch (Exception ex)
        {
            //handle exception here.
        }
        return database;
    }
    public static DataSet GridDataPage(int maximumRows, int startRowIndex, string SortExpression)
    {
        DataSet ds = new DataSet();
        if (startRowIndex >= maximumRows)
        {
            startRowIndex++;
        }
        try
        {
            ds = getGridData(maximumRows, startRowIndex, SortExpression);
            if (ds != null && ds.Tables[0].Rows.Count > 0)
            {
                startRowIndex = (startRowIndex > 0) ? startRowIndex : 1;
                for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
                {
                    ds.Tables[0].Rows[i][0] = Convert.ToString((int)(i + startRowIndex));
                }
                HttpContext.Current.Items["rowCount"] = Convert.ToInt32(ds.Tables[1].Rows[0][0].ToString());
                return ds;
            }
            HttpContext.Current.Items["rowCount"] = 0;
        }
        catch (Exception ex)
        {
            //handle exception here.
        }
        return ds;
    }
    public static DataSet getGridData(int maximumRows, int startRowIndex, string SortExpression)
    {
        DataSet ds = new DataSet();
        try
        {
            ds = getDatabase().ExecuteDataSet("GetCustomers", new object[] { maximumRows, startRowIndex, SortExpression });
        }
        catch (Exception ex)
        {
            ds = null;
            //handle exception here.
        }
        return ds;
    }
    public static int DataRowCount(int maximumRows, int startRowIndex, string SortExpression)
    {
        return (int)HttpContext.Current.Items["rowCount"];
    }
}

//Here is transact-sql.
USE [Northwind]
GO
ALTER PROCEDURE [dbo].[GetCustomers]
    @pageSize INT = NULL,
    @pageStart INT = NULL,
    @orderBy nvarchar(200) = NULL
AS
BEGIN

DECLARE @sqlPopulate VARCHAR(2000)
IF @pageSize IS NULL or @pageSize = 0
    SET @pageSize = 10;
IF @pageStart IS NULL
    SET @pageStart = 0;
IF @orderBy IS NULL OR @orderBy = ''
    SET @orderBy = 'CustomerID DESC';
IF @pageStart = 0
BEGIN
    SET @sqlPopulate = 'SELECT '' '' AS No, CustomerID, CompanyName, ContactName, ContactTitle ' +
        + ' FROM dbo.Customers WHERE CustomerID IN '+
        '(SELECT top '+ CAST(@pageSize AS VARCHAR(10)) +' CustomerID FROM dbo.Customers ';

    SET @sqlPopulate = @sqlPopulate + ' ORDER BY ' + @orderBy +
        ') ORDER BY ' + @orderBy;
END
ELSE
BEGIN
    SET @sqlPopulate = 'SELECT '' '' AS No, CustomerID, CompanyName, ContactName, ContactTitle ' +
        ' FROM Customers WHERE CustomerID IN '+
        '(SELECT top '+ CAST(@pageSize AS VARCHAR(10)) + ' CustomerID FROM Customers WHERE CustomerID NOT IN '+
            '(SELECT top '+ CAST((@pageStart-1) AS VARCHAR(10)) +' CustomerID FROM Customers ';

    SET @sqlPopulate = @sqlPopulate + ' ORDER BY ' + @orderBy +
            ') ORDER BY ' + @orderBy + ') ORDER BY ' + @orderBy;
END
EXEC(@sqlPopulate)

SET @sqlPopulate = '';
SET @sqlPopulate = 'SELECT COUNT(*) FROM Customers';
EXEC (@sqlPopulate)
END

Useful link:
http://msdn.microsoft.com/en-us/library/ff632023.aspx

http://msdn.microsoft.com/en-us/library/aa479347.aspx

That's it. Enjoy!

What is HTML5?

2011-12-23T14:34:00.000+07:00

HTML5 will be the new standard for HTML, XHTML, and the HTML DOM.

The previous version of HTML came in 1999. The web has changed a lot since then.

HTML5 is still a work in progress. However, most modern browsers have some HTML5 support.

Some of the most interesting new features in HTML5:
    * The canvas element for drawing
    * The video and audio elements for media playback
    * Better support for local offline storage
    * New content specific elements, like article, footer, header, nav, section
    * New form controls, like calendar, date, time, email, url, search

Original link : http://www.w3schools.com/html5/html5_intro.asp

How to write log using log4net in asp.net.

2011-12-23T10:00:00.000+07:00

The Apache log4net library is a tool to help the programmer output log statements to a variety of output targets. log4net is a port of the excellent Apache log4j™ framework to the Microsoft® .NET runtime.
This article describes the easy way to be followed for using File Appender of Log4net to write to a text file in a web application day by day.

First of all, get the latest version of log4net library and add reference of it in your project. You can download here : http://logging.apache.org/log4net/download_log4net.cgi.

Add below line in your AssemblyInfo.cs file.
[assembly: log4net.Config.XmlConfigurator(ConfigFile="Web.config", Watch=true)]

Folder where you put log4net

Add below section in Web.Config file.

<configuration>
<configSections>
    
    <section name="log4net" type="log4net.Config.Log4NetConfigurationSectionHandler,log4net"/>
    
</configSections>

<log4net>
    <root>
      <level value="ALL"/>
      <appender-ref ref="MyTxt"/>
    </root>
    <appender name="MyTxt" type="log4net.Appender.RollingFileAppender">
      <file value="G:\Log_"/>
      
      <appendToFile value="true"/>
      <datePattern value="yyyy-MM-dd.\tx\t"/>
      
      <rollingStyle value="Date"/>
      <param name="StaticLogFileName" value="false"/>
      <layout type="log4net.Layout.PatternLayout">
        <conversionPattern value="%d [%-5thread] %-5level : %logger : %message %timestampms %n"/>
      </layout>
    </appender>
</log4net>

<appSettings>
    <add key="logging" value="Y"/>
    
</appSettings>
//Other sections may go here
</configuration>

Add one class Logging.cs file.
public class Logging
{
    public Logging()
    {
        //
        // TODO: Add constructor logic here
        //
    }
    public static void logMsg(string msg, ref log4net.ILog log)
    {
         if (ConfigurationManager.AppSettings["logging"].ToString().Equals("Y"))
        {
            //There are seven logging levels.
            log.Error("MyApp : " + msg);
            //log.Fatal("MyApp : " + msg);
            //log.Warn("MyApp : " + msg);
            //log.Info("MyApp : " + msg);
            //log.Debug("MyApp : " + msg);
        }
    }
}

In your code-behind,
//declare private static variable.
private static log4net.ILog log4 = log4net.LogManager.GetLogger(System.Reflection.MethodBase.GetCurrentMethod().DeclaringType);

protected void Page_Load(object sender, EventArgs e)
{
    try
    {
        String Qs = Request.QueryString["id"].ToString();
        //here cause error when it miss id querystring.
    }
    catch (Exception ex)
    {
        Logging.logMsg(ex.Message, ref log4);
    }
}

when it lead to error every times, it save the error in log file(here may be Log_2011-12-22.txt) and log statement may be similar as below :
2011-12-22 16:37:47,034 [4688 ] ERROR : WebAppBlog._Default : MyApp : Object reference not set to an instance of an object. 534ms

That's it. Thank for reading.

$(document).ready() vs pageLoad() vs Application.Init

2011-12-22T10:00:00.000+07:00

jQuery’s $(document).ready()

    * Ideal for onetime initialization.
    * Optimization black magic; may run slightly earlier than pageLoad().
    * Does not re-attach functionality to elements affected by partial postbacks.

ASP.NET AJAX’s pageLoad()

    * Unsuitable for onetime initialization if used with UpdatePanels.
    * Slightly less optimized in some browsers, but consistent.
    * Perfect for re-attaching functionality to elements within UpdatePanels.

ASP.NET AJAX’s Application.Init

    * Useful for onetime initialization if only ASP.NET AJAX is available.
    * More work required to wire the event up.
    * Exposes you to the “sys is undefined” error if you aren’t careful. For this error, see this post
   http://www.aspmemo.net/2011/12/how-to-solve-sys-is-undefined-error.html

Original Post : http://encosia.com/document-ready-and-pageload-are-not-the-same/

What is jQuery?

2011-12-22T00:57:00.000+07:00

jQuery is a library of JavaScript Functions.

jQuery is a lightweight "write less, do more" JavaScript library.

The jQuery library contains the following features:

    * HTML element selections
    * HTML element manipulation
    * CSS manipulation
    * HTML event functions
    * JavaScript Effects and animations
    * HTML DOM traversal and modification
    * AJAX
    * Utilities

More detail : http://www.w3schools.com/jquery/jquery_intro.asp

What is AJAX?

2011-12-22T00:54:00.001+07:00

AJAX = Asynchronous JavaScript and XML.

AJAX is a technique for creating fast and dynamic web pages.
AJAX is not a new programming language, but a new way to use existing standards.

AJAX is the art of exchanging data with a server.
AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes and update parts of a web page, without reloading the whole page.

Note : Classic web pages, (which do not use AJAX) must reload the entire page if the content should change.

Useful Link : http://www.w3schools.com/ajax/ajax_intro.asp

Google AJAX Feed API

2011-12-21T16:00:00.000+07:00

With the AJAX Feed API, you can download any public Atom or RSS feed using only JavaScript, so you can easily mash up feeds with your content and other APIs like the Google Maps API.
The Google AJAX Feed API takes the pain out of developing mashups in JavaScript because you can now mash up feeds using only a few lines of JavaScript, rather than dealing with complex server-side proxies. This makes it easy to quickly integrate feeds on your website.

Google AJAX Feed API Documentation

Feed Examples

JQuery : Using events to take effect when the user interacts with the browser

2011-12-20T16:38:00.000+07:00

For every onxxx event available, like onclick, onchange, onsubmit, there is a jQuery equivalent. Some other events, like ready and hover, are provided as convenient methods for certain tasks.

Here is CSS and script to put <head> tag.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<style type="text/css">
    .highlight { border: 5px dotted #eee;}
</style>
<script type="text/javascript">
    $(document).ready(function () {
        //go here the following example scripts
    });
</script>

Add the following to <body> tags.
<a name="top" href="#bottom">Go to bottom</a>
<form id="form">
    Form 1
    <input type="text" value="XXX"/>
</form>
<form>
    Form 2
    <input type="text" value="YYY"/>
</form>
<a id="reset" href="#">Reset!</a>
<br />
<a id="clickme" href="http://www.aspmemo.net">Click Me!</a>
<p>This is probably the most common mishap. The remedy is simple--yank! It's most easily done
with two people. One to restrain the bird and the <a href="#"> This is a link. Hover me to
highlight the parent paragraph.</a> other to pull the feather. Use pliers, or a hemostat. Tweezers won't
work on primaries.</p>
<p>This is probably the most common mishap. The remedy is simple--yank! It's most easily done
with two people. One to restrain the bird and the <a href="#"> This is a link. Hover me to
highlight the parent paragraph.</a> other to pull the feather. Use pliers, or a hemostat. Tweezers won't
work on primaries.</p>
<a name="bottom" href="#top">Go to top</a>

One task you often face is to call methods on DOM elements that are not covered by jQuery. Think of a form you would like to reset after you submitted it successfully via AJAX.

$(document).ready(function() {
   // use this to reset a single form
   $("#reset").click(function() {
     $("form")[0].reset();
   });
});
This code selects the first form element and calls reset() on it. In case you had more than one form, you could also do this:

$(document).ready(function() {
   // use this to reset several forms at once
   $("#reset").click(function() {
     $("form").each(function() {
       this.reset();
     });
   });
});
This would select all forms within your document, iterate over them and call reset() for each. Note that in an .each() function, this refers to the actual element. Also note that, since the reset() function belongs to the form element and not to the jQuery object, we cannot simply call $("form").reset() to reset all the forms on the page.
The [expression] syntax is taken from XPath and can be used to filter by attributes. Maybe you want to select all anchors that have a name attribute:

$(document).ready(function() {
   $("a[name]").css("background", "#eee" );
});
This adds a background color to all anchor elements with a name attribute.

More often than selecting anchors by name, you might need to select anchors by their "href" attribute. This can be a problem as browsers behave quite inconsistently when returning what they think the "href" value is. To match only a part of the value, we can use the contains select "*=" instead of an equals ("="):

$(document).ready(function() {
   $("a[href*='aspmemo']").click(function() {
        alert('Bye JQuery!');
   });
});
For all hovered anchor elements, the parent paragraph is searched and a class "highlight" added and removed. In addition, you can also select parent elements (also known as ancestors for those more familiar with XPath). Maybe you want to highlight the paragraph that is the parent of the link the user hovers. Try this:

$(document).ready(function(){
   $("a").hover(function(){
     $(this).parents("p").addClass("highlight");
   },function(){
     $(this).parents("p").removeClass("highlight");
   });
});
For all hovered anchor elements, the parent paragraph is searched and a class "highlight" added and removed.

Lets shop here. See you.

Useful link : http://www.w3schools.com/jquery/jquery_ref_events.asp

JQuery : Using selectors to get the specific elements

2011-12-20T00:39:00.000+07:00

jQuery provides two approaches to select elements. The first uses a combination of CSS and XPath selectors passed as a string to the jQuery constructor (eg. $("div > ul a")). The second uses several methods of the jQuery object. Both approaches can be combined. Let's start here.

Here is CSS and script to put <head> tag.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<style type="text/css">
    .red { background-color: red;}
    .blue { color: blue;}
    .green { color: green; }
</style>
<script type="text/javascript">
    $(document).ready(function () {
        $("#orderedlist").addClass("red");
        $("#orderedlist > li").addClass("blue");
        $("#orderedlist li:last").hover(function () {
            $(this).addClass("green");
        }, function () {
            $(this).removeClass("green");
        });
    });
</script>

Add the following to the <body>:
<ol id="orderedlist">
    <li>First element</li>
    <li>Second element</li>
    <li>Third element</li>
</ol>

To try some of these selectors, we select and modify the first ordered list in our example.
To get started, we want to select the list itself. The list has an ID "orderedlist". In classic JavaScript, you could select it by using document.getElementById("orderedlist"). With jQuery, we did it like this:

$(document).ready(function() {
   $("#orderedlist").addClass("red");
});

The example provides a stylesheet with a class "red" that simply adds a red background. Therefore, when you reload the page in your browser, you should see that the ordered list has a red background. I added some more classes to the child elements of this list as below.

$(document).ready(function() {
   $("#orderedlist > li").addClass("blue");
});

This selects all child lis of the element with the id orderedlist and adds the class "blue".
Now for something a little more sophisticated: We want to add and remove the class when the user hovers the li element, but only on the last element in the list. So, I inserted them to $(document).ready() like below:

   $("#orderedlist li:last").hover(function() {
    $(this).addClass("green");
   },function(){
    $(this).removeClass("green");
   });

There are many other selectors similar to CSS and XPath syntax.

Full post : http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery#Find_me:_Using_selectors_and_events

Other useful link : http://www.w3schools.com/jquery/jquery_ref_selectors.asp

Hello jQuery / Getting Started with jQuery

2011-12-19T15:18:00.000+07:00

We start with an empty html page or .aspx page.This page just loads the .js library (make sure the URL points to where you stored your copy of jquery).As almost everything we do when using jQuery reads or manipulates the document object model (DOM), we need to make sure that we start adding events as soon as the DOM is ready.
To do this, we register $(document).ready event for the document. Putting an alert into that function does not make much sense, as an alert does not require the DOM to be loaded. So lets try something a little more sophisticated: Show an alert when clicking a link.

Here is script.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

//otherwise, you can use built-in .js file while you use VS 2010. 

<script type="text/javascript">

 $(document).ready(function() {

   $("a").click(function() {

     alert("Hello world!");

});

});

</script>

//Add the following to the <body>:

<a href="">Link</a>

This should show the alert as soon as you click on the link. Let's have a look at what we are doing: $("a") is a jQuery selector, in this case, it selects all a elements. $ itself is an alias for the jQuery "class", therefore $() constructs a new jQuery object. The click() function we call next is a method of the jQuery object. It binds a click event to all selected elements (in this case, a single anchor element) and executes the provided function when the event occurs.

This is similar to the following code:

<a href="" onclick="alert('Hello world')">Link</a>

The difference is quite obvious: We don't need to write an onclick for every single element. We have a clean separation of structure (HTML) and behavior (JS), just as we separate structure and presentation by using CSS.

Source : http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery#Hello_jQuery

How to create silde down FAQs using jQuery.

2011-12-18T20:45:00.000+07:00

This example will show you how to use jQuery in order to generate easy-to-read and eye-pleasing FAQs, with a slide down effect. we are going to apply a “faq” class to the <dl> element so that it do not affect the other definition lists throughout the page. First of all we need to find and hide all the <dd> elements which are children of any <dl> element with the “faq” class. And then we need to add the toggle effect when a user clicks on a definition title so that when the user clicks on the <dt>, the script navigates the DOM to find the next element (which is going to be the relative <dd>), and it toggles it. You can set the motion’s speed to “slow”, “normal” or “fast”.

//Here is built-in javascript file while you create asp.net web site with VS 2010
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
//otherwise, you can use the following script.
//<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Here is CSS.
<style type="text/css">
    .faq
    {
        margin: 30px;
        background: #d7e7ff;
        padding: 30px 50px 0 30px;
        border: 1px solid #92cdec;
    }
    .faq dt
    {
        font-weight: bold;
        padding: 3px 0 15px 0px;
        position: relative;
        cursor: pointer;
    }
    .faq dd
    {
        padding: 0 0 5px 0px;
        position: relative;
        color: #333;
    }
</style>

Here is javascript.
<script type="text/javascript">
    $(document).ready(function () {
        $('.faq dd').hide();
        $('.faq dt').click(function () {
            $(this).next().slideToggle('normal');
        });
    });
</script>

Here is form tag.
<form id="form1" runat="server">
    <dl class="faq">
        <dt>Q.How can we check if all the validation control are valid and proper?</dt>
        <dd>A.Using the Page.IsValid () property you can check whether all the validation are done.</dd>
        <dt>Q.If client side validation is enabled in your Web page, does that mean server side code is not run.</dt>
        <dd>A.When client side validation is enabled server emit’s JavaScript code for the custom validators. However,
            note that does not mean that server side checks on custom validators do not execute. It does this redundant
            check two times, as some of the validators do not support client side scripting.
        </dd>
        <dt>Q.How do I send email message from ASP.NET?</dt>
        <dd>A.ASP.NET provides two namespace SystemWEB.mailmessage class and System.Web.Mail.Smtpmail class.</dd>
    </dl>
</form>

That's it what you have to do. Well done!

How to solve "sys is undefined" error while using asp.net ajax update panel.

2011-12-18T15:38:00.000+07:00

We have the error "sys is undefined" often when we use asp.net ajax update panel in our ajax enable web site.
The best remedy for this problem is to add the script to the ScriptManager’s Scripts collection and then call our wireups in a Sys.Application.init event handler. It is pretty good practice to separate .js file from source as much as we can.

In .aspx file,
<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"
    EnablePartialRendering="true" EnablePageMethods="true">
        <Scripts>
            <asp:ScriptReference Path="Init.js" />
        </Scripts>
    </asp:ScriptManager>
    <br />
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
           <%-- your code go here --%>
        </ContentTemplate>
    </asp:UpdatePanel>
</form>

In Init.js file,

//Attach delegate functions to the init event to complete tasks that must
//be performed before objects are created. The add_init accessor binds a
//delegate function to the init event.
Sys.Application.add_init(AppInit);
function AppInit(sender) { Sys.WebForms.PageRequestManager.getInstance().add_endRequest(End);
}

//The endRequest event is raised after an asynchronous postback is finished
//and control has been returned to the browser. You can use this event to
//provide a notification to users or to log errors.
function End(sender, args) { }

How to add a client event handler to an ASP.NET control programmatically

2011-12-17T15:40:00.000+07:00

You can add client script to controls on an ASP.NET Web page declaratively, as you would to HTML elements (see recent post). Alternatively, you can also add client script events to an ASP.NET Web server control programmatically, which is useful if the event or the code relies on information that is available only at run time. In the page's Init or Load event, call the Add method of the control's Attributes collection. The following code example shows how to add client script to a TextBox control. The client script displays the length of the text in the TextBox control in other TextBox.

Here is form tag.

<form id="form1" runat="server">

     <div>

        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

    </div>

</form>

In your code-behind,

protected void Page_Load(object sender, EventArgs e)

{

    String displayControlName = TextBox2.ClientID;

    TextBox1.Attributes.Add("onkeyup", displayControlName +

        ".value=" + TextBox1.ClientID + ".value.length;");

}

That's it. Thank.

How to add a client event handler to an ASP.NET server control declaratively

2011-12-17T15:11:00.000+07:00

You can add client script to controls on an ASP.NET Web page declaratively, as you would to HTML elements. In the control's markup, add an attribute for the event, for example, onmouseover or onkeyup. For the attribute's value, add the client script that you want to execute. The following code example shows an ASP.NET Web page that includes client script that changes the button text color when the user passes the pointer over it.

Here is javascript.
<script type="text/javascript">
        var previousColor;
        function MakeRed(e) {
            var targ;

            // e gives access to the event in all browsers

            if (!e) var e = window.event;

            if (e.target) targ = e.target;  //for IE

            else if (e.srcElement) targ = e.srcElement;  //for Firefox

            previousColor = targ.style.color;

            targ.style.color = "#FF0000";

        }

        function RestoreColor(e) {

            var targ;

            if (!e) var e = window.event;

            if (e.target) targ = e.target;

            else if (e.srcElement) targ = e.srcElement;

            targ.style.color = previousColor;

        }

    </script>

Here is form tag.

<form id="form1" runat="server">

    <div>

        <asp:Button ID="Button1" runat="server" Text="Button1" onmouseover="MakeRed(event);"

            onmouseout="RestoreColor(event);" />

    </div>

 </form>

See the other example : http://msdn.microsoft.com/en-us/library/7ytf5t7k.aspx

Calling postback event from Javascript in asp.net

2011-12-15T00:28:00.000+07:00

Postback is a concept introduced in ASP.NET and is a very handy method. Postback is built into the ASP.NET and .aspx web page support it without writing any statement.
There will be some case where you want to explicitly postback to the server using javascript. It is quite simple to do this.
ASP.NET already creates a client side javascript method as shown below to support Postbacks for the web server controls.

function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}

So, what you have to do just call this method with appropriate arguments. You can call this as shown below.

<script language='Javascript'>
__doPostBack('__Page', 'YourCustomArgument');
</script>

However, it is not recommended to use this method name directly in the client side. The best approach is, generate this piece of code from the code behind file using ASP.NET. This way, you are safe even if Microsoft later change the name of the method '__doPostBack' to something else in a future release.

Now insert the following code in your .aspx page.

<script type="text/javascript">
    function Jpostback()
    {
        <%= PostBackStr %>
    }
</script>

At runtime, it will be evaluated as:

<script language=’Javascript’>
__doPostBack(‘__Page’, ‘MyCustomArgument’);
</script>

Here is form tag.

<form id="form1" runat="server">
        <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="Jpostback();" />
</form>

Remember to insert the above script into some Javascript method/event where you want to call the postback, instead of simply inserting into the page as shown above.

To identify and handle the postback in code behind, you need a way to identify your postback in the code behind file. The second argument the doPostback method becomes helpful here.

In your code-behind,

//declare a protected variable
protected string PostBackStr;

//In page load event
protected void Page_Load(object sender, EventArgs e)
{
    /*GetPostBackEventReference() will generate the same piece
    of client side code like __doPostBack that you need to use
    to call the Postback method. */
    PostBackStr = Page.ClientScript.GetPostBackEventReference
    (this, "MyCustomArgument");

    if (Page.IsPostBack)
    {
        String eventArg = Request["__EVENTARGUMENT"];
        if (eventArg == "MyCustomArgument")
        Response.Write("you got it");
    }
}

Whenever you press the Button, the page is loaded. To identify it is whether our postback or not, we used the second argument in the __doPostBack method to pass a value and used that in PageLoad to identify (here is "MyCustomArgument").

A little about ASP.NET MVC 3 (MVC Overview)

2011-12-12T16:54:00.000+07:00

These days, MVC is more popular in enterprise web application environment, since it is easy to develop, flexible to manage and able to control over the rendered HTML for Rich Internet Application (RIA). So, we have to know much about MVC for our career as professional. If you are going to abroad like Singapore to find a job as .net programmer, you need to know MVC at all and it is 7 out of 10 times in interviews. Right now, you see how much it is important in IT industry. Let's start here.

The Model-View-Controller (MVC) pattern is an architectural design principle that separates the components of a Web application. This separation gives you more control over the individual parts of the application, which lets you more easily develop, modify, and test them. ASP.NET MVC is part of the ASP.NET framework. Developing an ASP.NET MVC application is an alternative to developing ASP.NET Web Forms pages; it does not replace the Web Forms model.
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller.
The MVC framework is defined in the System.Web.Mvc namespace and is a fundamental, supported part of the System.Web namespace.

The MVC framework includes the following components:

Models. Model objects are the parts of the application that implement the logic for the application s data domain. Often, model objects retrieve and store model state in a database. For example, a Product object might retrieve information from a database, operate on it, and then write updated information back to a Products table in SQL Server.

Views. Views are the components that display the application s user interface (UI). Typically, this UI is created from the model data. An example would be an edit view of a Products table that displays text boxes, drop-down lists, and check boxes based on the current state of a Products object.

Controllers. Controllers are the components that handle user interaction, work with the model, and ultimately select a view to render that displays UI. In an MVC application, the view only displays information; the controller handles and responds to user input and interaction. For example, the controller handles query-string values, and passes these values to the model, which in turn queries the database by using the values.

The MVC pattern helps you create applications that separate the different aspects of the application (input logic, business logic, and UI logic) with a loose coupling between these elements. The pattern specifies where each kind of logic should be located in the application. The UI logic belongs in the view. Input logic belongs in the controller. Business logic belongs in the model. This separation helps you manage complexity when you build an application, because it enables you to focus on one aspect of the implementation at a time. For example, you can focus on the view without depending on the business logic. For example, one developer can work on the view, a second developer can work on the controller logic, and a third developer can focus on the business logic in the model.

Advantages of MVC Model

Easier to manage complexity by dividing an application into the models.
Enable full control over the rendered HTML.
Enable Test Driven Development(TDD).
SEO and REST friendly URL (Search Engine Friendly).
No ViewState and PostBack events.
Follows the stateless nature of web.
More easy client-side integration (Javascript/Ajax/Jquery).
Extensible and WEB 2.0 Enabled

The following are the helpful resource.
http://www.asp.net/mvc/mvc3

http://msdn.microsoft.com/en-us/library/gg416514%28v=VS.98%29.aspx

http://www.asp.net/mvc/tutorials/mvc-music-store/mvc-music-store-part-1

Fly on the net with MVC. :P

How to show Confirm message when click Delete button in Gridview

2011-12-12T00:24:00.000+07:00

First of all, you need to know the following javascript methods.

preventDefault method (event) or return false; or returnValue=false;

If an event is cancelable, you can use the preventDefault method and the returnValue property to cancel the event. When an event is canceled, the default action that belongs to the event will not be executed. For example, when the onclick event (the onclick event is cancelable) is canceled for a asp.net server control such as button, then clicking on the Button does not occur autopostback.
The properties and methods mentioned above do not affect the propagation of events. If you need to prevent the propagation of an event in the DOM hierarchy or in asp.net ajax update panel or in page using master page, use the cancelBubble property and the stopPropagation method.

cancelBubble property (event) or stopPropagation method

When an event can bubble up, you can stop its propagation with the cancelBubble property or the stopPropagation method. Use the stopPropagation method in Firefox, Opera, Google Chrome and Safari, because the cancelBubble property is deprecated in those browsers. Internet Explorer also supports the stopPropagation method from version 9. In Internet Explorer before version 9, use the cancelBubble property, because the stopPropagation method is not supported.

In .aspx,
//javascript is here.

function DeleteConfirm(e) {

    if (confirm('Are you sure to submit?')) {

        return true;

    }

    else {

        if (!e) var e = window.event;

        e.cancelBubble = true;

        if (e.stopPropagation) e.stopPropagation();

            return false; // or returnValue=false; or e.preventDefault();

    }        

}

//server control is here.

 <asp:GridView ID="GridView1" runat="server" AllowPaging="True" 

    DataKeyNames="id" 

    onrowcommand="GridView1_RowCommand" 

    onrowcreated="GridView1_RowCreated">

    <Columns>

        <asp:BoundField DataField="id" HeaderText="id" InsertVisible="False" 

            ReadOnly="True" SortExpression="id" />

        <asp:BoundField DataField="title" HeaderText="title" SortExpression="title" />

        <asp:TemplateField HeaderText="View">

            <ItemTemplate>

                <asp:Button ID="btnDelete" runat="server" CommandArgument='<%# Eval("id") %>'  CommandName="DeleteRow"

                    Text="Delete" />

            </ItemTemplate>

        </asp:TemplateField>

    </Columns>

</asp:GridView>

In code-behind,

protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
    if(e.CommandName == "DeleteRow")
    {
        // Coding here
    }
}

protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        Button btn = e.Row.FindControl("btnDelete") as Button;
        btn.OnClientClick = "return DeleteConfirm(this);";
    }
}

Enjoy the programming!