ansaurus

Question

Best way to filter a list-view in asp.net MVC

Answer 1

A:

You have a few options. One way is to create a Controller method that manages the process of grabbing your data (say as a IList), and then uses the Json(...) method of the Controller to serialize it and send it back as JsonResult (here's an example: http://weblogs.asp.net/mehfuzh/archive/2009/04/28/using-of-json-result-in-asp-net-mvc-1-0.aspx).

On your front end, you can wire up some javascript on the dropdown list that uses jQuery to make a $.get (http://api.jquery.com/jQuery.get/) passing back an id of sorts to determine your filter criteria.

Then you use the callback function of the $.get(...) call to manipulate your DOM as you see fit to visually depict the new list of data.

Chris F 2010-01-21 21:47:47

Right now, the data is displayed correctly using in-line C# code in my View, like `<% = Html.Encode(item.assignedTo) %>` how would I "minipulate the DOM to visually depict the new list"?

Nate Bross 2010-01-21 22:06:37

My understanding was that your page started off with one of the two options, say "Assigned To Me". The data was visualized in a <div id="values"> somewhere on your page using something like <%= Html.Encode(item.assignedTo) %>. If you send back a JsonResult and it's a list, you'll need javascript in the callback function to iterate and add elements to the "values" div, like <li> in a <ul> for every item in the Json object. Alternatively, create a partial view which is rendered server side and pass back a PartialViewResult from the Controller Action, and set the "values" div html to the result.

Chris F 2010-01-21 22:21:46

Any info/links on how I would return a partial view from the my Controller action?

Nate Bross 2010-01-21 23:05:54

The answer you accepted was essentially what I was describing, using .load instead of .get, which automatically sets the returned value (the partial view here) as the html of the containing DOM element.

Chris F 2010-01-22 06:04:36

Yes the answer is _basically_ the same but I provided a working code; which is important for someone who obviously only starts to learn MVC + jQuery. I don't care if my answer accepted or yours, but that's an important distinction. Describing code with words (you use this to do this in this way) never works (I sometimes do this, too) - or we'd finally have the dream of "natural programming language" comes true.

queen3 2010-01-22 08:16:10

@queen3, I think you misunderstood my comment. I wasn't suggesting that Nate should have marked mine as an answer. I was responding to his last question "... partial view from my Controller action?" As for code with words: agreed, it's always nicer to see code samples.

Chris F 2010-01-22 16:07:01

Answer 2

+1 A:

You use JavaScript/jQuery to bind to onchange/onclick event, and there do a postback:

$(function() {
   $("#myelement").click(function(){
      $("#secondelement").load('<%= Url.Action("Source") %>?selected=' + $(this).val());
   });
}

There're jQuery plugins that do similar things, for example http://dev.chayachronicles.com/jquery/cascade/index.html (not the best one, the first I found).

queen3 2010-01-21 21:51:09

My second element is not another dropdown, but a large HTML Table... would this approach still work?

Nate Bross 2010-01-21 22:03:41

I ended up using this approach, and simply having it call an Action that returned a partial view.

Nate Bross 2010-01-21 23:57:19

Yes it will work. Note that you decide to return full page or partial using Request.IsAjaxRequest() ? (ActionResult)View() : PartialView(); If the table is large you can (as Chris suggested) return Json (return Json(data)) and parse it using javascript... but that's much more work so don't optimize prematurely, measure the data first.

queen3 2010-01-22 08:11:17

ansaurus

tags:

views:

answers:

Best way to filter a list-view in asp.net MVC

related questions