User control in MVC4 for showing Suceess and Error Message

/*paste Code on view where you want to display Message Generally I prefer it on top of the View */

<div id="messageTable">
@if (Session["errorMessage"] != null)
{
<table>
<tr>
<td class="errorMessage">
<span class="errorIcon"></span>@Session["errorMessage"]
<span class="closeIcon" onclick="javascript:HideMessage();"></span>
</td>
</tr>
</table>

Session["errorMessage"] = null;
}
@if (Session["successMessage"] != null)
{
<table id="mmessageTable">
<tr>
<td class="successMessage">
<span class="successIcon"></span>
@Session["successMessage"]
<span class="closeIcon" onclick="javascript:HideMessage();"></span>
</td>
</tr>
</table>

Session["successMessage"] = null;
}
</div>

/*Set Session["successMessage"] and Session["errorMessage"] anywhere in the your application that will displayed when view get loaded  */

/* CSS for Above user control */

<style>

.validationFiled
{
font-weight: 500;
font-size: small;
font-family: Arial, Helvetica, sans-serif;
background-color: #F4F1D7;
color: #FF5050;
}

.Error-Heading
{
color: Red;
}

.errorIcon
{
position: relative;
float: left;
height: 35px;
width: 35px;
margin-left: 0px;
display: inline-block;
background-repeat: no-repeat;
background-image: url('../../Content/Images/Error.png');
}

.closeIcon
{
position: relative;
float: right;
height: 40px;
width: 40px;
display: inline-block;
background-repeat: no-repeat;
background-image: url('../../Content/Images/Close.png');
}
.successIcon
{
position: relative;
float: left;
height: 30px;
width: 30px;
margin-left: 0px;
display: inline-block;
background: url('../../Content/Images/Success.png');
background-repeat: no-repeat;
}

.successMessage
{
color: #446C17;
background-color: #DCF2C4;
border: 1px solid #ACE072;
padding-left: 30px;
padding-top: 3px;
margin: 5px 0px 10px 0px;
font-size: 16px;
width: 2000px;
font-weight: bold;
height: 22px;
padding-right: 30px;
}

.errorMessage
{
color: #E63313;
background-color: #F8DAC7;
border: 1px solid #EF866B;
padding-left: 30px;
padding-top: 3px;
margin: 5px 0px 10px 0px;
font-size: 16px;
height: 22px;
font-weight: bold;
width: 2000px;
padding-right: 30px;
}

</style>

/* Use following script to close the message box when you click on  close button (cross icon)*/

<script type="text/javascript">

function HideMessage() {
    $('#messageTable').hide("blind",
          { times: 3 }, 300);
}

</script>