Question

之前感谢您的帮助。我会很感激;）

我一直在谷歌上搜索这个问题，但我还没有找到正确的答案。

我一直试图通过使用dropdown作为过滤器并在ASP MVC中使用jquery来过滤我的结果（记录）。（仅在我的情况下）。

（Urutkan berdasarkan意为过滤。而Terbaru意味着最新。）

使用下拉列表，您可以按日期，热门和字母对内容进行排序。如何通过下拉按jquery过滤它？

以下是观点：

            <div class="col s12 m12 l12  hide-on-small-only hide-on-med-only" style="border-bottom: 2px solid #9e9e9e;">
                <div class="col l9">
                    <span class="inline">
                        <span class="left-align grey-text text-darken-3 left" style="font-size: 1.7rem;">Artikel Medis</span>
                        <span class="right-align right" style="margin-top: 15px;">
                            <label class="black-text">Urutkan Berdasarkan:</label>
                        </span>
                    </span>
                </div>

                <div class="input-field col l3 right left-align select-web-news" style="margin-bottom: 0;">
                    @Html.DropDownList("FilterDropdown")
                </div>
            </div>
            <div class="col s12 m12 l12 left">
                <ul class="ul-news" id="target">
                    @foreach (var item in Model.ArticleClient)
                    {
                        @Html.Partial("~/Views/Shared/_News.cshtml", item)
                    }
                </ul>
                <div class="pager">
                    @Html.Pager(Model.ArticleClient.PageSize, Model.ArticleClient.PageNumber, Model.ArticleClient.TotalItemCount)
                </div>
            </div>

和jquery：

<script type="text/javascript">
$(document).ready(function () {
    $("#FilterDropdown").change(function () {
        var filterSelected = $("select option:selected").first().text();
        $.get('@Url.Action("~/Views/Shared/_News.cshtml")', { id: newsFilter }, function (data) {
            $("#target").html.data;
        });
    });
});
</script>

任何人都可以帮我解决并使用jquery或javascript对其进行排序吗？

随意使用小提琴。

如果我的ASP MVC中的视图不可理解。让我们假装视图是这样的：

<select>
  <option value="0">Sort by Name</option>
  <option value="1">Sort by Date</option>
  <option value="2">Sort by Popular</option>
</select>
<ul class="listitems">
    <li data-position="1">
      <div class="name">Item 1</div>
      <div class="date">11/01/2000</div>
      <div class="popular">2</div>
    </li>
    <li data-position="2">
      <div class="name">Item 2</div>
      <div class="date">11/01/2001</div>
      <div class="popular">3</div>
    </li>
    <li data-position="3">
      <div class="name">Item 3</div>
      <div class="date">11/01/2002</div>
      <div class="popular">4</div>
    </li>
    <li data-position="4">
      <div class="name">Item 4</div>
      <div class="date">11/01/2003</div>
      <div class="popular">5</div>
    </li>
</ul>

Oia，如果我的ASP MVC代码不合适，请随时给我建议;）感谢您的指导：）

Answer 1

首先，您需要更改get请求的'@ Url.Action（“〜/ Views / Shared / _News.cshtml”）'。获取请求将是

 $.get('@Url.Action("/ControllerName/ActionName")',        
         { id: newsFilter },        
         function (data) {
            $("#target").html.data;
        });

Controller的方法可能看起来像

public ActionResult FilteredResult(int newsFilter)        
{

//Do your work and pass the model to the view

return View("YourFilteredViewName",filderedModelData);

}

通过这样做，您将获得过滤后的视图，并能够解析Dom的“#target”ul。

使用asp mvc部分视图和jquery过滤和显示数据

1 个答案: