Javascript 使用asp mvc局部视图和jquery筛选和显示数据

谢谢你以前的帮助。我会很感激的；）

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

我一直试图通过使用下拉菜单作为过滤器，并在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>

阿蒂克尔医学院
Urutkan Berdasarkan：
@Html.DropDownList（“FilterDropdown”）

@foreach（Model.ArticleClient中的var项）
{
@Html.Partial（“~/Views/Shared/_News.cshtml”，项目）
}

@Pager（Model.ArticleClient.PageSize、Model.ArticleClient.PageNumber、Model.ArticleClient.TotalItemCount）

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

$（文档）.ready（函数（）{
$（“#FilterDropdown”）.change（函数（）{
var filterSelected=$（“选择选项：选定”）.first（）.text（）；
$.get（'@Url.Action（“~/Views/Shared/_News.cshtml”），{id:newsFilter}，函数（数据）{
$（“#target”）.html.data；
});
});
});

有人能帮我用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>

按名称排序
按日期排序
按流行程度排序


项目1
11/01/2000
2.


项目2
11/01/2001
3.


项目3
11/01/2002
4.


项目4
11/01/2003
5.

Oia，如果我的ASP MVC代码不合适，请随时给我建议；）

---

感谢您的指导：）

首先，您需要更改get请求的“@Url.Action（“~/Views/Shared/\u News.cshtml”）”。get请求将被删除

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

控制器的方法可能如下所示

public ActionResult FilteredResult(int newsFilter)        
{

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

return View("YourFilteredViewName",filderedModelData);

}

---

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

首先，您需要更改get请求的“@Url.Action（“~/Views/Shared/#News.cshtml”）”。get请求将被删除

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

控制器的方法可能如下所示

public ActionResult FilteredResult(int newsFilter)        
{

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

return View("YourFilteredViewName",filderedModelData);

}

---

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

那么您遇到了什么问题呢。什么不起作用？我可以改变我的问题吗？我想让这个简单点@stephenmueckey你可以编辑你的问题：）（你已经显示了太多不相关的代码）哈哈，对不起，因为我也是stackoverflow的新手：D@StephenMuecke谢谢你的帮助大师！！我已经编辑了我的问题：）谢谢你的建议（y）@garethbSo你有什么问题。什么不起作用？我可以改变我的问题吗？我想让这个简单点@stephenmueckey你可以编辑你的问题：）（你已经显示了太多不相关的代码）哈哈，对不起，因为我也是stackoverflow的新手：D@StephenMuecke谢谢你的帮助大师！！我已经编辑了我的问题：）谢谢你的建议（y）@garethbThanks谢谢你的建议：）谢谢你的建议：）