Exception message to UI

Question

I open a jQuery dialog, in this box I do a save/cancel. To Save, I call my controller, make some validation, save or throw Exception (MyPersonalException). If there is exception, I return an another View (the "MessageError" view) to display in the popup. I just want to see in the modal box the message available in "MyPersonalException"

My questions : 1. That's work but only with Firefox not IE not Chrome 2. Is there an other way because that's look a lof of code to just diplay a message.

The controller look like this :

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult SaveOrUpdate(Guid id, string firstName, string LastName)
{
    try
    {
        Employee employee = new Employee() { Id = id, FirstName = firstName, LastName = LastName };
        _employeeService.SaveOrUpdate(employee);
        return Index();
    }
    catch (MyPersonalException ex)
    {
        _model.ErrorMessage = ex.Message;
        return View("MessageError", _model);

    }
    catch (Exception ex)
    {
        _model.ErrorMessage = ex.Message;
        return View("MessageError", _model);
    }
}

To call the dialog box, I use this code

jQuery(document).ready(function() { $(function() { /* var name = $("#firstName"), email = $("#lastName"), password = $("#isActive"), allFields = $([]).add(name).add(email).add(password), tips = $("#validateTips");*/

    $("#dialog").dialog({
        bgiframe: true,
        autoOpen: false,
        modal: true,
        buttons: {
            Save: function() {
                $.ajax({
                    type: "POST",
                    url: "/Employee/SaveOrUpdate",
                    data: {
                        id: getId(),
                        firstName: getFirstName(),
                        lastName: getLastName()
                    },
                    success: function(data) {
                        if (jqueryShowResult(data))
                            $("#DisplayError").html(data);
                        else {
                            employeeId = 0;
                            $(this).dialog('close');                               
                        }
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                    }
                })

            },
            Cancel: function() {
                employeeId = 0;
                $(this).dialog('close');
            }
        },
        close: function() {
            $("#gridEmpoyee").trigger("reloadGrid");
        },
        open: function() {
            $.ajax({
                type: "POST",
                url: "/Employee/GetEmployee",
                data: {
                    id: employeeId
                },
                success: function(data) {
                    $("#employeeDetail").html(data);
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                }
            })
        }
    });
});

});

The jQueryShowResult

<script type="text/javascript">
    jqueryShowResult = function(msg) {
        var browser;
        try //Internet Explorer
                    {
            xmlDocTest = new ActiveXObject("Microsoft.XMLDOM");
            browser = "IE";
        }
        catch (e) {
            browser = "FF";
        }

        if (browser == "IE") {
            try {
                xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
                xmlDoc.async = "false";
                xmlDoc.loadXML(msg);
                var message = xmlDoc.getElementsByTagName("message")[0].childNodes[0].nodeValue;
                var code = xmlDoc.getElementsByTagName("code")[0].childNodes[0].nodeValue;

                return false;
            }
            catch (e) {
                return true;
            }
        }
        else {

            var code = $(msg).find('code').text();
            var message = $(msg).find('message').text();
            if (code == "500") {
                return false;
            }
            else {
                return true;
            }
        }
    }; 
 </script>

Answer 1

Update: Sorry, we use a custom wrapper. jQuery by default does not include the xmlHttpRequest in success. Below is another approach, this works without changing your view at all. You're basically just checking for the element with id='code' in the response, if it exists, display the error.

success: function(data, textStatus) {
  if ($("#code",data).length) { //See if the element <whatever id='code'> exists
    $("#DisplayError").html(data);
  } else {
    employeeId = 0;
    $(this).dialog('close');                               
  }
},

Here's the jQuery 1.4 Version (See changes here, note the Success callback receives XHR object as third argument):

First, set the StatusCode to 210 in your view context.HttpContext.Response.StatusCode = 210;, then use this callback format:

success: function(data, textStatus, xhr) {
  if (xhr.status == 210) {
    $("#DisplayError").html(data);
  } else {
    employeeId = 0;
    $(this).dialog('close');                               
  }
},