javascript - 使用 asp mvc 部分 View 和 jquery 过滤和显示数据

Question

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

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

我一直在尝试通过使用下拉列表作为过滤器并在 ASP MVC 中使用 jquery 来过滤我的结果(记录)(就我而言)。

the image for the view

(Urutkan berdasarkan 的意思是“过滤依据”。Terbaru 的意思是“最新的”。)

下拉列表使您可以按日期、流行和字母对内容进行排序。如何通过 jquery 和下拉菜单过滤它？

这是 View :

            <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 对其进行排序吗？

因使用 fiddle 而自由。

如果我的 ASP MVC 中的 View 无法理解。让我们假设 View 是这样的:

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

}

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