AJAX and MVC (C#)

Question

I've never used AJAX and am, quite frankly, not much versed in JS either.

I have a page (Product Browser) that has the following breakdown:

1. Navigation (First, Prev, 1, 2, 3 Next, Last) - full post back
2. Items per Page drop down - I want to AJAX this
3. Left Column - Filters - I want to AJAX this
4. Product Display area - displays products based on 1, 2 & 3 above

I am starting with Item #2 and am trying to figure out how to change item 4 based off of the OnChange event for the drop down. I am at a loss as to where. or how, to start. Should it be AJAX? JQuery? A combination of both? And remember - it is in a MVC based app.

TIA

Answer 1

You can try this simple demo from my blog

Answer 2

AJAX is just a request pulling information from a page without refreshing the browser. You can use ASP.NET AJAX or JQuery's AJAX and you should get the same results.

And JQuery is just a library to select and manipulate the DOM. JQuery has a few AJAX functions you can use as well but JQuery can be used for much much more.

I don't know how ASP's version works exactly but AJAX is just a page request.

Answer 3

I would definately check out jQuery and not bother with MS's ajax implementation. For the things you want, you can check out jQuery's docs for $post for example or ajax/load functions.

You can either add events to the controls on your page, like the carpets / area rugs radio buttons, or add that event to the submit button and then make a call to the products controller to retrieve a partial view that loads into the products div.

Answer 4

The answer to your question is definitely, "yes".

I've got one in front of me right now, so I'll try to abstract it out.

First, create a controller action that returns a JsonResult (rather than ActionResult). Other than its return type it's just like any other action, so you can send parameters, etc. The only thing that's really different is that you're going to return a JsonResult() object, setting its Data property and any other properties that you may need. Mine looks something like this (very pseudo-codish...):

public JsonResult GetList(int parentId)
{
  var results = dataRepository.GetById(parentId);

  return new JsonResult()
  {
    Data = results.ToArray();
  };
}

Now, in your view, create a script that looks something like this. Note that this is jQuery syntax, so it may look a bit unusual if you're not familiar with it.

<script language="javascript" type="text/javascript">
// When the document is ready, start firing our AJAX
$(document).ready(function() {
  // Bind a function to the "change" event of our drop-down list
  $("#dropDownId").bind("change", function(e) {
    updateList();
  });
}

var retrieveData = function(path, parentId, fnHandleCallback) {
  // Use the getJSON method to call our JsonResult action
  $.getJSON(path, { parentId: parentId }, function(data) {
    fnHandleCallback(data);
  });
};

// The path parameter is our JSON controller action
function updateList() {
  retrieveData("/Controller/GetList", $("#dropDownId").val(), handleResponse);
}

function handleResponse(data) {
  // Ok, now we have the JSON data, we need to do something with it.  I'm adding it to another dropdown.
  $("#otherDropDownId > option").remove();

  for (d in data)
  {
    var item = data[d];

    $("#otherDropDownId").append("<option value=\"" + item.Value + "\">" + item.Text + "</option>");
  }
}
</script>

<%= Html.DropDownList("dropDownId", new SelectList(new List<SelectListItem>())) %>
<%= Html.DropDownList("otherDropDownId", new SelectList(new List<SelectListItem>())) %>

This is all very much off the top of my head, so let me know if something needs to be clarified or corrected.

Edit

As noted in my comment, in order to "AJAXify" your page, you don't really want to push everything around in your Model. Instead, it sounds like you want something like this:

Controller action:

public JsonResult GetPagedData(int page, int itemsPerPage, string[] filters)
{
  var results = dataRepository.GetPagedItems(pageId, itemsPerPage, filters);

  return new JsonResult()
  {
    Data = results.ToArray();
  };
}

JS changes:

var retrieveData = function(path, pageNumber, pageSize, filters, fnHandleCallback) {
  // Use the getJSON method to call our JsonResult action
  $.getJSON(path, { page: pageNumber, itemsPerPage: pageSize, filters: filters }, function(data) {
    fnHandleCallback(data);
  });
};

// The path parameter is our JSON controller action
function updateList() {
  retrieveData("/Controller/GetPagedData", $("#pageNumber").val(), $("#dropDownId").val(), null, handleResponse);
}

I've intentionally ignored figuring out both the page number and the filters - they would follow essentially the same principles.

Finally, when you're rendering the data you'll put it into your product grid rather than another drop-down.