Filter Records from dynamically created CheckBoxes and Populate in HTML Table using jQuery Ajax in ASP.Net

Last Reply 3 months ago By AnandM

Posted 3 months ago

I am working on dynamic checkbox which have te used using innerhtml.Checkbox are generated as per the data in the database.Now when i click on red color it will display image of all the prodyuct whicha are in red .

i have used  2 table

1tablecolor

ColorID ColorName ColorCode

1 Red #ff0000
2 Blue #0000ff
3 Black #000000
4 Green #00ff00
5 Yellow #ffff00

2tableColorProduct

ProductID ColoID ProductName ImgExtension

8 1 Product1 .jpg
9 1 Product2 .jpg
10 2 Product3 .jpg
11 2 Product4 .jpg
12 1 Product5 .jpg
13 3 Product6 .jpg
31 4 Product7 .jpg
32 4 Product8 .jpg
33 4 Product9 .jpg
34 4 Product10 .jpg
35 4 Product11 .jpg
36 5 Product12 .jpg
37 5 Product13 .jpg
38 5 Product14 .jpg
39 5 Product15 .jpg

 

common thing is colorID

Posted 3 months ago

Hi aneri,

I have created a sample which full fill your requirement you need to modify it according to your need.

HTML

<div>
    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                Category:-
            </td>
            <td>
                <div id="dynamicCheckBoxes" runat="server">
                </div>
            </td>
            <td>
                <asp:Label ID="lblCount" runat="server" />
            </td>
        </tr>
    </table>
    <br />
    <table id="tblColorImages">
    </table>
</div>
<div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var selectedColors = [];

            $('input[name=chkbox]').click(function () {
                $.each($('input[name=chkbox]'), function () {
                    var checked = $(this)[0].checked;
                    if (checked) {
                        selectedColors.push($(this).val());
                    }
                });
                if (!$(this)[0].checked) {
                    //For removing the unchecked checkbox values.
                    removeItem = $(this).val()
                    selectedColors = jQuery.grep(selectedColors, function (value) {
                        return value != removeItem;
                    });
                }
                //values of checked checkboxes.
                var colorId = selectedColors;
                if (colorId != "") {
                    $.ajax({
                        type: "POST",
                        url: "Default.aspx/GetSelectedColorImages",
                        data: '{colorId: "' + colorId + '"}',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (response) {
                            $('[id*=tblColorImages]').empty();
                            var table = $('[id*=tblColorImages]')
                            var xmlDoc = $.parseXML(response.d);
                            var xml = $(xmlDoc);
                            var ColorImages = xml.find("ColorImages");
                            $('[id*=lblCount]').html("Total Record:-" + ColorImages.length);
                            $('[id*=tblColorImages]').append("<tr><th colspan='2'>Images</th></tr>");
                            //Append Data Row.
                            $.each(ColorImages, function () {
                                var ProductId = $(this).find('ProductId').text();
                                var ColorId = $(this).find('ColorId').text();
                                var ProductName = $(this).find('ProductName').text();
                                var ImgExtension = $(this).find('ImgExtension').text();
                                var row = $("<tr />");
                                row.append("<td>" + ColorId + "</td><td><img src='images/ProductName/" + ProductName + ImgExtension + "'></img></td>");
                                $('[id*=tblColorImages]').append(row);
                            });
                        }
                    });
                }
                else {
                    $('[id*=tblColorImages]').empty();
                    $('[id*=lblCount]').html("");
                }
            });
        });
    </script>
</div>

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        //Bind Your checkboxes according to your database table.
        DataTable dt = new DataTable();
        dt.Columns.Add("ColorId");
        dt.Columns.Add("ColorName");
        dt.Rows.Add(1, "Red");
        dt.Rows.Add(2, "Blue");
        dt.Rows.Add(3, "Black");
        dt.Rows.Add(4, "Green");
        dt.Rows.Add(5, "Yellow");
        string strHtm1 = string.Empty;
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            strHtm1 += "<input type='checkbox' name='chkbox' value='" + dt.Rows[i]["ColorId"].ToString() + "'/>" + dt.Rows[i]["ColorName"].ToString() + "</br>";
        }
        dynamicCheckBoxes.InnerHtml = strHtm1.ToString();
    }
}

[System.Web.Services.WebMethod]
public static string GetSelectedColorImages(string colorId)
{
    string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    SqlConnection con = new SqlConnection(strConnString);
    string query = "SELECT ProductId,ColorId,ProductName,ImgExtension FROM ColorProduct WHERE ColorId IN (" + colorId + ")";
    SqlCommand cmd = new SqlCommand(query);
    SqlDataAdapter sda = new SqlDataAdapter(cmd);
    cmd.Connection = con;
    DataSet ds = new DataSet();
    DataTable dt = new DataTable("ColorImages");
    sda.Fill(dt);
    ds.Tables.Add(dt);
    return ds.GetXml();
}

VB.Net

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        'Bind Your checkboxes according to your database table.
        Dim dt As New DataTable()
        dt.Columns.Add("ColorId")
        dt.Columns.Add("ColorName")
        dt.Rows.Add(1, "Red")
        dt.Rows.Add(2, "Blue")
        dt.Rows.Add(3, "Black")
        dt.Rows.Add(4, "Green")
        dt.Rows.Add(5, "Yellow")
        Dim strHtm1 As String = String.Empty
        For i As Integer = 0 To dt.Rows.Count - 1
            strHtm1 += "<input type='checkbox' name='chkbox' value='" + dt.Rows(i)("ColorId").ToString() + "'/>" + dt.Rows(i)("ColorName").ToString() + "</br>"
        Next
        dynamicCheckBoxes.InnerHtml = strHtm1.ToString()
    End If
End Sub

<System.Web.Services.WebMethod()> _
Public Shared Function GetSelectedColorImages(colorId As String) As String
    Dim strConnString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Dim con As New SqlConnection(strConnString)
    Dim query As String = (Convert.ToString("SELECT ProductId,ColorId,ProductName,ImgExtension FROM ColorProduct WHERE ColorId IN (") & colorId) + ")"
    Dim cmd As New SqlCommand(query)
    Dim sda As New SqlDataAdapter(cmd)
    cmd.Connection = con
    Dim ds As New DataSet()
    Dim dt As New DataTable("ColorImages")
    sda.Fill(dt)
    ds.Tables.Add(dt)
    Return ds.GetXml()
End Function

ScreenShot

I agree, here is the link: http://e-iceblue.com/free-api