Asp.net programming we consider all important topic for knowledge about controls,web Services, JSON, Ajax, database, and interview related Question. In this Asp.net and sql server tutorial blog we give many examples of jquery as like How Play YouTube Video in Your Asp.net Website by URL, How to Play YouTube Videos in Asp.net by using Jquery , Jquery Change div background on mouseover in asp.net , JQuery UI Datepicker (Calendar) etc.

Monday, August 25, 2014

Bind CheckBoxlist from database using jQuery

Binding CheckBoxlist from database using jQuery:



JQuery is lightweight client side library that provide many functions to asp.net developer to perform operations within asp.net code. BY the Using Jquery some time we get fast and better look of web page.
Here we give a simple code for explain jquery. In asp.net programming jQuery is a very fast, feature-rich and small JavaScript library. 

JQuery message on asp.net web page:

<script language="javascript">
    $(document).ready(function () {
        $('#btn').click(function () {
            alert('Hello JQuery');
        });
    });
</script>

JQuery Related Post on this asp.net tutorial:


Example of JQuery on web page:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="myJQuerypage.aspx.cs" Inherits="JQuerymypage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html>
<html>
<head>
<script type="text/jscript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script>
    function myFun() {
        $("#h01").attr("style", "color:red").html("Hello ........user ")
    }
    $(document).ready(myFun);
</script>
</head>
<body>
<h1 id="h1"></h1>
</body>
</html>



Asp.net CheckBox list from database by jQuery:


<script type="text/javascript" language="javascript">
        function CheckBoxList() {
            $.ajax({
                type: "POST",
                url: "CheckBoxList.aspx/GetCheckBoxDetails",
                contentType: "application/json; charset=utf-8",
                data: "{}",
                dataType: "json",
                success: AjaxSucceeded,
                error: AjaxFailed
            });
        }
        function Succeeded(result) {
            BindCheckBoxList(result);
        }
        function Failed(result) {
            alert('Failed to load checkbox list');
        }
        function BindCheckBoxList(result) {

            var items = JSON.parse(result.d);
            CreateCheckBoxList(items);
        }
        function CreateCheckBoxList(checkboxlistItems) {
            var table = $('<table></table>');
            var counter = 0;
            $(checkboxlistItems).each(function () {
                table.append($('<tr></tr>').append($('<td></td>').append($('<input>').attr({
                    type: 'checkbox', name: 'chklistitem', value: this.Value, id: 'chklistitem' + counter
                })).append(
                $('<label>').attr({
                    for: 'chklistitem' + counter++
                }).text(this.Name))));
            });

            $('#dvCheckBoxListControl').append(table);
        }
    </script>
CheckBoxlist from database using jQuery
Bind CheckBoxlist from database using jQuery

No comments:

Post a Comment