Question

我正在尝试找到一种在ASP.NET MVC应用程序中实现产品过滤的好方法。

当用户选择复选框值时，我想将一个键/值对（或其他类型的集合）发送到我的控制器，然后我可以在我的DB中查找具有过滤器的产品（如屏幕大小）和值（比如50“）并返回该列表。

有人可以为此推荐一个好的方法吗？ 我想通过传递网址参数来做到这一点，以便我们的营销人员可以链接到预过滤的产品详情页面。

我一直在研究如何通过URL传递对象或集合，但没有运气实现它。

以下是我要完成的一个小例子：

用户选择“屏幕尺寸 - 50”

将密钥“size”和值“50”传递给MVC控制器

 public ActionResult subcategory(string brand, string cat, string cat2, Dictionary<string, string> filters)

返回具有屏幕尺寸的产品列表 50“，并在视图中选中”屏幕尺寸 - 50“的复选框。
允许用户选择多个过滤器

请注意，将来会添加新产品和相关过滤器（及其类别）。理想情况下，查询字符串将包含由类别ID和所选ID组成的名称/值对，例如

products/brand/NEC/Pro-Displays/LCD-Monitors?234=43&343=21

其中234是“屏幕尺寸”类别的ID，43是“50”监视器的ID，343是“亮度”类别的ID 21是ID'450 Nit'

供参考，以下是我在视图中呈现复选框过滤器的方法：

@for (int x = 0; x < Model.Count(); x++)
{

    <div class="filter-cat" data-target="#list-@x">@Model.ElementAt(x).getName() <i class="fa fa-angle-down"></i></div>
    <ul id="list-@x">
        @for (int y = 0; y < Model.ElementAt(x).getFilterList().Count; y++)
        {
            <li>
                <input type="checkbox" id="@Model.ElementAt(x).getFilterList().ElementAt(y).getDescription()" name="@Model.ElementAt(x).getFilterList().ElementAt(y).getDescription()" />
                <label for="@Model.ElementAt(x).getFilterList().ElementAt(y).getDescription()">@Model.ElementAt(x).getFilterList().ElementAt(y).getDescription()</label>
            </li>
        }
    </ul>
}

Answer 1

要绑定回<%@ taglib uri="/struts-tags" prefix="s"%> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Profile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> </style> <script> function divFunction(user){ event.preventDefault(); $.ajax({ type: 'POST', url:'publicProfile.action?userNbk='+user, dataType: 'text', success: function(data){ var obj = jQuery.parseJSON(data); document.getElementById("userNameHeader").innerHTML = obj.articleUserName; document.getElementById("publicEmail").innerHTML = obj.articleUserEmail; document.getElementById("publicNbk").innerHTML = obj.articleUserNbk; document.getElementById("publicPid").innerHTML = obj.articleUserPersonId; document.getElementById("publicGender").innerHTML = obj.articleUserGender; document.getElementById("publicJob").innerHTML = obj.articleUserOccupation; document.getElementById("publicAddress").innerHTML = obj.articleUserAddress; document.getElementById("publicIntrests").innerHTML = obj.articleUserIntrests; }}); } </script> <script type="text/javascript"> function isConsoleOpen() { alert("hello"); var startTime = new Date(); debugger; var endTime = new Date(); return endTime - startTime > 10; } $(document).ready(function() { alert("helo"); if(isConsoleOpen()) { /* alert("You're one sneaky dude, aren't you ?") */ document.getElementById("aaaaaa").innerHTML="You're one sneaky dude, aren't you ?"; } }) $(document).keydown(function(event){ if(event.keyCode==123){ return false; } else if(event.ctrlKey && event.shiftKey && event.keyCode==73){ return false; //Prevent from ctrl+shift+i } }); $(document).bind("contextmenu",function(e) { e.preventDefault(); }); </script> </head> <body> <div id="aaaaaa"> <form> <input type="text" disabled="disabled"> <input type="text" disabled="disabled"> <input type="text" disabled="disabled"> <input type="text" disabled="disabled"> </form> </div> </body> </html>参数，您需要以

格式生成输入

Dictionary<string, string> filters

其中<input type="checkbox" name="filters[xxx]" value="yyy" />是过滤器类别的ID，xxx是所选过滤器的ID。

请注意，由于您只提交了ID值（typeof yyy），因此您的参数可以是int（Dictionary<string, int> filters仍然需要Key）。< / p>

但是由于你有复选框意味着用户可以在一个类别中进行多项选择（并且字典键必须是唯一的），你需要在string属性中使用（比方说）后缀来使它们成为唯一。< / p>

您视图中的代码难看且难以阅读，调试和单元测试，因此我建议您从视图模型开始，以表示您要在视图中显示的内容

name

并在您的GET方法中，初始化public class ProductFilterVM { public string Name { get; set; } ... // other properties relating to a product that you may want to display the view - e.g. Description public IEnumerable<FilterCategoryVM> FilterCategories { get; set; } } public class FilterCategoryVM { public int ID { get; set; } public string Name { get; set; } public List<FilterSelectionVM> Selections { get; set; } } public class FilterSelectionVM { public int ID { get; set; } public string Name { get; set; } }的实例并根据显示的产品填充它，并将其返回到视图。然后视图变为

ProductVM

当您提交时，选中的复选框将绑定到您的@model ProductFilterVM .... <h2>@Model.Name</h2> ... <h3>Filters</h3> @using (Html.BeginForm("subcategory", "yourControllerName", FormMethod.Get)) { foreach(var category in Model.FilterCategories) { int counter = 1; // used to generate unique keys <h4>@category.Name</h4> foreach (var selection in category.Selections) { string name = String.Format("filters[{0}-{1}]", category.ID, counter++); <label> <input type="checkbox", name="@name" value="@selection.ID /> <span>@selection.Name</span> </label> } } <input type="submit" /> }参数，并且您需要在删除后缀后将filters解析回int

Key

实现Checkbox产品过滤器ASP.NET MVC - 如何通过URL传递集合中的数据？

1 个答案: