Sunday, January 29, 2012

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

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

Saturday, January 28, 2012

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

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.


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

Sunday, January 22, 2012

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

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!


Tuesday, January 3, 2012

How to show Modal Dialog Box with Asp.Net Ajax

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 :

Modal Dialog with Asp.net Ajax
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);
        $find("ModalPopupExtender1").add_showing(onModalShowing);
    }
    function onModalShowing(sender, args) {
        $get("pnlEditCustomer").style.backgroundColor = "yellow";
    }
    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" />
        <asp:UpdatePanel runat="server" ID="DialogBoxUpdatePanel" UpdateMode="Conditional">
            <ContentTemplate>
                
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    <div>
         <!-- Dialog box:: Edit customer info -->
         <!--The Content of a Modal Popup Supports Partial Rendering -->
        <asp:Panel ID="pnlEditCustomer" runat="server" CssClass="modalPopup" style="display:block;">
            <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!

Reference : 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.

Monday, January 2, 2012

How to download image from a web site programatically using HttpWebRequest

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:.