如何使用下拉列表过滤列表

I am new to MVC, and I want on my view two things:

我是MVC的新手，我希望看到两件事：

1 - A list of data's (3 columns) 2 - A dropdown list that I can filter the list (filled with data from the first column)

1 - 数据列表（3列）2 - 我可以过滤列表的下拉列表（填充第一列中的数据）

in my controller I have the following function:

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

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

}

In the 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>

}

How to get dropdownlist change event working? Thanks a lot.

如何让dropdownlist更改活动正常工作？非常感谢。

Hicham.

希沙姆。

1 个解决方案

#1

Well.. You need to do some stuff for this.. Let me explain in steps..

嗯..你需要为此做一些事情..让我按步骤解释..

Create a partial view for the grid
为网格创建局部视图
Attach onchange event for dropdown
附加onchange事件以获取下拉列表
Make one controller action method which take dropdown selection as parameter and returns the grid partial view as result

制作一个控制器动作方法，将下拉选择作为参数，并返回网格局部视图作为结果
```
$.get('yourActionURL', { parameter: $('#yourDropdownId').val() }, function(result) {
    $('#grid').html(result);
});
```

Filtering a WebGrid with a DropDownList in MVC4 and ASP.NET MVC Filtering results in a list/grid - these link can help you in details about this.

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

#1