Ajax Results Div Hidden Until Result - ajax

Question

I have an Ajax form which is working properly:
<div class="row">
<div class="col-sm-8 col-sm-offset-2 alert alert-info" id="result"></div>
<div class="col-sm-8 col-sm-offset-2">
<h4>Contact Us</h4>
#using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "result" }))
{
#Html.LabelFor(a=>a.Email)
#Html.EditorFor(a => a.Email)
#Html.ValidationMessageFor(a => a.Email)
#Html.LabelFor(a=>a.Name)
#Html.EditorFor(a => a.Name)
#Html.ValidationMessageFor(a => a.Name)
#Html.LabelFor(a=>a.Phone)
#Html.EditorFor(a => a.Phone)
#Html.ValidationMessageFor(a => a.Phone)
#Html.LabelFor(a=>a.Message)
#Html.EditorFor(a => a.Message)
#Html.ValidationMessageFor(a => a.Message)
<input type="submit" class="btn btn-primary" value="Send Message" />
}
</div>
However, the results div, which I'd like to be styled as an alert, is always displaying by default. How can I make it display only when it has inner text? Is there something like #if(AjaxResult != null) { <div>...</div> }?
I suspect this can be solved within the View only, but I'm including my Controller code below for completeness:
[HttpPost]
public ActionResult Index(ContactUsViewModel model)
{
var fromAddress = new MailAddress("X", "X");
var toAddress = new MailAddress("X", "X");
string fromPassword = "X";
string subject = "GN Query";
string body = model.Message;
var smtp = new SmtpClient
{
Host = "smtp.gmail.com",
Port = 587,
EnableSsl = true,
DeliveryMethod = SmtpDeliveryMethod.Network,
UseDefaultCredentials = false,
Credentials = new NetworkCredential(fromAddress.Address, fromPassword)
};
using (var message = new MailMessage(fromAddress, toAddress)
{
Subject = subject,
Body = body
})
{
smtp.Send(message);
}
return Content("Your message has been received and we will respond within 24-48 hours.", "text/html");
}

Answer 1

You can create a partial view call _alert with your html:
<div class="col-sm-8 col-sm-offset-2 alert alert-info" id="result">
Your message has been received and we will respond within 24-48 hours.
</div>
and then in your view you can set a container div in which it will be rendered when ajax call completes:
<div id="messageContainer">
</div>
now your action should return that partial view and you can have a boolean in your view to decide either render or not:
#model System.Boolean
#if(Model)
{
<div class="col-sm-8 col-sm-offset-2 alert alert-info" id="result">
Your message has been received and we will respond within 24-48 hours.
</div>
}
your controller action will decide either the operation was successful and show the message or not:
bool isSuccess = true; // your logic to set this flag
............
............
{
smtp.Send(message);
}
return PartialView("_alert.cshtml",isSuccess );
and in main view you will have :
<div id="messageContainer">
</div>
#using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "messageContainer" }))
Hope it helps.