如何使用下拉列表筛选列表

本文关键字:列表 筛选 下拉列表 何使用 | 更新日期: 2023-09-27 18:21:02

我是MVC的新手,在我的视图中我想要两件事:

1-数据列表(3列)2-一个下拉列表,我可以过滤列表(用第一列的数据填充)

在我的控制器中,我有以下功能:

public ViewResult ListUrl()
{
    var ws = new Service1();
    localhost.Service1 s1 = new Service1(); // data from web services
    localhost.UrlInfo[] ui = s1.GetUrlInfo();
    for (int i = 0; i < ui.Length; i++)
        {
            var UrlItem = new UrlItem();
            UrlItem.Id = Convert.ToInt32(ui[i].Id);
            UrlItem.urlll = ui[i].url;
            UrlItem.toontijd = ui[i].ToonTijd;
            UrlItem.positie  = Convert.ToInt32(ui[i].positie);
            Models.ListUrl.UrlList.Add(UrlItem);
        }
        var urlname = from url in s1.GetUrlInfo() select url  ;
        ViewData["url"] = new SelectList(urlname, "Id", "url");
    return View();
}

视图中:

<script type="text/javascript">
$(document).ready(function () {
   // How can I filter the list (see <table> tag) when I change index of dropdown list???
});
</script>
@Html.DropDownList("SelectedItem", (SelectList)ViewData["url"], "----- all ------", new { id = "0", text = "----- all ------" })
<table>
<tr>
    <th>
        Url
    </th>
    <th>
        Toontijd
    </th>
    <th>
        Positie
    </th>
</tr>
@foreach (var item in ListUrl.UrlList)
{
    <tr>
        <td>
            @item.urlll.ToString()        
        </td>
        <td>
            @item.toontijd.ToString()
        </td>
        <td>
        </td>
        <td>
            @item.positie.ToString()
        </td>
    </tr>
}

如何让dropdownlist更改事件工作?非常感谢。

Hicham。

如何使用下拉列表筛选列表

嗯。。你需要为此做点什么。。让我分步骤解释。。

  1. 为轴网创建局部视图
  2. 为下拉列表附加onchange事件
  3. 制定一种控制器操作方法,以下拉选择为参数,并返回网格部分视图作为结果

    $.get('yourActionURL', { parameter: $('#yourDropdownId').val() }, function(result) {
        $('#grid').html(result);
    });
    

在MVC4和ASP.NET MVC筛选中使用DropDownList筛选WebGrid会生成一个列表/网格-这些链接可以帮助您了解详细信息。