MVC - 如何在 <select> 元素中设置值后刷新 HTML 表格

Question

据我了解，在视图中的 HTML 表中使用的 Razor foreach 语句会遍历在视图文件顶部声明为 @model 的 IEnumerable 中找到的项目，并且 @model 来自控制器以该 IEnumerable 作为其模型参数的参数返回视图。

我不确定我的逻辑在这里是否良好 - 我正在尝试将 IEnumerable 替换为从控制器操作返回的另一个，该控制器操作将值作为参数，以根据该值选择性地填充 IEnumerable。在 HTML 选择元素的值更改后，此值通过 jQuery 作为 {id} 传递。替换 IEnumerable 后，我可以使用 jQuery 重新加载表格，@foreach 迭代新的 IEnumerable 将根据 HTML 选择元素中的选定值显示所需的结果。

但是，我不确定如何执行此操作。我一直在尝试各种我能想到或在 StackOverflow 上找到的方法来解决类似问题，但没有运气。

我现在被困在这一点上，不知道该去哪里。

HTML：

@model IEnumerable<TrgovinaMVC.Models.racun>

...

<select class="selectpicker" id="selektor" data-style="btn-primary" onchange="TypeChanged(this)">
      <option>Gotovinski</option>
      <option>Virman</option>
</select>

...

<div id="tabela">
    <table class="table table-hover">

...

<tbody>
     @foreach (var item in Model)
     {
          <tr>

...

JavaScript：

function TypeChanged(element) {
    var val = $(element).val();
    $("#tabela").load("/racuns/Reload/" + val);

控制器：

public ActionResult Reload(string id)
{
    List<racun> list = new List<racun>();
    foreach (racun r in db.racuns)
    {
        if (r.tipracuna == id)
            list.Add(r);
    }
    return View(list);
}

请指点我正确的方向。提前致谢！

Answer 1

有两种方法可以解决您的问题

1. 在 TypeChanged() 函数中重新加载整个页面
2. 创建局部视图并从中单独加载表 - 建议

控制器：

public ActionResult Reload()
{
    return View();
}


public ActionResult _ReloadTable(string id)
{
    List<racun> list = new List<racun>();
    foreach (racun r in db.racuns)
    {
        if (r.tipracuna == id)
            list.Add(r);
    }
    return PartialView(list);
}

在 Reload.cshtml - 单独保留下拉代码

Reload.cshtml

<select class="selectpicker" id="selektor" data-style="btn-primary" onchange="TypeChanged(this)">
      <option>Gotovinski</option>
      <option>Virman</option>
</select>

<div id="tabela">


</div>
<script>

function TypeChanged(element) {
    var val = $(element).val();
    $("#tabela").load("/racuns/_ReloadTable/" + val);

</script>

_ReloadTable.cshtml

@model IEnumerable<TrgovinaMVC.Models.racun>

<table class="table table-hover">

...

<tbody>
     @foreach (var item in Model)
     {
          <tr>

在下拉更改事件中，每次都会加载部分视图，并且表格数据将根据下拉列表中选择的值进行更新