Question

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

我认为当您第一次访问该页面时，默认会列出整个表格。在这个页面上，我有两个下拉框，里面填充了我想过滤结果的值。

当用户选择一个不是默认值的值时，如何重新加载页面，然后按照选择的下拉列表过滤数据，我该怎么做？

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


    return View(docs);
}

这是我的下拉列表：

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

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

Answer 1

您可以使用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);
}

Answer 2

要做到这一点，我担心你必须将JQuery添加到项目所需的技能列表中：）

您需要使用JQuery为DropDownList上的change事件创建处理程序。在该事件处理程序中，将数据发布到另一个Action方法，如下所示：

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

    return View("Index", docs);
}

你可以通过简单地调用Url / {YourController} / Filter / {TheValueForId}来实现。

当您从MVC和LINQ开始时，这绝对不是您可以选择的最佳测试用例（如果您选择它）。

如果您有选择，可以尝试更简单的事情。

Answer 3

你会用到这样的东西。这是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;
}

在此示例中，Controller是“我的控制器”，操作是“索引”

MVC / LINQ搜索功能

3 个答案: