Question

我有产品清单，我应该按照多个标准过滤产品。在一个页面中，我在不同的元素中有多个标准（名称，价格，创建日期等）：文本框，下拉列表等。我想搜索没有重新加载页面的产品。当我更改任何条件时，产品列表会自动更新，而不会重新加载页面。像这样：Filter users.

以下是我的观点：

@model IEnumerable<Product>
    <section id="sidebar left">
       <div class="form_info">
           <label>Category</label>
           @Html.DropDownListFor(model => model.CategoryId, ViewBag.CategoryList as IEnumerable<SelectListItem>, "-", new { id = "ProductCategory" })
       </div>

       <div class="form_info">
            <label>Name</label>
            @Html.TextBoxFor(model => model.Name, new{ id = "ProductName"})
       </div>
    ...//other properties
    </section>

<section id="content" >
@foreach (var item in Model)
{
<a class="productStyle" href="@Url.Action("Details", "Product", new { id=item.Id})">@item.Name</a>
}
</section>

我在控制器中有FilterProductByCriteria(int CategoryId, int Name, double priceFrom, double PriceTo..etc)个动作。

我可以这样做：在每个元素的onchange()事件中将所有条件值发送到控制器并回调结果数据 - 过滤产品列表，但我不能在@foreach (var item in Model)中使用返回的数据。请帮助我或建议更好的方法。（抱歉英文不好）

Answer 1

我可以这样做：在onchange（）事件中发送所有元素控制器的标准值和回调结果数据 - 过滤产品列表，但我无法在@foreach (var item in Model)
中使用返回的数据

为什么不呢？你当然可以。作为替代方法，您可以将过滤条件输入放在HTML表单中，并提供一个提交按钮，将值发送到控制器，此控制器将返回带有过滤产品模型的相同视图。然后你可以通过引入AJAX来优化它。您可以将<section id="content">内容放入包含过滤结果的部分视图中。然后，您可以使用Ajax.BeginForm而不是常规Html.BeginForm将过滤条件发送到控制器操作。反过来，此控制器操作将执行过滤并将过滤后的产品列表传递到相同的部分视图（return PartialView()），然后该部分视图将仅用于刷新DOM的结果部分。

例如：

@model IEnumerable<Product>
@using (Ajax.BeginForm("Search", "SomeController", new AjaxOptions { UpdateTargetId = "content" }))
{
    <section id="sidebar left">
        <div class="form_info">
            @Html.LabelFor(model => model.CategoryId)
            @Html.DropDownListFor(
                model => model.CategoryId, 
                ViewBag.CategoryList as IEnumerable<SelectListItem>, 
                "-", 
                new { id = "ProductCategory" }
            )
        </div>

        <div class="form_info">
            @Html.LabelFor(model => model.Name)
            @Html.TextBoxFor(model => model.Name, new { id = "ProductName"})
        </div>
        ...//other properties
    </section>

    <button type="submit">Filter</button>
}

<section id="content">
    @Html.Partial("_Products", Model)
</section>

然后您的控制器操作可能如下所示：

[HttpPost]
public ActionResult Search(SearchCriteriaViewModel model)
{
    IEnumerable<Product> filteredProducts = ... you know what to do here
    return PartialView("_Products", filteredProducts);
}

Answer 2

请参阅此链接，以便在不刷新页面的情况下在ASP.Net GridView内搜索。

[没有刷新整页的ASP.NET GridView搜索]

http://www.ashishblog.com/search-sort-in-gridview-using-c-net-ajax-and-jquery/

这是我的aspx页面，在AJAX更新面板中有搜索文本框和gridview。

<asp:ScriptManager ID="ScriptManager" runat="server" />
      Search: <asp:TextBox ID="txtSearch" runat="server" OnTextChanged="txtSearch_TextChanged"  />
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" >
        <ContentTemplate>

            <div class="GridviewDiv">


                 <asp:GridView ID="Gridview1" runat="server" AutoGenerateColumns="False" AllowPaging="True"
                    AllowSorting="true" DataSourceID="dsGridview" Width="540px" PageSize="10" CssClass="yui">
                    <Columns>
                        <asp:BoundField DataField="id" HeaderText="ID" SortExpression="id" ItemStyle-Width="40px"
                            ItemStyle-HorizontalAlign="Center" />
                        <asp:TemplateField HeaderText="First Name" SortExpression="FirstName">
                            <ItemStyle Width="120px" HorizontalAlign="Left" />
                            <ItemTemplate>
                                <asp:Label ID="lblFirstname" Text='<%# HighlightText(Eval("FirstName").ToString()) %>' runat="server"
                                    CssClass="TextField" />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Last Name" SortExpression="LastName">
                            <ItemStyle Width="120px" HorizontalAlign="Left" />
                            <ItemTemplate>
                                <asp:Label ID="lblLastname" Text='<%# HighlightText(Eval("LastName").ToString()) %>' runat="server"
                                    CssClass="TextField" />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:BoundField DataField="Department" HeaderText="Department" SortExpression="Department"
                            ItemStyle-Width="130px" />
                        <asp:BoundField DataField="Location" HeaderText="Location" SortExpression="Location"
                            ItemStyle-Width="130px" />
                    </Columns>
                </asp:GridView>
                </div>
        </ContentTemplate>
         <Triggers>
                <asp:AsyncPostBackTrigger ControlID="txtSearch" EventName="TextChanged" />
            </Triggers>
    </asp:UpdatePanel>

- ＆GT;这是我在页面加载事件中的文件添加方法背后的代码。

   string SearchString = "";
    protected void Page_Load(object sender, EventArgs e)
    {
txtSearch.Attributes.Add("onkeyup", "setTimeout('__doPostBack(\\'" + txtSearch.ClientID.Replace("_", "$") + "\\',\\'\\')', 0);");
        if (!IsPostBack)
        {
            Gridview1.DataBind();
        }
    }
    protected void txtSearch_TextChanged(object sender, EventArgs e)
    {
         SearchString = txtSearch.Text;
    }
    public string HighlightText(string InputTxt)
    {
        string Search_Str = txtSearch.Text.ToString();
        // Setup the regular expression and add the Or operator.
        Regex RegExp = new Regex(Search_Str.Replace(" ", "|").Trim(), RegexOptions.IgnoreCase);
        // Highlight keywords by calling the 
        //delegate each time a keyword is found.
        return RegExp.Replace(InputTxt, new MatchEvaluator(ReplaceKeyWords));
        // Set the RegExp to null.
        RegExp = null;
    }
    public string ReplaceKeyWords(Match m)
    {
        return "<span class=highlight>" + m.Value + "</span>";
    }

如何在不重新加载页面的情况下按多个标准过滤列表？

2 个答案: