How to bind gridview using ajax/jquery call based on dropdown list selection

Question

0.00/5 (No votes)

See more:

I have drop down list,the values of the drop down list are tables(sql tables).while i click table name name from drop down list i need to display the table in grid view or table format.

Note:using ajax/jquery call& web method only in ASP.NET c#.

What I have tried:

I tried but didnt get any solution.Help me guys.

Posted 17-May-17 21:57pm

GrpSMK

Updated 18-May-17 19:15pm

Add a Solution

Comments

F-ES Sitecore 18-May-17 4:11am

What you're asking is for someone to write you thousands of lines of code, why would someone do that for free, that's not what this site is for. Break the problem down into smaller managebale chunks and solve each problem one by one.

GrpSMK 18-May-17 5:50am

atleast share some links

F-ES Sitecore 18-May-17 5:54am

http://www.google.com/

HTH

GrpSMK 18-May-17 6:24am

i know how to bind single table data through drop down list.But in this scenario table names are in dropdown list,so how to create modal class?

F-ES Sitecore 18-May-17 6:33am

Pass the name of the table to the controller\webmethod as you would any other bit of data, and from your server code you can use ADO.net to create a DataTable from the table, and you would then interrogate the DataTable to discover the field names\types and that will let you construct your html table.

GrpSMK 18-May-17 7:07am

In webmethod we have to write class name write.
List<classname> list = new List<classname>();
like above,shall i create more than one list?in a single webmethod for multiple tables?

F-ES Sitecore 18-May-17 7:10am

I'd probably keep things generic so you can re-use the classes for any table. So the table will have a name, a List<string> for the column names, then a List<row> for each row you want to show and the Row will have a List<string> for the data in each column. You can fit any table into that structure so can keep your code the same no matter what table you are showing.

GrpSMK 18-May-17 7:20am

Thank you

GrpSMK 18-May-17 9:53am

sorry, unable define the class.please can you post some example.

Member 10463882 31-Jan-18 1:43am

how to bind datatable grid on dropdownlist selection???

$(document).ready(function (){

$('#RoleId').change(function () {
var RoleId = $("#RoleId").val();
var SetData = $("#SetRoleMapping");
var url = "/Home/GetRoleMapplingList?RoleId=" + RoleId;
$.ajax({
type: "GET",
url: url,
success: function (data) {
var RoleMapping = JSON.parse(data);
for (var i = 0; i < RoleMapping.length; i++) {
var Data = "<tr class='row_" + RoleMapping[i].Id + "'>" +
"<td>" + RoleMapping[i].Id + "</td>" +
"<td>" + RoleMapping[i].RoleId + "</td>" +
"<td>" + RoleMapping[i].MenuName + "</td>" +
"<td>" + RoleMapping[i].Active + "</td>" +
"</tr>";
SetData.append(Data);

}

var table = $('#example').DataTable({
'paging': true,
'lengthChange': true,
'searching': true,
'ordering': true,
'info': true,
'autoWidth': true
});

}

});

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Karthik_Mahalingam · Accepted Answer · 2017-05-18T19:15:00

try

ASPX

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

    <script src="jquery.min.js"></script>
    <title></title>
    <script>
        function funChangeTable(ddlObj) {
            var name = ddlObj.value;

            $.ajax({
                url: 'WebForm1.aspx/GetTableData',
                data: JSON.stringify({ tableName: name }),
                type: 'post',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    var json = JSON.parse(response.d);
                    generateTable(json);
                },
                error: function (a, b, c) {
                    console.log(a, b, c);
                }
            });
        }

        function generateTable(json) {
         
            var $table = $('#tblDynamic');
            $table.find('thead').empty()
            $table.find('tbody').empty()
            if (json && json.length > 0) {
                var header = json[0];
                var columns = [];
                for (var col in header) {
                    columns.push('<th>' + col + '</th>');
                }
                $table.find('thead').append('<tr>' + columns.join('') + '</tr>');
                var rows = [];
                for (var i = 0; i < json.length; i++) {
                    var row = json[i];
                    var tds = [];
                    for (var col in row) {
                        tds.push('<td>' + col + '</td>');
                    }
                    rows.push('<tr>' + tds.join() + '</tr>');
                }
                $table.find('tbody').append(rows.join(''));
            }

        }

    </script>
</head>
<body>

    <form runat="server">
        <asp:DropDownList runat="server" ID="ddlTableNames" onchange="funChangeTable(this)">
        </asp:DropDownList>
        <table id="tblDynamic" border="1">
            <thead></thead>
            <tbody></tbody> 
        </table>


    </form>
</body>
</html>

Code Behind

using System;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;
using Newtonsoft.Json; // Add this reference 
using System.Linq;
using System.Collections.Generic;
//http://www.newtonsoft.com/json
//https://www.nuget.org/packages/Newtonsoft.Json/


namespace ExcelGridDemo
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        const string connString = "Data Source=.;Initial Catalog=karthik_test;Integrated Security=True";
        protected void Page_Load(object sender, EventArgs e)
        {
            var data = GetAllTableNames(); 
            ddlTableNames.DataSource = data;
            ddlTableNames.DataBind();
            ddlTableNames.Items.Insert(0,"Select a Table");
          
        }

        private static string[] GetAllTableNames() {
            SqlConnection con = new SqlConnection(connString);
            SqlCommand cmd = new SqlCommand("select name from sys.tables", con);
            SqlDataAdapter da = new SqlDataAdapter(cmd);
            DataTable dt = new DataTable();
            da.Fill(dt);
            return dt.AsEnumerable().Select(k => k[0] + "").ToArray();
        }

        [WebMethod]
        public static string GetTableData(string tableName)
        {
            if (GetAllTableNames().Contains(tableName)) // To avoid sql injection
            {
                SqlConnection con = new SqlConnection(connString);
                SqlCommand cmd = new SqlCommand("select * from " + tableName, con);
                SqlDataAdapter da = new SqlDataAdapter(cmd);
                DataTable dt = new DataTable();
                da.Fill(dt);
                string json = JsonConvert.SerializeObject(dt);
                return json;
            }
            else
                return "Table Name Not Found";
        }
         
       
    }
}