用asp mvc部分視圖和jquery過濾和顯示數據

感謝以前的幫助。我會感激它;）用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>

而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的代碼是不恰當的，隨時給我的建議;）謝謝指導:)

來源

2016-11-18 Fityan Aula

那麼你有什麼問題。什麼不起作用？ –

我可以改變我的問題嗎？我想使這個簡單@StephenMuecke –

你可以編輯你的問題:)（你已經顯示太多無關代碼無論如何） –

首先，你需要更改獲取請求的'@ 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。

來源

2016-11-18 05:17:48

感謝您的建議:) –

用asp mvc部分視圖和jquery過濾和顯示數據

回答

相關問題