0

我有产品列表，我应该按多个标准过滤产品。在一个页面中，我在不同的元素中有多个标准（名称、价格、创建日期等）：文本框、下拉列表等。我想在不重新加载页面的情况下搜索产品。当我更改任何标准时，产品列表会自动更新，无需重新加载页面。像这样：过滤用户。

这是我的看法：

@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). 请帮助我或建议更好的方法。（抱歉英语不好）

4

2 回答 2

2

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

为什么不？你当然可以。作为替代方案，您可以将过滤条件输入放在 HTML 表单中，并提供一个提交按钮，该按钮会将值发送到控制器，该控制器将返回与过滤后的产品模型相同的视图。然后你可以通过引入 AJAX 来优化它。您可以将<section id="content">内容放入包含过滤结果的局部视图中。然后您可以使用 anAjax.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);
}
于 2013-02-04T06:44:32.883 回答
0

请参考此链接在 ASP.Net GridView 中搜索而不刷新页面。

[ASP.NET GridView 搜索不刷新整个页面]

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

这是我的 aspx 页面，在 AJAX 更新面板中具有搜索文本框和网格视图。

<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>

--> 这是我在页面加载事件中添加文件的代码。

   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>";
    }
于 2017-01-11T09:49:54.233 回答