Filter and display data with asp mvc partial views and jquery

Question

Thanks for help before. I'll appreciate it ;)

I've been googling to answer this problem but I didn't find the right answer yet.

I've been trying to filter my results (records) by using dropdown as the filter and using jquery in ASP MVC (Just in my case).

the image for the view

(Urutkan berdasarkan means Filter by. And Terbaru means Newest.)

The dropdown enables you to sort the content by Date, Popular, and Alphabet. How can I filter it by jquery with dropdown?

Here's the 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>

And the 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>

can anyone help me to solve and for sorting this with jquery or javascript?

fell free for using fiddle.

If the view in my ASP MVC is not understandable. Let's pretending the view would be like this:

<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, if my ASP MVC code is not appropriate, feel free to give me the suggestion ;) Thanks for guidance :)

Can I change my question? I want to make this simple @StephenMuecke — Fityan Aula
– Fityan Aula, Commented Nov 18, 2016 at 1:16
You can edit your question :) (you have shown far too much irrelevant code anyway) — user3559349
– user3559349, Commented Nov 18, 2016 at 1:18
lol, sorry because I am new in stackoverflow too :D @StephenMuecke Thanks for help master!! — Fityan Aula
– Fityan Aula, Commented Nov 18, 2016 at 1:24
I've edited my question :) thanks for suggestion (y) @garethb — Fityan Aula
– Fityan Aula, Commented Nov 18, 2016 at 1:44

sina_Islam · Accepted Answer · 2016-11-18 05:17:48Z

4

First you need to change the '@Url.Action("~/Views/Shared/_News.cshtml")' of get request. The get request will be

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

The method of Controller may be looks like

public ActionResult FilteredResult(int newsFilter)        
{

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

return View("YourFilteredViewName",filderedModelData);

}

So by doing this you will get filtered view and able to parse the "#target" ul of the Dom.

answered Nov 18, 2016 at 5:17

sina_Islam

1,17313 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Fityan Aula Over a year ago

Thanks for suggestion :)

Collectives™ on Stack Overflow

Filter and display data with asp mvc partial views and jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related