Question

我有一个Asp.Net MVC网络应用程序，我需要在视图中提供一个用户界面，以应用数据过滤器来显示数据的子集。

我喜欢使用弹出树视图在fogbugz上使用的设计，允许以非常简洁的方式选择数据过滤器：http://bugs.movabletype.org/help/topics/basics/Filters.html

我的控制器的动作方法对所有可用的过滤器都有一些可以为空的参数：

public ActionResult EmployeeList(int? empId, int? month, int? year,
                                 string tag1, string tag2 //and others....)
{
   //...filter employee list on any existing parameters
   return View(viewModel);
}

我的意图是每当应用过滤器时，点击链接，输入文本......过滤器将被添加到参数列表中，并重新加载页面并显示正确的数据。

寻找有关如何为此类问题创建过滤器工具栏或最佳做法的一些指导或示例。我一直无法找到一个jquery ui插件或javascript库来做类似的事情，所以有点迷失在哪里开始。

感谢。

Answer 1

我通过使主页包含许多包含参数选项的下拉列表来做类似的事情，然后在页面加载和下拉选择更改时将结果集ViewUserControl加载到其中的div。数据的控制器，在本例中为TaskList，只需要返回一个正常的ActionResult View（newTaskList（data））;示例如下。

<script>
$(document).ready(function () {
    loadDataSet();
});

function loadDataSet(){
     var status = document.getElementById('ddlStatus');
     var selectedStatus = status.options[status.selectedIndex].value;
     if (status.selectedIndex == 0) selectedStatus = '';

     $.post('<%= Url.Action("TaskList") %>', { status: selectedStatus },
            function (data) {
                $('#divTaskList').html(data);
            });

     }
</script>

<%= Html.DropDownList("ddlStatus", Model.StatusOptions, null, new { onchange = "javascript:loadDataSet();" })%>

<div id='divTaskList' />

数据过滤器 - 查看用户界面

1 个答案: