GrpSMK Ответов: 1

Как привязать gridview с помощью вызова ajax/jquery на основе выбора выпадающего списка

У меня есть выпадающий список, значения выпадающего списка - это таблицы (sql-таблицы).когда я нажимаю имя таблицы name из выпадающего списка, мне нужно отобразить таблицу в виде сетки или в формате таблицы.

Примечание:с помощью AJAX/jQuery и вызов& веб-метод, только в ASP.NET на C#.

Что я уже пробовал:

Я пытался, но не получил никакого решения.Помогите мне, ребята.

F-ES Sitecore

Вы просите, чтобы кто-то написал вам тысячи строк кода, зачем кому-то делать это бесплатно, это не то, для чего предназначен этот сайт. Разбейте проблему на более мелкие куски managebale и решите каждую проблему одну за другой.

GrpSMK

по крайней мере, поделитесь некоторыми ссылками

F-ES Sitecore

http://www.google.com/

НТН

GrpSMK

я знаю, как связать данные одной таблицы с помощью выпадающего списка.Но в этом сценарии имена таблиц находятся в выпадающем списке,так как же создать модальный класс?

F-ES Sitecore

Передайте имя таблицы контроллеру\webmethod, как и любой другой бит данных, и из вашего серверного кода Вы можете использовать ADO.net чтобы создать таблицу из таблицы, а затем вы опросите DataTable, чтобы обнаружить имена полей\типы, и это позволит вам построить свою html-таблицу.

GrpSMK

В webmethod мы должны написать имя класса write.
List< classname> list = новый список & lt;classname>();
как и выше, должен ли я создать более одного списка в одном веб-методе для нескольких таблиц?

F-ES Sitecore

Я бы, наверное, оставил вещи общими, чтобы вы могли повторно использовать классы для любой таблицы. Таким образом, таблица будет иметь имя, список "строка" для имен столбцов, затем список "строка" для каждой строки, которую вы хотите показать, и строка будет иметь список "строка" для данных в каждом столбце. Вы можете поместить любую таблицу в эту структуру, чтобы сохранить свой код неизменным независимо от того, какую таблицу вы показываете.

GrpSMK

Спасибо

GrpSMK

извините, не удалось определить класс,пожалуйста, не могли бы вы опубликовать какой-нибудь пример.

Member 10463882

как привязать datatable grid к выделению выпадающего списка???




$(документ).готово(функция (){

$('#RoleId'). change(функция () {
var RoleId = $("#RoleId"). val();
var SetData = $("#SetRoleMapping");
var url = " / Home / GetRoleMapplingList?RoleId= " + RoleId;
$.Аякс({
типа: "вам",
URL-адрес: URL-адрес,
успех: функция (данные) {
ВАР RoleMapping = формат JSON.синтаксический анализ(данных);
for (var i = 0; i & lt; RoleMapping.длина; i++) {
var Data = "<tr class= 'row_" + RoleMapping[i].Id + "'>" +
"<td> " + RoleMapping[i].ИД + "&ЛТ;/ООО " ТД " &ГТ;" +
"<td> " + RoleMapping[i].RoleId + "< / td>" +
"&ЛТ;тд&ГТ;" + RoleMapping[я].MenuName + "&ЛТ;/ООО " ТД " &ГТ;" +
"<td> " + RoleMapping[i].Активный + "&ЛТ;/ООО " ТД " &ГТ;" +
"< / tr>";
Метод setdata.добавить(данные);

}

var table = $('#example').объект DataTable({
"пейджинг": верно,
'lengthChange': true,
"поиск": верно,
"заказ": верно,
"информация": правда,
'autoWidth': верно
});

}

});

1 Ответов

Рейтинг:
12

Karthik_Mahalingam

пробовать

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>


с фоновым кодом

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";
        }
         
       
    }
}

Karthik_Mahalingam

получить Newtonsoft от
Json.NET - Newtonsoft[^]
Json.NET 10.0.2[^]

GrpSMK

Огромное спасибо.Вы гениальны. Но одна ошибка, вместо отображения данных в таблицах отображаются имена столбцов.

Karthik_Mahalingam

означает, что данные для таблицы недоступны.

GrpSMK

Нет для каждой таблицы отображающей только имена столбцов вместо данных

Karthik_Mahalingam

проверьте наличие ошибок в окне консоли

GrpSMK

проверено без ошибок

GrpSMK

tds. push(" + col +"); правильна ли эта строка?

Karthik_Mahalingam

Нет

GrpSMK

вывод идет, только табличные данные не отображаются(отображение имен столбцов в каждой ячейке)

Karthik_Mahalingam

строка[кол]

GrpSMK

row[col]для этой линии пытается в течение 3 часов, в любом случае, большое вам спасибо.хорошего вам уик-энда.

Karthik_Mahalingam

Маленькая ошибка. Извините за поздний ответ

GrpSMK

Помогите мне решить мой последний вопрос (разбиение на страницы), связанный с этой темой