ASP.NET MVC - Build Search Results into a Div

Question

I'm new to ASP.NET MVC, but I need to perform a search for articles that match a selected category. The results of this query need to be written into a "search results" div overlay with DHTML- jquery, probably.

So, I need the results of an Action, but not to render a view. I was thinking I could use Json and then iterate over the resulting records, somehow.

Or is it easier to use RenderPartial... but how would I use this in this DHTML scenario?

Thanks.

Answer 1

Hmmm, sounds like you are trying to do a filter?

If this is the case I think it's a bad idea trying to search within your html. I think a better approach would be to post back using jQuery, get your result set from whatever database you are using, and return that back to the view as apartial view.

When you are searching your database you should apply the filter at that point using sql, Linq2Sql or whatever you're using.

If you are still Hell bent on searching the HTML then I'd give each relevant div a class name of say class="DivSearchable". Then in jQuery you can do something like;

$('.DivSearchable").each(function() { 

 var text = $(this).val();
 "Now test text for contents of your seach string"
  if (BoolIfFound == true)
    $(this).addClass("highlightClassName");
});

highlightClassName would set the background-color to something so you can see which divs contains the search string.

make sense?

Answer 2

I like the way Steve Sanderson describes in his ASP.NET MVC book. It dosnt work with JSON, but returns a partial. This makes it easier to have both: An Ajax and a non-Ajax version.

The cotroller returns a View or Partial depending on the type of request:

public ActionResult GetArticles(string category)
{
    ...
    if(Request.IsAjaxRequest())
    {
     return PartialView("ArticleListPartial",articleModel)
    }
    else
    {
     return View("ArticleListPage",articleModel)
    }
}

The search by default submits the from with with a Non-Ajax post:

<form id="articleSearch" method ="post" action="/Article/GetArticles" >
...
<input type="submit" value="Get the articles!" />
<form>

Then there is a Jquery snippet that kicks in when Javascript is available and submits the request via Ajax

<script language="javascript" >
  $(function() {
    $("#articleSearch").submit(function() {
     $.post($(this).attr("action"), $(this).serialize(), function(modelResponse) {
      ("#articleResultContainer").html(modelResponse);

     });
     return false;
    });
  });
</script>