0

好的，开始我是 MVC 和 LINQ 和 Razor 的完全新手。这些是我目前正在努力学习的技能。

我的观点是，当您第一次访问该页面时，默认情况下它会列出整个表格。在此页面上，我有两个下拉框，其中填充了我想过滤结果的值。

当用户选择一个不是默认值的值时，我该如何做到这一点，它会重新加载页面，然后通过他们选择的下拉列表过滤数据？

public ActionResult Index()
{
    var docs = db.GetData();


    return View(docs);
}

这是我的下拉列表：

@Html.DropDownList("FunctionList", "Select a Function")

每当他们选择一个不是“选择函数”的值时，我希望它重新加载页面，然后显示过滤后的数据。

4

3 回答 3

2

您可以使用 javascript 并订阅change下拉事件，然后通过将所选值传递给服务器来重新加载当前页面。或者，您可以使用对服务器的 AJAX 调用来仅刷新视图的表部分。在这种情况下，您需要将表格放在将包含在主视图中的部分视图中，您将使用 AJAX 调用控制器操作并传递当前选择的下拉列表值，该下拉列表将用于过滤结果和返回一个部分。

例如，使用 jQuery

<script type="text/javascript">
    $(function() {
        $('#FunctionList').change(function() {
            var selectedFunction = $(this).val();
            if (selectedFunction != '') {
                $.ajax({
                    url: '@Url.Action("SomeAction", "SomeController")',
                    type: 'GET',
                    cache: false,
                    data: { selectedFunction: selectedFunction }
                    success: function(result) {
                        $('#resultsContainer').html(result);
                    }
                });
            }
        });
    });
</script>

如果需要，您还可以包含第二个下拉列表的选定值：

data: { 
    selectedFunction: $(this).val(),
    someOtherValue: $('#SomeOtherDropDown').val()
}

并且您的控制器操作将使用这些值来过滤结果并将其传递给局部视图：

public ActionResult SomeAction(string selectedFunction, string someOtherValue) 
{
    IEnumerable<SomeResultModel> results = ...
    return PartialView(results);
}
于 2013-04-19T16:04:25.613 回答
1

To do that, I'm afraid you will have to add JQuery to the list of skills needed for your project :)

You need, using JQuery, to create a handler for the change event on your DropDownList. In that event handler, post datas to another Action Method, like this one:

public ActionResult Filter(int id)
{
    var docs = db.GetData().Where(d => d.Id == id);

    return View("Index", docs);
}

You can do that, by simply calling the Url /{YourController}/Filter/{TheValueForId}.

When you're starting in MVC and LINQ, this is definitely not the best test case you could pick (if you picked it).

If you have the choice, try simpler things as a start.

于 2013-04-19T16:06:27.877 回答
1

你会使用这样的东西。这是一个 Telerik Grid 示例。

$('#btnFilter).on('click', function(e){
    e.preventDefault();
    var grid = $("#grid").data("kendoGrid");
    var new_data = getData();
    grid.dataSource.data(new_data);
});

function getData() {
    var _resData;
    var name= $('#txtName').val();
    $.ajax({
        type: 'POST',
        url: '/MyContoller/Index/',
        dataType: 'json',
        data: { name: name},
        success: function (data) {
            _resData = data; 
        },
        data: {},
        async: false
    });
    return _resData;
}

在这个例子中，控制器是“我的控制器”，动作是“索引”

于 2013-04-19T16:09:37.403 回答