ARTICLE

Sort technique in AJAX

Posted by Davin Martyn Articles | AJAX in C# December 04, 2011
In this article I will demonstrate how to apply a Sort technique in AJAX.
Reader Level:

Sorting : Sorting is the process of putting a list or a group of items in a specific order. Sorting algorithm is an algorithm that puts elements of a list in a certain order.The most-used orders are numerical order. Efficient sorting is important for optimizing the use of algorithms that require sorted lists to work correctly; it is also often useful for the data and for producing human-readable.Sorting can also be done in ascending order (A-Z) or descending order (Z-A).

Condition : The Sorting Technique satisfies two condition.

  • The output is in non decreasing order.
  • The output is permutation or reordering of the input.

Step 1 : Open Visual Studio 2011.

  • Select File>New->WebSite.
  • Select ASP.NET WebSite.
asp1.gif

Step 2 : Go to Solution Explorer and right-click.

  • Select Add->NewItem.
  • Select WebForm.
  • Default.aspx page open.
webform.gif

Step 3 : Now drag and drop controls from Toolbox.

  • Drag ScriptManager, UpdatePanel, GridView.

Define DataSource :

Step 4 : Go to Solution Explorer and right-click.

  • Select Add->NewItem.
  • Select SqlServer Database.
step4.gif

Step 5 : Go to Server Explorer and click in Database option.

  • Create Table for particular application.
  • Define the Data Field Property.
step5.gif

Step 6 : Go to Table option and right-click.

  • Select Show Table Data Option.
  • Define all field value.
step222.gif

Data Bind :

Step 7 : Go to Default.aspx Design option.

  • Select GridView Control.
  • Click in Arrow option of GridView.
  • Select Choose Data Source option.
  • Select New Data Source.
step7.gif

Add Connection String :

Step 8 : After Select of New Data Source option and select Sql DataBase.

  • Define SQL DataSource Name.
step8.gif

Step 9 : After that we click in Connection String option and select our Database and Established Connection.

step9.gif

Step 10 : Go to Default.aspx page and write the below code.

Code :

<div style="background-color: #00FF00">
    <asp:ScriptManager ID="ScriptManager" runat="server" />
      Search: <asp:TextBox ID="txtSearch" runat="server"
            ontextchanged="txtSearch_TextChanged"   />
        <br />
        <br />
        <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="search" />
        <br />
        <br />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
        <div class GridView>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
                AllowSorting = "True" AllowPaging ="True"  Width="540px" CssClass="yui"
                DataKeyNames="ID" DataSourceID="SqlDataSource3">
            <Columns>
                <asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False"
                    ReadOnly="True" SortExpression="ID" />
                <asp:BoundField DataField="FIRSTNAME" HeaderText="FIRSTNAME"
                    SortExpression="FIRSTNAME" />
                <asp:BoundField DataField="LASTNAME" HeaderText="LASTNAME"
                    SortExpression="LASTNAME" />
                <asp:BoundField DataField="DEPARTMENT" HeaderText="DEPARTMENT"
                    SortExpression="DEPARTMENT" />
                <asp:BoundField DataField="LOCATION" HeaderText="LOCATION"
                    SortExpression="LOCATION" />
            </Columns>
        </asp:GridView>
            <asp:SqlDataSource ID="SqlDataSource3" runat="server"
                ConnectionString="<%$ ConnectionStrings:ConnectionString2 %>"
                SelectCommand="SELECT * FROM [RAJESH]"></asp:SqlDataSource>
        </div>
        <br />
        <br />
        </ContentTemplate>
        <Triggers>
         <asp:AsyncPostBackTrigger ControlID="txtSearch" EventName="TextChanged" />
        </Triggers>
</
asp:UpdatePanel
>

Step 11 : Go to Default.aspx page and write the code for sorting and searching.

Code :

public partial class _Default : System.Web.UI.Page
{
    string searcstring = "";
    protected void Page_Load(object sender, EventArgs e)
    {
        txtSearch.Attributes.Add("onkeyup", "setTimeout('__doPostBack(\'" + txtSearch.ClientID.Replace("_", "$") + "\',\'\')', 0);");
        if (!IsPostBack)
        {
            GridView1.DataBind();
        }
    }
    protected void txtSearch_TextChanged(object sender, EventArgs e)
    {
        string srch= txtSearch.Text;
        if (GridView1.HasAttributes.Equals(srch))
        {
            GridView1.SelectedValue.Equals(srch);
        }
        searcstring = txtSearch.Text;
    }
    public string HighlightText(string InputTxt)
    {
        string Search_Str = txtSearch.Text.ToString();
        // Setup the regular expression and add the Or operator.
        Regex RegExp = new Regex(Search_Str.Replace(" ", "|").Trim(), RegexOptions.IgnoreCase);
        // Highlight keywords by calling the
        //delegate each time a keyword is found.
        return RegExp.Replace(InputTxt, new MatchEvaluator(ReplaceKeyWords));
        // Set the RegExp to null.
        RegExp = null;
    }
     public string ReplaceKeyWords(Match m)
    {
        return "<span class=highlight>" + m.Value + "</span>";
    }
     protected void Button1_Click(object sender, EventArgs e)
     {
         GridView1.Visible = true;
}

Step 12 : Now we press F5 and run the application.

step12.gif

Step 13 : Click on the Id and the data in the grid view will sort in ascending order.

STEP13.gif

Login to add your contents and source code to this article
comments
COMMENT USING
PREMIUM SPONSORS
Over-C is a holistic consortium of communications and technology specialists. We build, deploy and market both business as well as consumer products and solutions.
Join a Chapter
SPONSORED BY
  • PDF reports have never been easier to create. With our included WYSIWYG Designer, you can layout your reports, set up your data source and let DynamicPDF ReportWriter do the rest.