Why does this only work in Firefox? Rendering Of Asp.net MVC partial View and passing result back through ajax

Question

Hi

Basically I have this

In my Asp.net controller

public ActionResult RenderMyView()
{
  data = // some data to used in rendering my partial view
  return PartialView("PartialView", data);

 //edit 
  I also return a json result if an error occurs. Say if I get an SQLException I will return  a json result back  and not render any partialview.
}

My ParitalView renders a table and the "data" is basically columns from the database. So it takes the information in the data my generates a table with that many rows.

This is in my java script file and is activated when a drop down list item is changed.

$.getJSON('RenderMyView', { 'field': field}, function(response)
{
    $('#id').after('<div>' + response + '</div>');
});

So what this does is calls RenderMyView what renders a partialView and adds the response code to my page.

So this is my thinking. It goes to my controller and renders and returns that PartialView. Once it gets rendered it is just html. So it is sending back html and then I add that html code into a div.

This works as I expect on Firefox but no other browser works. I tired Opera, Google chrome, IE 8, Safari none of them work.

I have no clue why since I don't have my trusty firebug.

I tired to use IE 8 firebug clone but for some reason it does not go into this part

$('#id').after('<div>' + response + '</div>');

I put break points on every line but after it goes to the server its like thats the end of the debugging it never goes back to the debugger and no errors are occurring on the server side since I am walking through it with the VS2008 debugger and nothing crashes.

Edit

It seems to not go into the response part at all. Like I put an alert box there and it never gets triggered.

Answer 1

I favour the call;

$.post("/Home/jQueryGetCalendarItems", { month: this.id }, function(retHTML) {

which works in FF and IE no probs. In the code above I'm returniong a PartialView and then replacing the contents of a div like you are.

EDIT

The other thing to look out for is the use of #. Your control name may be different than you expect. Do a [View/Source] to confirm control Id's etc. I prefer the use of '.ClassName' myself.

Answer 2

Shouldn't you be using $.ajax() rather than $.getJSON() if you're wanting to receive HTML? Does doing this make any difference?

$.ajax({
    url: 'RenderMyView',
    data: {field:'field'},
    dataType: 'html',
    success: function(response, textStatus) {
        $('#id').after('<div>' + response + '</div>');
    }
});

Answer 3

Is your partial view returning an JSON result? If not, your call is probably not working because the other browsers are expecting a JSON result and receiving Html/text result.

If your partial view is returning Html then you need to use an jQuery Ajax call using.

$.ajax()

or, if you are then going to dump the result in a div, I like to use

$("#Id").load("/RenderMyView/");

which runs an Ajax call and dumps it into the selected element

EDIT

In your controller you should catch the error and return a content result which contains the error message.

public ActionResult RenderMyView()
{
  try
  {
    data = // some data to used in rendering my partial view
    return PartialView("PartialView", data);
  }
  catch(Exception e)
  {
    //catches any errors returns it back as plain text
    //log the error that was thrown
    return Content("Error: " + e.Message);
  }
}

The Content just returns plain text from the controller. You will then need to check for this result in your JavaScript.

$.ajax({
  url: 'RenderMyView',
  data: {field:'field'},
  dataType: 'html/text',
  success: function(response) {
    if (response.indexOf("Error:") == 1) {
      //handle error
    }
    else {
      $('#id').after('<div>' + response + '</div>');
    }
  }
});