MVC (Razor) Helper Class (ValidationImage) not rendering/working? - image

Question

I am trying to use the following helper class
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Runtime.CompilerServices;
using System.Web.Mvc;
using System.Web.Routing;
namespace myNamespace
{
public static class ValidationHelper
{
public static MvcHtmlString ValidationImage(this HtmlHelper helper, string name)
{
if (helper.ViewData.ModelState[name] == null || helper.ViewData.ModelState[name].Errors == null || helper.ViewData.ModelState[name].Errors.Count == 0)
{
return MvcHtmlString.Empty;
}
var tag = new TagBuilder("img");
tag.Attributes.Add("src", "../Content/Images/check_bg_invalid.png");
tag.Attributes.Add("alt", helper.ViewData.ModelState[name].Errors[0].ErrorMessage);
tag.Attributes.Add("title", helper.ViewData.ModelState[name].Errors[0].ErrorMessage);
tag.Attributes.Add("class", HtmlHelper.ValidationMessageCssClassName);
return MvcHtmlString.Create(tag.ToString(TagRenderMode.SelfClosing));
}
}
}
And using this in a view:
#Html.ValidationImage("FirstName")
to try and get an image to fire when there is a validation error.
So I have my:
#Html.TextBox("FirstName", null, new { #class = "my_input" })
in the same view (all within the #Html.BeginForm)
This is my model.cs class:
public class QuoteModel
{
[Required(ErrorMessage = "You must specify a First Name.")]
public string First Name { get; set; }
}
And this is my controller.cs class:
public ActionResult Quote()
{
//return View();
var model = new QuoteModel();
return View(model);
}
[HttpPost]
public ActionResult Quote(QuoteModel model)
{
if (ModelState.IsValid)
{
try
{
}
catch (Exception)
{
return View(model);
}
}
return RedirectToAction("QuoteSuccess");
}
public ViewResult QuoteSuccess()
{
return View();
}
Bear in mind, I may have made a typo in all of the preceding code blocks.
Originally, I used
#Html.ValidationMessage("FirstName")
and the Error Message would fire after clicking send. I am trying to now use the above helper for ValidationImage, but nothing fires (and the Error Message doesn't show). Nor is anything output with an <img> tag. No errors are thrown on the page.
As an aside, I have two other questions:
1) I would also like to display a validation success message (i.e., a little image with "OK"), but am having trouble just getting above to work in the first instance.
2) I was previously unsuccessful (before using helper) to get client side validation to show.
Am using
#{ Html.EnableClientValidation(); }
in that same view. I placed it at the top (after #model). Does placement matter?
I also used the following in my _layout.cshtml
<script language="javascript" src="#Url.Javascript("jquery.validate.min")" type="text/javascript"></script>
<script language="javascript" src="#Url.Javascript("jquery.validate.unobtrusive.min")" type="text/javascript"></script>
Note that I use a helper, so no need for ".js" extension - this has worked in the past and shows up in view source. So no problems there.
Finally, I do have my web.config set up thusly:
<appSettings>
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>
Any thoughts on either of my problems (particularly the main one) are much appreciated.

Answer 1

It looks to me like your validation image will only be output in the page if the server-side validation fails. This means your client-side validation can't possibly show the image, as it won't exist in the HTML markup (return MvcHtmlString.Empty;)
If you want the validation to work client-side (and show the image), you might have to do some work to hook into the existing validation. There's an article here about custom validation:
http://www.codeproject.com/Articles/98376/Including-custom-client-side-validations-in-your-A.aspx
Though it might be a little overly complicated - there may be an easier way to hook into it (though I can't find one just now).