Message Control in Masterpage with ASP.NET MVC

Question

Hey everyone. Got a custom on how to do this as im new to MVC and trying to get a couple of small things implemented. This is the way I did it in WebForms but want to transition it to MVC.

I have a user control that contains CSS which will render a message. This control is located in the MasterPage and called from a ASPX page like this:

Pseudo code:

try{
    Msg.MessageMode = WebPageMessageMode.OK;
    Msg.ShowOK("Report deleted.");
}
catch
{
 Msg.MessageMode = WebPageMessageMode.ErrorMessage;
 Msg.ShowError("There was a problem deleting the report.");
}

Masterpage.aspx
 <cc1:WebPageMessage runat="server" ID="msg" />

I currently have the control in the MasterPage and now im a bit confused about proceeding from here.

Should I put the 'Msg' object above from the pseudo code to a View from the MasterPage?

What is the proper way to do something like?

Answer 1

In a controller, as part of the action, you can set a message like this:

public ActionResult MyAction()
{
    // Do some stuff

    TempData["message"] = "This is a message.";
    return View("MyView");
}

In your master page or in your view:

<%
     string text = TempData["Message"] as string;    
     Response.Write(text);
%>

Answer 2

I dont think there is a one-solution-fits-all here.

Anyway this is my solution that uses jQuery:

1) Create a MyResultModel class to handle a message to the user

public enum MyResultType { Info, Error }

public class MyResultModel
{
    public MyResultModel( MyResultType type, string message ) {
        switch ( type ) {
            case MyResultType.Info: Title = "OK"; break;
            case MyResultType.Error: Title = "Error!!!"; break;
        }
        Message = message;
    }
    public String Title { get; set; }
    public String Message { get; set; }
}

2) Create a Partial View named MyResult in the Shared Folder to handle the model

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<MyResultModel>" %>

<div id="resultTitle"><%: Model.Title %></div>
<div id="resultMessage"><%: Model.Message %></div>

3) Create and use a BaseController for your controllers and add the following method to it. The method simply add a custom Http Header to the response

protected PartialViewResult PartialView( string viewName, object model, string resultHeader ) {
    Response.AppendHeader( "MyHttpCustomHeader", resultHeader );
    return base.PartialView( viewName, model );
}

4) In your action return a MyResultView when you've done

[HttpPost]
public virtual ActionResult DoSomething() {
    try {
        //Do Something
        return PartialView( "MyResult", 
                            new MyResultModel( MyResultType.Info, "Operation Completed" ),
                            "HttpResultInfo" );
    }
    catch ( Exception ex ) {
        return PartialView( "MyResult",
                            new MyResultModel( MyResultType.Error, ex.Message ),
                            "HttpResultError" );
    }
}

5) Finally, Submit the form using jquery and handle the results.

$.ajax({
    type: "post",
    dataType: "html",
    url: "your/url/here",
    data: $("#myform").serialize(),
    success: function (response, status, xml) {
        var resultType = xml.getResponseHeader("MyHttpCustomHeader");
        if (resultType == null) {
            //No message do whatever you need
        }
        else {
            //response contain your HTML partial view here. Choose your 
            //desidered way to display it
        }
    }
});

With a scenario like this you dont need to place a control on the master page. You can:

• Show the view as it comes from the action without any modification
• Use some fancy message display technique as StackOverflow does with the orange sliding message (in this case simply extract the title and the message from the returned html)
• Use some fancy jquery plugin as jGrowl to show your message

If you want to check wether it is an Info/Error message simply check the custom header with jQuery in the else branch

var title = $(response).filter("#resultTitle").text();
var message = $(response).filter("#resultMessage").text();
if (resultType == "HttpResultInfo") {
    showInfoMessage(title, message);
}
else if (resultType == "HttpResultError") {
    showErrorMessage(title, message);
}

Hope it helps!