asp mvcの部分表示とjqueryによるデータのフィルタリングと表示

Question

ありがとうございました。私はそれを感謝します;）

私はこの問題に答えるためにグーグルで行ってきましたが、私はまだ正解を見つけることができませんでした。

私はフィルタとしてドロップダウンを使用し、ASP MVC（ちょうど私の場合）でjqueryを使用して結果（レコード）をフィルタリングしようとしています。

the image for the view

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

イア、私のASP MVCコードが適切でない場合、私の提案を与えること自由に感じ;）指導のための 感謝:)

Answer 1

まず、あなたがする必要があります取得要求の '@ Url.Action（〜/ Views/Shared/_News.cshtml'） 'を変更してください。 get要求は、コントローラのメソッドが

public ActionResult FilteredResult(int newsFilter)   
{ 

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

return View("YourFilteredViewName",filderedModelData); 

} 

のように見えますが、だから、これを行うことによってビューを濾過し、ドムの「#target」ULを解析することができてしまいますすることができる

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

になります。