Easy ASP.NET jQuery Tutorial: jQuery

Showing posts with label jQuery. Show all posts

Wednesday, October 24, 2012

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.

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

Thursday, October 18, 2012

ASP.NET : Update Data via JavaScript using ICallback

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

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

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

Thursday, September 27, 2012

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.

Friday, September 21, 2012

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.

Monday, September 10, 2012

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.

Friday, August 24, 2012

jQuery UI : AutoComplete with hilight.

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

Wednesday, August 22, 2012

jQuery Loading progress

Introduction

Loading progress will display in full browser window for block user do while Loading is shown.
After complete work progress will close by your order.
This project i modify from abeautiful.net you should visit there too.

Step 1: Add jQuery And jQuery Alert Script in your web
(you can download from jQuery.com and Abeautifulsite.net or demo project below.)

Function jLoading will display loading dialog and jHideLoading will close loading dialog when complete your work.

        function TestLoading() {
            jLoading();
            setTimeout("jHideLoading();", 3000);
        }

Wednesday, October 24, 2012

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.

Thursday, October 18, 2012

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

Code behine

HTML

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

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

Thursday, September 27, 2012

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.

Friday, September 21, 2012

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.

Monday, September 10, 2012

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.

Step 3: Add Javascript

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

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

Don't hesitate to email me zomdev.

Friday, August 24, 2012

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.

Step 2: Add CSS to your html.

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

Step 3: Add function below to your script tag.

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

Pls enjoy ZomDev

Wednesday, August 22, 2012

Introduction

Loading progress will display in full browser window for block user do while Loading is shown. After complete work progress will close by your order. This project i modify from abeautiful.net you should visit there too.

Step 1: Add jQuery And jQuery Alert Script in your web (you can download from jQuery.com and Abeautifulsite.net or demo project below.)

Function jLoading will display loading dialog and jHideLoading will close loading dialog when complete your work.

Please enjoy ZomDev.

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 sample will show how to update data via JavaScript.
Three Step to Show you

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

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

Loading progress will display in full browser window for block user do while Loading is shown.
After complete work progress will close by your order.
This project i modify from abeautiful.net you should visit there too.

Step 1: Add jQuery And jQuery Alert Script in your web
(you can download from jQuery.com and Abeautifulsite.net or demo project below.)