0

製品リストがあり、複数の基準で製品をフィルタリングする必要があります。1 つのページで、複数の条件 (名前、価格、作成日など) を異なる要素 (テキスト ボックス、ドロップダウン リストなど) に設定しています。ページをリロードせずに製品を検索したいです。条件を変更すると、ページをリロードしなくても商品リストが自動的に更新されます。このように:ユーザーをフィルターします。

これが私の見解です：

@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">フィルタリングされた結果を含む部分ビューにコンテンツを配置します。そして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);
}
于 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/

これは、AJAX更新パネル内に検索テキストボックスとグリッドビューがある私のaspxページです。

<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 に答える