如何使用 Ajax 从数据库值加载或填充表？答案

【问题标题】：How to load or populate the table from database values using Ajax?如何使用 Ajax 从数据库值加载或填充表？
【发布时间】：2019-01-10 11:20:44
【问题描述】：

当我从下拉列表中选择一个值时，它应该使用 AJAX 根据下拉列表中的值更改表格。我不知道该怎么做。任何形式的帮助将不胜感激。

这里是下拉列表和表格的后端；

public ActionResult Representatives()
    {
        ViewBag.reps = db.tbl_Users.Where(x=>x.fk_Roleid==2).ToList();
        var reps = db.tbl_CordinatorPayments.Include(t => t.tbl_Users).Where(x => x.fk_repId != null);
        return View(reps.ToList());
    }

这是下拉列表；

<select name="selectCity" id="CityDDL" class="form-control" style="width: 200px; height: 100%;" onchange="getValue()">
                <option value="-1">--Select Rep--</option>
                @foreach (var item in ViewBag.reps)
                {
                    <option value="@item.id">@item.Name</option>
                }

            </select>

这是表格；

<table id="example" class="table table-bordered table-hover" style="text-align: center;">
        <thead class="thead-light">
            <tr>
                <th>#
                </th>
                <th>Rep Name
                </th>
                <th>Member Name
                </th>
                <th>Ubl %
                </th>
                <th>Shirts %
                </th>
                <th>Membership %
                </th>
                <th>Total
                </th>
                <th>Date
                </th>


            </tr>
        </thead>
        <tbody>

            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelitem => item.id)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.tbl_Users.Name)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.tbl_Member.Member_Name)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.PercentageUblAMount)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.PercentageShirtsAmount)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.PercentageMembershipAmount)
                    </td>
                    <td>
                        @Html.DisplayFor(modelitem => item.Total)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Date)
                    </td>

                </tr>
            }
        </tbody>
    </table>

这就是我获取下拉列表值的方式；

function getValue() {
    var value = $("#CityDDL").val();}

然后我想在这样的 sql 查询中使用这个值；

select * from [tbl_CordinatorPayments] where fk_repId=id;

然后这个查询将填充我不知道该怎么做的表。任何帮助，将不胜感激。谢谢！！！

【问题讨论】：

你的 C# 代码在哪里？

标签： c# sql asp.net asp.net-mvc

【解决方案1】：

您应该首先创建一个控制器来处理调用 $.ajax() 方法时附加到表中的响应

    $.ajax({
      method: "GET", //because you want to fetch data, not modify it
      url: //Your controller URl example: /Home/GetDataFromDropDown,
      data: {selectedDropdown: $("#dropdown1").val() } // here the id of the clicked dropdown select 
    })
      .done(function( result ) {
        //Here your data placeHolder + append the result of the call made to the controller 
        $("#newTable").append(result);
      });

//Create a controller that recives the kind of data you want, in this example "ActionResult"
public ActionResult GetDataFromDropDown(string selectedDropdown)
{
    var model = // do the SQL query or Linq query to populate the data with your logical needs
    return model;
}

我建议您为此控制器使用强类型模型绑定器，并使用 Linq 使用该模型填充新表。也为你的表格寻找一个局部视图，让它成为你的“主干代码”，并在从 $.ajax() 调用有效模型时填充它

【讨论】：