Как загрузить или заполнить таблицу из значений базы данных с помощью Ajax?

Question

когда я выбираю значение из выпадающего списка, оно должно изменить таблицу в соответствии со значением в раскрывающемся списке с помощью 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;

и тогда этот запрос заполнит таблицу, которую я не знаю, как это сделать. Любая помощь будет оценена. Спасибо!!!

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 ()

вызывается допустимая модель.