Question

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

这是dropdownlist和table的后端；

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;

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

Answer 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（）调用有效模型时填充它。

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

1 个答案: