Easy ASP.NET jQuery Tutorial

Source Control Team Foundation Service Sign up for free.

2013-05-31T08:47:00.004+07:00

This is a good way for keep safe your source code and compare with old version.
Thank you Microsoft for your free TFS.

Pls enjoy ZomDev

Easy jQuery Slideshow

2012-10-24T12:12:00.003+07:00

Introduction

Hi all,
This is simple use for slideshow , We have 3 step for this.

Demo Download Here

Step 1: Add the JavaScript function

Copy and paste script below in your script tag.

var folder = "images";
var timeout = 4000;
var StartPicc = 2;
var EndPicc = 5;
var timer;
$(document).ready(function () {
    timer = setTimeout("EasySlideShow();", timeout);
});
function EasySlideShow() {
    $("#imgshow").fadeOut('slow', function () {
        $("#imgshow").attr("src", folder + "/" + StartPicc.toString() + ".jpg");
        $("#imgshow").fadeIn('slow')
        if (StartPicc < EndPicc)
            StartPicc++;
        else
            StartPicc = 1;
    });
    clearTimeout(timer);
    timer = setTimeout("EasySlideShow();", timeout);
}

Step 2: Add jQuery

Step 3: Add image to your folder
named folder to images
named picture to 1.jpg > xxx.jpg

Copy and paste script below in your script tag.

Enjoy Easy ASP.NET jQuery Demo ZomDev

ASP.NET : Creating a Web Service.

2012-10-18T17:32:00.001+07:00

This is a demo project for creating a Web Service by using Visual Studio 2010 create with two Tier concept.
1st Tier is WebSite
2st Tier is WebService site
I have create step by step to inform you.
If you not understand you can download source code from a bottom of this demo.

Step 1 : Add a WebService to your WebSite.

Step 2 : Crea Hello World Method (if not exist).

Step 3 : Add a new WebSite for call web service.

Step 4 : Add Web Reference to MainSite by click on your mainsite > Add Service Reference

Step 5 : Click Advance > Add Web Reference > WebService on this solution
It will find WebService on solution to show you and click WebService Name it to "WSTest"

Result : you will found generated file in solution.

Step 6 : Test calling a WebService.

The Result
I create method name GetString and return "Hello World + GetString" to display in page by using Response.Write.

Download create web service demo here

If you understnd how to create WebService already, Please visit How to using WebService via JavaScript/jQuery. for more information thank ^^

Enjoy ZomDev

ASP.NET : Update Data via JavaScript using ICallback

2012-10-18T09:53:00.001+07:00

This sample will show how to update data via JavaScript.
Three Step to Show you

Step 1 : Implement Interface ICallbackEventHandler.
Step 2 : Declare public string to get GetCallbackEventReference.
Step 3 : Call it by assign to OnClientClick Button.

Code behine

public partial class ICallback_CS : System.Web.UI.Page,ICallbackEventHandler
{
    public string CallbackScript = string.Empty;
    private string CallbackArg = string.Empty;

    protected void Page_Load(object sender, EventArgs e)
    {
        CallbackScript = Page.ClientScript.GetCallbackEventReference(Page, "arg", "onSuccessCallback", "context","onErrorCallback",false);
    }

    public string GetCallbackResult()
    {
        return string.Format("Update {0} Complete.", CallbackArg);
    }

    public void RaiseCallbackEvent(string eventArgument)
    {
        CallbackArg = eventArgument;
    }
}

HTML

<body>

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

    <div >

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

        <br />

        <asp:Button ID="btCallback" runat="server" Text="UpdateData" OnClientClick="GetString(); return false;" />

    </div>

    </form>

</body>

<script type="text/javascript">

    function GetString() {

        var arg = $("#txt1").val();

        var context = "";

        <%=CallbackScript %>;

    }

    function onSuccessCallback(e){

        alert(e);

    }

    function onErrorCallback(e){

        alert(e);

    }

</script>

ASP.NET : Update Data using jQuery JavaScript via WebService

2012-10-18T09:51:00.001+07:00

This sample will show how to Update Data using jQuery JavaScript via WebService.

Step 1 : Create WebService Method.

    [WebMethod]
    public string UpdateData(string Data)
    {
        //Connect DataBase to Update Data
        return "Update '" + Data + "' successfully.";
    }

Step 2 : Create JavaScript function using jQuery.ajax

    function UpdateData() {
        $.ajax({
            url: "WebService.asmx/UpdateData",
            data: "{ 'Data': '" + $("#txtData").val() + "' }",
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataFilter: function (data) { return data; },
            success: function (data) {
                alert(data.d);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(XMLHttpRequest.responseText);
            }
        });
    }

Step 3 : Call it from Button OnClientClick.



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

        <br />

        <asp:Button ID="btnUpdate" runat="server" Text="UpdateData" OnClientClick="UpdateData();return false;" />

enjoy ZomDev

ASP.NET : Send multiple value to Server using JSON

2012-10-18T09:50:00.001+07:00

This sample will show how to Send multiple value to Server using JSON.

Step 1 : Create WebService Method.

    [WebMethod]
    public string GetData(string Data)
    {
        System.Web.Script.Serialization.JavaScriptSerializer JSON = new System.Web.Script.Serialization.JavaScriptSerializer();
        Object obj = JSON.DeserializeObject(Data);
        Hashtable ht = new Hashtable();
        foreach (KeyValuePair d in (Dictionary)obj)
        {
            ht.Add(d.Key, d.Value);
        }
        return "GetData successfully.";
    }

Step 2 : Create JavaScript function using jQuery.ajax

Declare Array type in JavaScript and serialize to JSON Data and pass value to WebService.

    function SendData() {
        var arg = {};
        arg["Data1"] = "String1";
        arg["Data2"] = 950;
        arg["Data3"] = "String2";
        arg = Sys.Serialization.JavaScriptSerializer.serialize(arg);

        $.ajax({
            url: "WebService.asmx/GetData",
            data: "{ 'Data': '" + arg + "' }",
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataFilter: function (data) { return data; },
            success: function (data) {
                alert(data.d);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(XMLHttpRequest.responseText);
            }
        });
    }

WebService can get JSON data that send from jQuery.ajax

enjoy ZomDev

ASP.NET : Test Async on ASP.NET 4.5 ** await new WebClient().DownloadStringTaskAsync(url)

2012-10-12T15:16:00.003+07:00

ASP.NET : Test Async on ASP.NET 4.5

Hello , This is a simple way to read other website to display or get some html text data.
i seem like jQuery.load("website") but it manage by ASP.NET engine.
Before use Async we must set Async="true" on ' <@Page Async="true" '
2 Step Below include sourcecode again

Before Click Test Button.

After Click Test Button, Text data will show you in Panel

Step 1 : Create button for fire event and Panel for disply data.

        <asp:Button ID="btntest" runat="server" Text="Test" OnClick="btntest_Click" />

        <asp:Panel ID="pnlTest" runat="server" GroupingText="testData">

            <asp:Label ID="lbltest" runat="server"></asp:Label>

        </asp:Panel>

Step 2 : Create Event and method.

        public async void TestAsync()
        {
            string url = "http://www.asp.net";
            string content = await new WebClient().DownloadStringTaskAsync(url);
            lbltest.Text = content;
        }

        protected void btntest_Click(object sender, EventArgs e)
        {
            TestAsync();
        }

Enjoy ASP.NET Zomdev.

What's New in ASP.NET 4.5 and Visual Studio 2012

2012-10-12T09:19:00.000+07:00

Here is the information about latest ASP.NET for Visual Studio 2012.
Hope this can help everyone.
What's New in ASP.NET 4.5 and Visual Studio 2012

enjoy zomdev

ASP.NET Export DataTable to excel using GridView controls

2012-10-12T08:49:00.001+07:00

Hello this project will export DataTable to *.xls file for excel.
You can modify GridView style for display colorful format in excel.
Another project for display data in excel.
ASP.NET : Export DataTable to CSV
Two Step include sourcecode below.

Step 1 : Design ASPX HTML.
Add Export Button and GridView with colorful format for display in excel


        <asp:Button ID="btnExcel" runat="server" Text="Excel" />

        <br />

        <asp:GridView ID="gv1" runat="server" BackColor="White" BorderColor="#E7E7FF"

            BorderStyle="None" BorderWidth="1px" CellPadding="3"

            EnableModelValidation="True" GridLines="Horizontal">

            <AlternatingRowStyle BackColor="#F7F7F7" />

            <FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" />

            <HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" />

            <PagerStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" HorizontalAlign="Right" />

            <RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" />

            <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" />

        </asp:GridView>

Step 2 : Create method and call in Button_Click event in codebehind.

    Protected Sub btnExcel_Click(sender As Object, e As System.EventArgs) Handles btnExcel.Click
        ExportExcel2(TestData)
    End Sub

    Sub ExportExcel2(dt As DataTable)
        gv1.DataSource = TestData
        gv1.DataBind()
        Response.AddHeader("content-disposition", "attachment; filename=ExcelName.xls")
        Response.ContentType = "application/vnd.ms-excel"
        Response.Charset = "TIS-620"
        Me.EnableViewState = False
        Dim tw As New System.IO.StringWriter()
        Dim hw As New System.Web.UI.HtmlTextWriter(tw)
        Dim frm As HtmlForm = New HtmlForm()
        Me.Controls.Add(frm)
        frm.Controls.Add(gv1)
        frm.RenderControl(hw)
        Response.Write(tw.ToString())
        Response.End()
    End Sub

For export excel without format table please use method below

    Sub ExportExcel(dt As DataTable)
        Dim GV As New System.Web.UI.WebControls.GridView
        GV.DataSource = TestData
        GV.DataBind()
        Response.AddHeader("content-disposition", "attachment; filename=ExcelName.xls")
        Response.ContentType = "application/vnd.ms-excel"
        Response.Charset = "TIS-620"
        Me.EnableViewState = False
        Dim tw As New System.IO.StringWriter()
        Dim hw As New System.Web.UI.HtmlTextWriter(tw)
        Dim frm As HtmlForm = New HtmlForm()
        Me.Controls.Add(frm)
        frm.Controls.Add(GV)
        frm.RenderControl(hw)
        Response.Write(tw.ToString())
        Response.End()
    End Sub

Pls enjoy ZomDev

ASP.NET : Export DataTable to CSV

2012-10-11T14:34:00.002+07:00

ASP.NET : Export DataTable to CSV

CSV (Comma-separated values) CSV Report is the fastest and smallest for view data in excel without format.
Source will show you below (VB).

Step 1 : Create test DataTable.

    Private _TestData As DataTable

    Private Property TestData As DataTable
        Get
            'Declare Datatable
            Dim dt As New DataTable("TableName")

            'Add Column
            Dim dcCustomerID As New DataColumn()
            dcCustomerID.ColumnName = "CustomerID"
            dcCustomerID.DataType = System.Type.[GetType]("System.String")

            Dim dcCustomerName As New DataColumn()
            dcCustomerName.ColumnName = "CustomerName"
            dcCustomerName.DataType = System.Type.[GetType]("System.String")

            dt.Columns.Add(dcCustomerID)
            dt.Columns.Add(dcCustomerName)

            'Declare Datarow
            Dim dr As DataRow
            dr = dt.NewRow()
            dr(dcCustomerID.ColumnName) = "1"
            dr(dcCustomerName.ColumnName) = "Bank of America"
            dt.Rows.Add(dr)

            dr = dt.NewRow()
            dr(dcCustomerID.ColumnName) = "2"
            dr(dcCustomerName.ColumnName) = "Dow jones"
            dt.Rows.Add(dr)

            dr = dt.NewRow()
            dr(dcCustomerID.ColumnName) = "3"
            dr(dcCustomerName.ColumnName) = "Million Dollar"
            dt.Rows.Add(dr)

            _TestData = dt

            Return _TestData
        End Get
        Set(value As DataTable)
            _TestData = value
        End Set
    End Property

Step 2 : Click Export.

    Protected Sub btnCSV_Click(sender As Object, e As System.EventArgs) Handles btnCSV.Click
        ExportDataTable2CSV(TestData)
    End Sub

    Sub ExportDataTable2CSV(ByVal dt As DataTable)
        Context.Response.AddHeader("content-disposition", "attachment; filename=FileName.csv")
        Context.Response.ContentType = "application/csv"
        Context.Response.Clear()
        Context.Response.Charset = "windows-874"
        Context.Response.ContentEncoding = System.Text.Encoding.GetEncoding(874)
        Page.EnableViewState = False
        Context.Response.Write(ConvertDataTable2CSV(dt))
        Context.Response.End()
    End Sub

    Function ConvertDataTable2CSV(ByVal dtSource As DataTable) As String
        Dim sb As New StringBuilder
        Dim nCount As Integer = dtSource.Columns.Count
        ' Header Row
        Dim sbLine As New StringBuilder
        For iCol As Integer = 0 To dtSource.Columns.Count - 1
            sbLine.Append(",")
            sbLine.Append(dtSource.Columns(iCol).ColumnName)
        Next
        sb.AppendLine(sbLine.ToString.Substring(1))
        For Each dr As DataRow In dtSource.Rows()
            sbLine = New StringBuilder
            For iCol As Integer = 0 To dtSource.Columns.Count - 1
                sbLine.Append(",")
                If Not Convert.IsDBNull(dr(iCol)) Then
                    If (dr(iCol).GetType().ToString() = "System.String") Then
                        sbLine.Append(dr(iCol).ToString.ToString)
                    Else
                        sbLine.Append(dr(iCol))
                    End If
                End If
            Next
            sb.AppendLine(sbLine.ToString.Substring(1))
        Next
        Return sb.ToString()
    End Function

Pls enjoy ZomDev

ASP.NET : Binding string or Resource data to html aspx page by using DataBind()

2012-10-10T16:20:00.000+07:00

Hello this is simple way again to show how to Bind data in aspx html page.
We have 3 Step below or you want to view coding please see below ^_^
Binding Resource please in extra step.

Step 1 : Define public string variable in code behind page.

public string String1 = "String1";

Step 2 : Add string to your text control (Label TextBox Panel etc.).

<asp:Label ID="lblTest4" runat="server" Text='<%#String1 %>' ></asp:Label>

Step 3 : Add "DataBind();" in Page_Load event.

protected void Page_Load(object sender, EventArgs e) { DataBind(); }

Extra Step : Binding Resource.

<asp:Label ID="lblTest3" runat="server" Text='<%#Resources.Resource.String1 %>' ></asp:Label>

Pls enjoy ZomDev

ASP.NET Call Javascript from code behind

2012-10-02T15:06:00.000+07:00

ASP.NET : Call Javascript from code behind.

This very easy demo will show you how to call or run JavaScript from code behind.
You can use ScriptManager or ClientScriptManager to run this.
Demo Code show below.

Source code below this text

        ClientScript.RegisterStartupScript(Page.GetType(), "testScript", "alert('First Script');alert('Second Script');", true);

        ScriptManager.RegisterStartupScript(Page, Page.GetType(), "key", "alert('ThirdScript');", true);

Don't hesitate to contact me zomdev.

jQuery : Add title to dropdown select option.

2012-09-27T15:23:00.001+07:00

jQuery : Add title to dropdown select option.

This very easy demo will show you how to add title to all of select option in page.
Demo Code show below.

Please select your item in dropdown to view title result.

Source code below this text

        <select>
            <option>FIRST Option</option>
            <option>SECOND Option</option>
            <option>THIRD Option</option>
            <option>Fourth Option</option>
            <option>FIFTH Option</option>
            <option>SIXTH Option</option>
        </select>
        <script type="text/javascript">
            $(document).ready(function () {
                $("option").each(function () {
                    this.setAttribute('title', this.innerText);
                });
            });
        </script>

Don't hesitate to contact me zomdev.

ASP.NET : Validate In place edit GridView using jQuery.

2012-09-21T09:06:00.002+07:00

ASP.NET : Validate In place edit GridView using jQuery.

This very easy demo will show you how to validate TextBox in GridView by using jQuery.
Demo Code show below.

The Result

	CustomerID	CustomerName
Update Cancel	0	*
Edit	1	Dow jones
Edit	2	Million Dollar
Edit	3	Bank of America

1 : Add modify Template in GridView set OnClientClick="return validateGridView();"

        <asp:TemplateField ShowHeader="False">
            <ItemTemplate>
                <asp:LinkButton ID="lbtEdit" runat="server" CausesValidation="False" CommandName="Edit" Text="Edit"></asp:LinkButton>
            </ItemTemplate>
            <EditItemTemplate>
                <asp:LinkButton ID="lbtUpdate" runat="server" CausesValidation="True" CommandName="Update" Text="Update" OnClientClick="return validateGridView();"></asp:LinkButton>
                 
                <asp:LinkButton ID="lbtCancel" runat="server" CausesValidation="False" CommandName="Cancel" Text="Cancel"></asp:LinkButton>
            </EditItemTemplate>
        </asp:TemplateField>

2 : Add Alert Label near Require Text.

        <asp:Label ID="lblReqCustomerName" runat="server" ForeColor="Red" Text="*" style="display:none;" CssClass="lblReqCustomerName"></asp:Label>

3 : Add Javascript Validate Function.

    function validateGridView() {
        if ($(".txtCustomerName").val() == "") {
            $(".lblReqCustomerName").show();
            $(".txtCustomerName").focus();
            return false;
        }
        else {
            $(".lblReqCustomerName").hide();
            return true;
        }
    }

DownloadDemo Here

Don't hesitate to contact me zomdev.

ASP.NET Validate In place edit GridView using RequiredFieldValidator.

2012-09-20T16:04:00.000+07:00

ASP.NET Validate In place edit GridView using RequiredFieldValidator.

This very easy demo will show you how to validate TextBox in GridView by using RequiredFieldValidator.
First we must add TextBox in EditItemTemplate for display after click edit.
Second is fire event for update data.
Demo Code show below.

The Result

	CustomerID	CustomerName
Update Cancel	0	*
Edit	1	Dow jones
Edit	2	Million Dollar
Edit	3	Bank of America

Demo Code

Code HTML

        <asp:GridView ID="gv1" runat="server" AutoGenerateColumns="False" 
            EnableModelValidation="True" 
            DataKeyNames="CustomerID"
            onrowediting="gv1_RowEditing" 
            onrowupdating="gv1_RowUpdating" 
            onrowcancelingedit="gv1_RowCancelingEdit"
            >
        <Columns>
            <asp:CommandField ShowEditButton="True" ValidationGroup="Update" />
            <asp:TemplateField HeaderText="CustomerID">
                <ItemTemplate>
                    <asp:Label ID="lblCustomerID" runat="server" Text='<%# Bind("CustomerID") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="CustomerName">
                <ItemTemplate>
                    <asp:Label ID="lblID" runat="server" Text='<%# Bind("CustomerID") %>'></asp:Label>
                </ItemTemplate>
                <ItemTemplate>
                    <asp:Label ID="lblCustomer" runat="server" Text='<%# Bind("CustomerName") %>'></asp:Label>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox ID="txtCustomerName" runat="server" MaxLength="200" Text='<%# Bind("CustomerName") %>' ValidationGroup="Update" ></asp:TextBox>
                    <asp:RequiredFieldValidator ID="reqtxtCustomerName" runat="server" Text="*" Display="Static" ControlToValidate="txtCustomerName" ValidationGroup="Update" ></asp:RequiredFieldValidator>
                </EditItemTemplate>
            </asp:TemplateField>
        </Columns>
        </asp:GridView>

Code Behind

    private DataTable CustomerData
    {
        get {
            if (ViewState["CustomerData"] != null)
                return (DataTable)ViewState["CustomerData"];

            //Declare DataTable
            DataTable dt = new DataTable("TableName1");
            //Add Column
            dt.Columns.Add("CustomerID");
            dt.Columns.Add("CustomerName");

            //Declare Datarow
            DataRow dr = null;
            dr = dt.NewRow();
            dr["CustomerID"] = "0";
            dr["CustomerName"] = "Adam J";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["CustomerID"] = "1";
            dr["CustomerName"] = "Dow jones";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["CustomerID"] = "2";
            dr["CustomerName"] = "Million Dollar";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["CustomerID"] = "3";
            dr["CustomerName"] = "Bank of America";
            dt.Rows.Add(dr);

            ViewState["CustomerData"] = dt;
            return dt;
        }
        set {
            ViewState["CustomerData"] = value;
        }
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            BindData();
        }
    }
    protected void gv1_RowEditing(object sender, GridViewEditEventArgs e)
    {
        gv1.EditIndex = e.NewEditIndex;
        BindData();
    }
    protected void gv1_RowUpdating(object sender, GridViewUpdateEventArgs e)
    {
        TextBox txtCustomerName = (TextBox)gv1.Rows[e.RowIndex].FindControl("txtCustomerName");
        Label lblCustomerID = (Label)gv1.Rows[e.RowIndex].FindControl("lblCustomerID");
        foreach (DataRow dr in CustomerData.Select("CustomerID='" + lblCustomerID.Text + "'"))
        {
            dr["CustomerName"] = txtCustomerName.Text;
        }
        CustomerData.AcceptChanges();
        gv1.EditIndex = -1;
        BindData();
    }
    protected void gv1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
    {
        gv1.EditIndex = -1;
        BindData();
    }
    void BindData()
    {
        gv1.DataSource = CustomerData;
        gv1.DataBind();
    }

Don't hesitate to contact me zomdev.

ASP.NET Three way to soing DataTable .Select .DefaultView Linq

2012-09-18T15:03:00.003+07:00

*Linq Exist in .Net Framework 3.5++

I've sorting method to sort DataTable to show you today,

First is .DefaultView

DataView dv = dt.DefaultView; dv.Sort = "CustomerName ASC";
Second is .Select("leave blank", "Column ASC/DESC")

dt.Select("", "CustomerName");
Third id Linq.OrderBy

var SortedData = from a in dt.AsEnumerable() .Where(a => a.Field("CustomerName") == "Bank of America") .OrderBy(a => a["CustomerName"]) select a;

The Result

CustomerID	CustomerName
0	Adam J
3	Bank of America
1	Dow jones
2	Million Dollar

Test result in C# here.

        //Declare DataTable
        DataTable dt = new DataTable("TableName1");
        //Add Column
        dt.Columns.Add("CustomerID");
        dt.Columns.Add("CustomerName");

        //Declare Datarow
        DataRow dr = null;
        dr = dt.NewRow();
        dr["CustomerID"] = "0";
        dr["CustomerName"] = "Adam J";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["CustomerID"] = "1";
        dr["CustomerName"] = "Dow jones";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["CustomerID"] = "2";
        dr["CustomerName"] = "Million Dollar";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["CustomerID"] = "3";
        dr["CustomerName"] = "Bank of America";
        dt.Rows.Add(dr);


        DataView dv = dt.DefaultView;
        dv.Sort = "CustomerName ASC";

        dt.Select("", "CustomerName");

        var SortedData = from a in dt.AsEnumerable()
                      .Where(a => a.Field<string>("CustomerName") == "Bank of America")
                      .OrderBy(a => a["CustomerName"])
                  select a;

        gv1.DataSource = dt;
        gv1.DataBind();

Don't hesitate to contact me zomdev.

ASP.NET Increase performance using GZIP

2012-09-12T09:48:00.000+07:00

GZIP-compression will decrease the number of bytes sent by your server to any client.

I've test result to shoe you below.
Ziped aspx page will decrease from 9,733,736 bytes to 538,531 bytes,It means this page reduce to 5.96% of actual size.
If you have an internet connection 1Mb, It mean you can open page zipped page in 0.5 second and unzipped page is 9 seconds.

Before Zipped

After Zipped

Test result in C# here.

        //Declare DataTable
        DataTable dt = new DataTable("TableName1");
        //Add Column
        dt.Columns.Add("CustomerID");
        dt.Columns.Add("CustomerName");
        //Declare Datarow
        DataRow dr = null;
        for (int i = 0; i < 20000; i++)
        {
            dr = dt.NewRow();
            dr["CustomerID"] = i.ToString();
            dr["CustomerName"] = i.GetTypeCode().ToString();
            dt.Rows.Add(dr);
        }
        ViewState["dt"] = dt;

        Response.Filter = new System.IO.Compression.GZipStream(Response.Filter, System.IO.Compression.CompressionMode.Compress);
        Response.AddHeader("Content-Encoding", "gzip");

Download Demo Here

Don't hesitate to email me zomdev.

ASP.NET jQuery UI : AutoComplete with DataTable via webservice

2012-09-10T17:10:00.000+07:00

ASP.NET jQuery UI : AutoComplete with DataTable via webservice

This project can convert DataTable to jQuery AutoComplete DataSource.
We can get Data from DataBase and create to jQuery Datasource and display in webpage via webservice.
now we have 4 step to do this.

DownLoad Demo Here

Step 1: Add css and script

Add scriptmanager to yourpage.
Add jquery-ui.css.
Add jquery.js
Add jquery-ui.js

Step 2: Add Control to yourpage

Add scriptmanager to yourpage.
Add TextBox named to txtCustomerSearch.
Add Image for loading named to imgLoading.

        ScriptManager
        txtCustomerSearch
        imgLoading

Step 3: Add Javascript

Add scriptmanager to yourpage.
Add TextBox named to txtCustomerSearch.
Add Image for loading named to imgLoading.

    $(function () {
        $("#<%=txtCustomerSearch.ClientID %>").autocomplete({
            minLength: 2,
            source: function (req, response) {
                $("#<%=imgLoading.ClientID %>").show();
                $.ajax({
                    url: "WebService.asmx/GetCustomerData",
                    data: "{ 'SearchValue': '" + $("#<%=txtCustomerSearch.ClientID %>").val() + "' }",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function (data) { return data; },
                    success: function (data) {
                        $("#<%=imgLoading.ClientID %>").hide();
                        atcjq.onsuccess(data, response);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        $("#<%=imgLoading.ClientID %>").hide();
                        
                        alert(XMLHttpRequest.responseText);
                    }
                });
            },
            select: function (event, ui) {
                $("#<%=txtCustomerSearch.ClientID %>").val(ui.item.txtvalue)
                $("#<%=txtCustomerSearch.ClientID %>").attr("title", ui.item.txtvalue);
                atcjq.seturisearch();
                return false;
            }
        });
    });
    var atcjq = {
        onsuccess: function (data, response) {
            var d2 = Sys.Serialization.JavaScriptSerializer.deserialize(data.d);
            response($.map(d2, function (item) {
                var fval = item.CustomerName;
                return {
                    value: fval, label: fval, txtvalue: item.CustomerName
                }
            }))
        },
        seturisearch: function () {
            //alert($("#<%=txtCustomerSearch.ClientID %>").val());
        }
    }

Step 4: Using ConvertDataTableToJson to convert your datatable to json and send to html.

        Public Function ConvertDataTableToJson(ByVal dt As DataTable) As String
            Dim serializer As System.Web.Script.Serialization.JavaScriptSerializer = New System.Web.Script.Serialization.JavaScriptSerializer()
            Dim rows As New List(Of Dictionary(Of String, Object))
            Dim row As Dictionary(Of String, Object)

            For Each dr As DataRow In dt.Rows
                row = New Dictionary(Of String, Object)
                For Each col As DataColumn In dt.Columns
                    row.Add(col.ColumnName, dr(col))
                Next
                rows.Add(row)
            Next
            Return serializer.Serialize(rows)
        End Function

Download Demo Here

Don't hesitate to email me zomdev.

ASP.NET : Change IIS7 dispaly datetime format link local machine

2012-09-05T15:28:00.001+07:00

Have you eve seen before ?
IIS7 it show the date format doesn't match with local machine.
Example
DateTime in local machine is '01 Jan 2012'.
In our Website is '01/01/2012'.
Now we have 4 step for this case.

Step 1 : Open IIS and click Application Pools.

Step 2 : On the right panel click advance setting.

Step 3 : Choose local system.

Step 4 : Select your AppPool.

Pls enjoy ZomDev

ASP.NET using SiteMapPath control on multiple sitemap on asp.net

2012-09-04T16:16:00.001+07:00

Some project we have a lot of page for many types of user,Multiple sitemap can provide multiple url link for this case.
We have 3 step for this solution.

Step 1 : Add new Web.SiteMap

        <?xml version="1.0" encoding="utf-8" ?>
        <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
            <siteMapNode url="" title="Web.Sitemap"  description="">
                <siteMapNode url="~/BLOG/ASP_NET/Sitemap/SitemapPath/Default.aspx" title="SiteMap1"  description="Admin" />
            </siteMapNode>
        </siteMap>

Step 2 : In Web.Config > system.web siteMap > providers > add

        <add name="w1" type="System.Web.XmlSiteMapProvider" siteMapFile="~/Web.Sitemap"/>
        <add name="w2" type="System.Web.XmlSiteMapProvider" siteMapFile="~/Web2.sitemap"/>

Step 2 :

        <asp:SiteMapPath runat="server" ID="SiteMapPath1" SiteMapProvider="w1">
        </asp:SiteMapPath>
        <hr />
        <asp:SiteMapPath runat="server" ID="SiteMapPath2" SiteMapProvider="w2">
        </asp:SiteMapPath>

Pls enjoy ZomDev

ASP.NET 3 way to Get or Set Culture in ASP.NET

2012-09-03T13:06:00.000+07:00

The ASP.NET can set culture for browser to run under a specified culture.
Date display and LocalResource in App_GlobalResources will change by specified culture.
We have 3 way for set culture for this case see below.

In Internet information Service (IIS) > .Net Globalization.

In Web.Config > system.web section > globalization

In CodeBehind should be like this.

        Response.Write(System.Threading.Thread.CurrentThread.CurrentCulture)
        Response.Write("
")
        Response.Write(DateTime.Now.ToString("dd MMMM yyyy - HH:mm:ss"))
        Response.Write("
")

        System.Threading.Thread.CurrentThread.CurrentCulture = New System.Globalization.CultureInfo("ja-JP")
        Response.Write(System.Threading.Thread.CurrentThread.CurrentCulture)
        Response.Write("
")
        Response.Write(DateTime.Now.ToString("dd MMMM yyyy- HH:mm:ss"))
        Response.Write("
")

Pls enjoy ZomDev

ASP.NET test new SelectMethod GridView features of Framework 4.5 VS2012.

2012-08-29T11:07:00.003+07:00

Introduction

This project i test on a latest release of VS2012 RC. With this version you can binding model with SelectMethod GridView.
We can download Visual studio 2012 Ultimate RC here .

Step 1: AddAdd Gridview set AutoGenerateColumns="true" and pick your SelectMethod.

Step 2: Create CustomerData Class and create ID and name property.

    public class CustomerData
    {
        private string _CustomerID;
        private string _CustomerName;

        public string CustomerID
        {
            get { return _CustomerID; }
            set { _CustomerID = value; }
        }

        public string CustomerName
        {
            get { return _CustomerName; }
            set { _CustomerName = value; }
        }
    }

Step 3: Create mehod set to the same name as SelectMethod in Gridview.
We could define method as IQueryable for returned CustomerData.

    public IQueryable<CustomerData> GridView1_GetData()
    {
        List<CustomerData> cl = new List<CustomerData>();
        CustomerData c = new CustomerData();
        c.CustomerID = "1";
        c.CustomerName = "Bank of America";
        cl.Add(c);

        c = new CustomerData();
        c.CustomerID = "2";
        c.CustomerName = "Dow jones";
        cl.Add(c);

        c = new CustomerData();
        c.CustomerID = "3";
        c.CustomerName = "Million Dollar";
        cl.Add(c);

        return cl.AsQueryable();
    }

pls enjoy zomdev.

Microsoft Visual Studio Ultimate 2012 RC has been released.

2012-08-29T10:57:00.001+07:00

The new releases of Visual Studio include a ton of great new features.
Download at link below. http://www.microsoft.com/en-us/download/details.aspx?id=29917

Compare between VS2010 and VS2012

jQuery UI : AutoComplete with hilight.

2012-08-24T14:46:00.002+07:00

Introduction

You've been using google before right ?
Google searchbox can display a similar message below searchbox.
This project can do that, too. (This project modify from jQueryUI, Please visit for more information.)

Step 1: Add Search textbox to your html body.

        input type="text" id="txtSearch"

Step 2: Add CSS to your html.

       
        .searchhilight
        {
            font-weight:bold;
            color: #ff3333;
            text-decoration:underline;
        }

Step 3: Add jQuery And jQueryUI and other Script in your web.

        link href="CSS/jquery-ui.css" rel="stylesheet" type="text/css"
        script src="scripts/jquery.min.js" type="text/javascript"
        script src="scripts/jquery-ui.min.js" type="text/javascript"

Step 3: Add function below to your script tag.

    $(function () {
        $("#txtSearch").autocomplete({
            minLength: 2,
            source: autocpt.availableTags()
        });
    });
    var autocpt = {
        availableTags: function () {
            var data = [
       "ActionScript",
       "AppleScript",
       "Asp",
       "BASIC",
       "C",
       "C++",
       "Clojure",
       "COBOL",
       "ColdFusion",
       "Erlang",
       "Fortran",
       "Groovy",
       "Haskell",
       "Java",
       "JavaScript",
       "Lisp",
       "Perl",
       "PHP",
       "Python",
       "Ruby",
       "Scala",
       "Scheme"
      ];
            return data;
        }
    }
    $.ui.autocomplete.prototype._renderItem = function (ul, item) {
        item.label = item.label.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(this.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "$1");
        return $("
").data("item.autocomplete", item).append("" + item.label + "").appendTo(ul);
    };

Download Demo here..>>

Now you can type java to textbox for view searchilight now ^_^.

Pls enjoy ZomDev

Download Free Merge text file EXE

2012-08-24T09:42:00.000+07:00

Introduction

Hello friends i have a little project for manage alot of *.txt file to merge all to be one.
It useful for merge SQL Script,We can seperate between text with custom text (default is GO).
You can download project include exe file below.

Download here..>>
Another link here

Easy ASP.NET jQuery Tutorial

Source Control Team Foundation Service Sign up for free.

This is a good way for keep safe your source code and compare with old version. Thank you Microsoft for your free TFS.

Pls enjoy ZomDev

Easy jQuery Slideshow

Introduction

Hi all, This is simple use for slideshow , We have 3 step for this.

Step 1: Add the JavaScript function

Copy and paste script below in your script tag.

Step 2: Add jQuery

Step 3: Add image to your folder named folder to images named picture to 1.jpg > xxx.jpg

Copy and paste script below in your script tag.

ASP.NET : Creating a Web Service.

This is a demo project for creating a Web Service by using Visual Studio 2010 create with two Tier concept. 1st Tier is WebSite 2st Tier is WebService site I have create step by step to inform you. If you not understand you can download source code from a bottom of this demo.

Step 1 : Add a WebService to your WebSite.

Step 2 : Crea Hello World Method (if not exist).

Step 3 : Add a new WebSite for call web service.

Step 4 : Add Web Reference to MainSite by click on your mainsite > Add Service Reference

Step 5 : Click Advance > Add Web Reference > WebService on this solution It will find WebService on solution to show you and click WebService Name it to "WSTest"

Step 6 : Test calling a WebService.

ASP.NET : Update Data via JavaScript using ICallback

This sample will show how to update data via JavaScript. Three Step to Show you

Code behine

HTML

ASP.NET : Update Data using jQuery JavaScript via WebService

This sample will show how to Update Data using jQuery JavaScript via WebService.

ASP.NET : Send multiple value to Server using JSON

This sample will show how to Send multiple value to Server using JSON.

Declare Array type in JavaScript and serialize to JSON Data and pass value to WebService.

WebService can get JSON data that send from jQuery.ajax

ASP.NET : Test Async on ASP.NET 4.5 ** await new WebClient().DownloadStringTaskAsync(url)

ASP.NET : Test Async on ASP.NET 4.5

Hello , This is a simple way to read other website to display or get some html text data. i seem like jQuery.load("website") but it manage by ASP.NET engine. Before use Async we must set Async="true" on ' <@Page Async="true" ' 2 Step Below include sourcecode again

Before Click Test Button.

After Click Test Button, Text data will show you in Panel

Step 1 : Create button for fire event and Panel for disply data.

Step 2 : Create Event and method.

What's New in ASP.NET 4.5 and Visual Studio 2012

ASP.NET Export DataTable to excel using GridView controls

Hello this project will export DataTable to *.xls file for excel. You can modify GridView style for display colorful format in excel. Another project for display data in excel. ASP.NET : Export DataTable to CSV Two Step include sourcecode below.

Step 1 : Design ASPX HTML. Add Export Button and GridView with colorful format for display in excel

Step 2 : Create method and call in Button_Click event in codebehind.

For export excel without format table please use method below

Pls enjoy ZomDev

ASP.NET : Export DataTable to CSV

ASP.NET : Export DataTable to CSV

CSV (Comma-separated values) CSV Report is the fastest and smallest for view data in excel without format. Source will show you below (VB).

Step 1 : Create test DataTable.

Step 2 : Click Export.

Pls enjoy ZomDev

ASP.NET : Binding string or Resource data to html aspx page by using DataBind()

Hello this is simple way again to show how to Bind data in aspx html page. We have 3 Step below or you want to view coding please see below ^_^ Binding Resource please in extra step.

Step 1 : Define public string variable in code behind page.

Step 2 : Add string to your text control (Label TextBox Panel etc.).

Step 3 : Add "DataBind();" in Page_Load event.

Extra Step : Binding Resource.

Pls enjoy ZomDev

ASP.NET Call Javascript from code behind

ASP.NET : Call Javascript from code behind.

This very easy demo will show you how to call or run JavaScript from code behind. You can use ScriptManager or ClientScriptManager to run this. Demo Code show below.

Source code below this text

Don't hesitate to contact me zomdev.

jQuery : Add title to dropdown select option.

jQuery : Add title to dropdown select option.

This very easy demo will show you how to add title to all of select option in page. Demo Code show below.

Please select your item in dropdown to view title result.

Source code below this text

Don't hesitate to contact me zomdev.

ASP.NET : Validate In place edit GridView using jQuery.

ASP.NET : Validate In place edit GridView using jQuery.

This very easy demo will show you how to validate TextBox in GridView by using jQuery. Demo Code show below.

The Result

1 : Add modify Template in GridView set OnClientClick="return validateGridView();"

2 : Add Alert Label near Require Text.

3 : Add Javascript Validate Function.

DownloadDemo Here

Don't hesitate to contact me zomdev.

ASP.NET Validate In place edit GridView using RequiredFieldValidator.

ASP.NET Validate In place edit GridView using RequiredFieldValidator.

This very easy demo will show you how to validate TextBox in GridView by using RequiredFieldValidator. First we must add TextBox in EditItemTemplate for display after click edit. Second is fire event for update data. Demo Code show below.

This is a good way for keep safe your source code and compare with old version.
Thank you Microsoft for your free TFS.

Hi all,
This is simple use for slideshow , We have 3 step for this.

Step 3: Add image to your folder
named folder to images
named picture to 1.jpg > xxx.jpg

This is a demo project for creating a Web Service by using Visual Studio 2010 create with two Tier concept.
1st Tier is WebSite
2st Tier is WebService site
I have create step by step to inform you.
If you not understand you can download source code from a bottom of this demo.

Step 5 : Click Advance > Add Web Reference > WebService on this solution
It will find WebService on solution to show you and click WebService Name it to "WSTest"

This sample will show how to update data via JavaScript.
Three Step to Show you

Hello , This is a simple way to read other website to display or get some html text data.
i seem like jQuery.load("website") but it manage by ASP.NET engine.
Before use Async we must set Async="true" on ' <@Page Async="true" '
2 Step Below include sourcecode again

Hello this project will export DataTable to *.xls file for excel.
You can modify GridView style for display colorful format in excel.
Another project for display data in excel.
ASP.NET : Export DataTable to CSV
Two Step include sourcecode below.

Step 1 : Design ASPX HTML.
Add Export Button and GridView with colorful format for display in excel

CSV (Comma-separated values) CSV Report is the fastest and smallest for view data in excel without format.
Source will show you below (VB).

Hello this is simple way again to show how to Bind data in aspx html page.
We have 3 Step below or you want to view coding please see below ^_^
Binding Resource please in extra step.

This very easy demo will show you how to call or run JavaScript from code behind.
You can use ScriptManager or ClientScriptManager to run this.
Demo Code show below.

This very easy demo will show you how to add title to all of select option in page.
Demo Code show below.

This very easy demo will show you how to validate TextBox in GridView by using jQuery.
Demo Code show below.

This very easy demo will show you how to validate TextBox in GridView by using RequiredFieldValidator.
First we must add TextBox in EditItemTemplate for display after click edit.
Second is fire event for update data.
Demo Code show below.

I've test result to shoe you below.
Ziped aspx page will decrease from 9,733,736 bytes to 538,531 bytes,It means this page reduce to 5.96% of actual size.
If you have an internet connection 1Mb, It mean you can open page zipped page in 0.5 second and unzipped page is 9 seconds.

This project can convert DataTable to jQuery AutoComplete DataSource.
We can get Data from DataBase and create to jQuery Datasource and display in webpage via webservice.
now we have 4 step to do this.

Add scriptmanager to yourpage.
Add jquery-ui.css.
Add jquery.js
Add jquery-ui.js

Add scriptmanager to yourpage.
Add TextBox named to txtCustomerSearch.
Add Image for loading named to imgLoading.

Add scriptmanager to yourpage.
Add TextBox named to txtCustomerSearch.
Add Image for loading named to imgLoading.

Have you eve seen before ?
IIS7 it show the date format doesn't match with local machine.
Example
DateTime in local machine is '01 Jan 2012'.
In our Website is '01/01/2012'.
Now we have 4 step for this case.

Some project we have a lot of page for many types of user,Multiple sitemap can provide multiple url link for this case.
We have 3 step for this solution.

The ASP.NET can set culture for browser to run under a specified culture.
Date display and LocalResource in App_GlobalResources will change by specified culture.
We have 3 way for set culture for this case see below.

This project i test on a latest release of VS2012 RC. With this version you can binding model with SelectMethod GridView.
We can download Visual studio 2012 Ultimate RC here .

Step 3: Create mehod set to the same name as SelectMethod in Gridview.
We could define method as IQueryable for returned CustomerData.

The new releases of Visual Studio include a ton of great new features.
Download at link below. http://www.microsoft.com/en-us/download/details.aspx?id=29917

You've been using google before right ?
Google searchbox can display a similar message below searchbox.
This project can do that, too. (This project modify from jQueryUI, Please visit for more information.)