To expand on the link to [Scott Guthrie's article][5], starting with MVC 3, you can perform class level validation by implementing the [`IValidatableObject`][1] Interface.  

This will work inside the context of the current validation pipeline so it can be nested on as many custom classes and properties as you like and continue to return the full array of possible error messages.

For your class, ditch the class level attributes, and add a method called `Validate` like this:

    public class EditSiteUser : IValidatableObject
    {
        public int UserId { get; set; }

        [Required(ErrorMessage = "Du skal indtaste et brugernavn")]
        public string Username { get; set; }
    
        [Required(ErrorMessage = "Du skal indtaste en adgangskode")]
        public string Password { get; set; }

        [Required(ErrorMessage="Du skal bekræfte adgangskode")]
        public string PasswordConfirm { get; set; }
    
        [Required(ErrorMessage = "Du skal indtaste en e-mailadresse")]
        [Email(ErrorMessage = "Ugyldig e-mailadresse")]
        public string Email { get; set; }

        [Required(ErrorMessage="Du skal bekræfte e-mailadressen")]
        [Email(ErrorMessage="Ugyldig e-mailadresse")]
        public string EmailConfirm { get; set; }

    
        public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
        { 
          // put whatever class level validation you want here

          if (Email !== EmailConfirm)
          {
              yield return new ValidationResult("E-mailadresserne skal være ens", new[] {"EmailConfirm"})
          }

          if (Password !== PasswordConfirm)
          {
              yield return new ValidationResult("Adgangskoderne skal være ens", new[] {"PasswordConfirm"})
          }
        }

    }


You can continue to `yield return` as many validation messages as you'd like.

And you can display them all on the client with [`@Html.ValidationSummary`][3]

If you'd like the message to appear alongside a particular control, the [`ValidationResult`][2] constructor takes an overload with the `memberNames` of the affected properties, and you can provide the validation message for that particular property with the [`ValidationMessageFor`][4] HTML helper like this:

    @Html.ValidationMessageFor(Function(model) model.TestOne )

----

Also, it's worth mentioning that you can use the [**`CompareValidator`**][7] to easily ensure the values of two different properties are equal.  The upside to using this annotation is that it automatically knows how to enforce this on the client as well as the server, whereas adding `IValidatableObject` will only run on the server.

    [DataType(DataType.Password)]
    public string Password { get; set; }
 
    [Compare("Password")]
    [DataType(DataType.Password)]
    public string ConfirmPassword { get; set; }

---

For further reading, Scott Guthrie another post with more detail on [class level validation][6].

 
[1]: https://msdn.microsoft.com/en-us/library/system.componentmodel.dataannotations.ivalidatableobject%28v=vs.110%29.aspx
[2]: https://msdn.microsoft.com/en-us/library/dd411880(v=vs.110).aspx
[3]: https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.validationsummary%28v=vs.110%29.aspx
[4]: https://msdn.microsoft.com/en-us/library/system.web.mvc.html.validationextensions.validationmessagefor%28v=vs.118%29.aspx
[5]: http://weblogs.asp.net/scottgu/introducing-asp-net-mvc-3-preview-1
[6]: http://weblogs.asp.net/scottgu/class-level-model-validation-with-ef-code-first-and-asp-net-mvc-3
[7]: https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.comparevalidator(v=vs.110).aspx

**Update after Bounty was awarded**

A new solution is coming up to this problem. Please refer to ASP.NET MVC 3 Preview 1 here: http://weblogs.asp.net/scottgu/archive/2010/07/27/introducing-asp-net-mvc-3-preview-1.aspx

Look in the section **Model Validation Improvements**, where you will see the solution to my problem.


----------

**Original Post**

Referring to my earlier post https://stackoverflow.com/questions/2450198/how-to-validate-two-properties-with-asp-net-mvc-2 where I asked how I could compare two properties for Model validation.

I did find the answer useful, but I was left with an entirely different problem:

**Problem**: If a Property-level ValidationAttribute contains an error, then the Class-level ValidationAttributes are NOT validated.

Please consider the following:

    [EqualTo("Email", "EmailConfirm", ErrorMessage = "E-mailadresserne skal være ens")]
    [EqualTo("Password", "PasswordConfirm", ErrorMessage = "Adgangskoderne skal være ens")]
    [Bind(Exclude="UserId")]
    public class EditSiteUser
    {
        [Required(ErrorMessage="Du skal bekræfte adgangskode")]
        public string PasswordConfirm { get; set; }

        [Required(ErrorMessage="Du skal bekræfte e-mailadressen")]
        [Email(ErrorMessage="Ugyldig e-mailadresse")]
        public string EmailConfirm { get; set; }
        public int UserId { get; set; }

        [Required(ErrorMessage = "Du skal indtaste et brugernavn")]
        public string Username { get; set; }

        [Required(ErrorMessage = "Du skal indtaste en adgangskode")]
        public string Password { get; set; }

        [Required(ErrorMessage = "Du skal indtaste en e-mailadresse")]
        [Email(ErrorMessage = "Ugyldig e-mailadresse")]
        public string Email { get; set; }
    }

Here I have two Class-level attibutes that validate EmailConfirm and PasswordConfirm.

If a field like Username is empty, and thus yields an error, then the two EqualTo Attributes are never validated.

Does anyone have a suggestion to overcome this problem?

EDIT: If you need anymore information about this problem, please ask in comments and I will be very happy to give you any additional information you need.

Questions:
-------------------
Q: "Why is it important that the class-level checks get validated if a property-level check fails?".

A: "Because this is part of a form, where a user enters information into a form that posts back via AJAX. When the form returns it should show all current problems."

Q: "What exactly is the EqualTo attribute you have placed on the class? Is it a custom validation attribute? If so, how does it work? what does it do?"

A: EqualTo is a class-level ValidationAttribute that compares the value of two Properties of the class-instance. Look up "PropertiesMustMatchAttribute" for a similar implementation.

Property-level validation errors hinder the validation of Class-level validation

You can enable eager evaluation by using [`setDefaults()`][1] to override the [`onfocusout`][2] property with a function that always evaluates the blurred element by calling the [`valid()`][3] method.



    // enable eager evaluation
    $.validator.setDefaults({
        onfocusout: function (element) {
            $(element).valid();
        }
    })


**Demo With Eager Evaluation**:   
<sup>(Will show required after tab out)</sup>





    // enable eager evaluation
    $.validator.setDefaults({
      onfocusout: function (element) {
        $(element).valid();
      }
    });

    $("form").validate();



    input.error {
      border-color: red
    }



    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>

    <form >
      <input type="text" name="Name" required /><br/>
      <input type="text" name="Email" required /><br/>
      <input type="submit" value="Submit"/>
    </form>



**Normal Demo**   
<sup>(Won't show required until submit)</sup>





    $("form").validate();



    input.error {
      border-color: red
    }



    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>

    <form >
      <input type="text" name="Name" required /><br/>
      <input type="text" name="Email" required /><br/>
      <input type="submit" value="Submit"/>
    </form>




[1]: http://jqueryvalidation.org/jQuery.validator.setDefaults
[2]: http://jqueryvalidation.org/validate#onfocusout
[3]: http://jqueryvalidation.org/valid

How do I call the validation when the textbox looses focus? Eg.

    @using (Html.BeginForm()) {
        @Html.ValidationSummary(true)

        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>
    }

    public class RegisterViewModel
    {
        [Required]
        [StringLength(5)]
        public string Name { get; set; }
    }

Also, How can I check if the name exist already by calling an action?

ASP.NET MVC 3 validation on blur

You can create a new `Layout` page and wrap the PartialView inside of a Full View that is responsible for rendering the contents and also any library sections.

For example, let's say I have the following code:

**`HomeController.cs`**



    [HttpGet]
    public ActionResult About()
    {
        var vm = new AboutViewModel();
        return View("About", vm);
    }

When the Full Page view is rendered, it's typically renderedby merging two files:

**`About.cshtml`**



    @model AboutViewModel
    
    @{
        ViewBag.Title = "About CSHN";
    }
    
    <h3>@ViewBag.Title</h3>
    
    @section Styles {
        <style> /* style info here */ </style>
    }
    
    @section Scripts {
        <script> /* script info here */ </script>
    }


**`_Layout.cshtml`** <sup>(or whatever is specified in _ViewStart or overridden in the page)</sup>



    <!DOCTYPE html>
    
    <html>
    <head>
        @RenderSection("Styles", false)
        <title>@ViewBag.Title</title>
    </head>
    <body>
        @RenderBody()
    
        @RenderSection("scripts", false)
    </body>
    </html>

-----

**Now**, suppose you wanted to Render **`About.cshtml`** as a **Partial View**, perhaps as modal window in response to AJAX call. The goal here being to return only the content specified in the about page, scripts and all, without all the bloat included in the `_Layout.cshtml` master layout (like a full `<html>` document).

You might try it like this, but it won't come with any of the section blocks:



   

    return PartialView("About", vm);

Instead, add a simpler layout page like this:

**`_PartialLayout.cshtml`**

  

    <div>
        @RenderBody()
        @RenderSection("Styles", false)
        @RenderSection("scripts", false)
    </div>

Or to support a modal window like this: 

**`_ModalLayout.cshtml`**

  

    <div class="modal modal-page fade" tabindex="-1" role="dialog" >
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
    
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">@ViewBag.Title</h4>
                </div>
    
                <div class="modal-body">

                    @RenderBody()
                    @RenderSection("Styles", false)
                    @RenderSection("scripts", false)
    
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-inverse" data-dismiss="modal">Dismiss</button>
                </div>
            </div>
        </div>
    </div>

Then you can [specify a custom Master View][1] in this controller or any other handler that you want to render the contents and scripts of a view simultaneously

    

    [HttpGet]
    public ActionResult About()
    {
        var vm = new AboutViewModel();
        return !Request.IsAjaxRequest()
                  ? View("About", vm)
                  : View("About", "~/Views/Shared/_ModalLayout.cshtml", vm);
    }




[1]: https://stackoverflow.com/a/5161384/1366033

My main motivation for trying to do this is to get Javascript that is only required by a partial at the bottom of the page with the rest of the Javascript and not in the middle of the page where the partial is rendered. 

Here's a simplified example of what I'm trying to do:

Here is the layout with a Scripts section right before the body.

    <!DOCTYPE html>
    <html>
    <head>
        <title>@ViewBag.Title</title>
        <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />    
    </head>
    
    <body>
        @RenderBody()
        <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
        @RenderSection("Scripts", false)
    </body>
    </html>

Here's an example view using this layout. 

    <h2>This is the view</h2>
    
    @{Html.RenderPartial("_Partial");}
    
    @section Scripts {
    <script type="text/javascript">
            alert("I'm a view.");
    </script>
    }

And here's the partial being rendered from the view.

    <p>This is the partial.</p>
    
    @* this never makes it into the rendered page *@
    @section Scripts {
    <script type="text/javascript">
        alert("I'm a partial."); 
    </script>
    }

In this example, the markup specified in the view is placed into the section, but the markup from the partial is not. Is it possible to populate a section from a partial view with Razor? If not, what are some other methods of getting Javascript that's only needed by partials at the bottom of the page without including it globally?

Populate a Razor Section From a Partial

## The Problem 

Validation Attributes have two environments they can validate against:

1. Server
2. Client

### Server Validation - Multiple Attributes Easy
If you have any attribute with:



<pre><code>[AttributeUsage(AttributeTargets.Property, <b>AllowMultiple = true</b>)]
public class RequiredIfAttribute : <b>ValidationAttribute</b></code></pre>

And have put it on your class property like this:

<pre><code>public class Client
{
    public short ResidesWithCd { get; set; };

    <b>[RequiredIf(nameof(ResidesWithCd), new[] { 99 }, "Resides with other is required.")]</b>
    public string ResidesWithOther { get; set; }
}</code></pre>


Then anytime the **Server** goes to [validate an object][1] (ex. `ModelState.IsValid`), it will check every [`ValidationAttribute`][2] on each property and call [`.IsValid()`][3] to determine validity.  This will work fine, even if <code><a href="https://msdn.microsoft.com/en-us/library/System.AttributeUsageAttribute" title="System.AttributeUsageAttribute">AttributeUsage</a>.<a href="https://msdn.microsoft.com/en-us/library/System.AttributeUsageAttribute.AllowMultiple" title="System.AttributeUsageAttribute.AllowMultiple">AllowMultiple</a></code>  is set to true.

### Client Validation - HTML Attribute Bottleneck

If you enable client side by implementing [`IClientValidatable`][4] like this:



<pre><code>public IEnumerable&lt;ModelClientValidationRule&gt; GetClientValidationRules(ModelMetadata metadata, ControllerContext context)    
{
    var modelClientValidationRule = new ModelClientValidationRule
    {
        ValidationType = <b>"requiredif"</b>,
        ErrorMessage = ErrorMessageString
    };
    modelClientValidationRule.ValidationParameters.Add(<b>"target"</b>, prop.PropName);
    modelClientValidationRule.ValidationParameters.Add(<b>"values"</b>, prop.CompValues);

    return new List&lt;ModelClientValidationRule&gt; { modelClientValidationRule };
}
</code></pre>

Then ASP.NET will emit the following HTML when generated:  

<sup>(As long as <code><a href="https://msdn.microsoft.com/en-us/library/System.Web.Mvc.ViewContext.ClientValidationEnabled" title="System.Web.Mvc.ViewContext.ClientValidationEnabled">ClientValidationEnabled</a></code> &
<code><a href="https://msdn.microsoft.com/en-us/library/System.Web.Mvc.ViewContext.UnobtrusiveJavaScriptEnabled" title="System.Web.Mvc.ViewContext.UnobtrusiveJavaScriptEnabled">UnobtrusiveJavaScriptEnabled</a></code> are enabled)</sup>



<pre><code>&lt;input class="form-control" type="text" value=""
       id="Client_CommunicationModificationDescription" 
       name="Client.CommunicationModificationDescription" 
       <i><b>data-val="true"</b>
       <b>data-val-requiredif</b>="Communication Modification Description is required."
       <b>data-val-requiredif-target</b>="CommunicationModificationCd"
       <b>data-val-requiredif-values</b>="99" &gt;</i>
</code></pre>

Data Attributes are the only vehicle we have for dumping rules into the client side validation engine which will search for any attributes on the page via a built in or custom **adapter**. And once part of the set of client side rules, it'll be able to determine the validity of each parsed rule with a built in or custom **method**.

So we can call jQuery Validate Unobtrusive to look for and parse these attributes by **adding a custom adapter** which will add a validation rule to the engine:

<pre><code>// hook up to client side validation
$.validator.unobtrusive.adapters.add(<b>'requiredif'</b>, [<b>'target'</b>, <b>'values'</b>], function (options) {
    options.rules[<b>"requiredif"</b>] = {
        id: '#' + options.params.<b>target</b>,
        values: JSON.parse(options.params.<b>values</b>)
    };
    options.messages['requiredif'] = options.<b>message</b>;
});
</code></pre>


We can then tell that rule how function and determine validity by adding a custom method like this which will add a custom way to evaluate `requiredif` rules (as opposed to date rules or regex rules) which will rely on the parameters we loaded earlier through the adapter:

<pre><code>// test validity
$.validator.addMethod(<b>'requiredif'</b>, function (value, element, params) {
    var targetHasCondValue = targetElHasValue(params.id, params.value);
    var requiredAndNoValue = targetHasCondValue && !value; // true -> :(
    var passesValidation = !requiredAndNoValue;            // true -> :)
    return passesValidation;
}, '');
</code></pre>

Which all operates like this:

[![IClientValidatable][5]][5]


# Solution

So, what have we learned?  Well, if we want the same rule to appear multiple times on the same element, the adapter would have to see the exact set of rules multiple times per element, with no way to differentiate between each instance within multiple sets.  Further, ASP.NET won't render the same attribute name multiple times since it's not valid html.

So, we either need to:

1. Collapse all the client side rules into a single *mega* attribute with all the info
2. Rename attributes with each instance number and then find a way to parse them in sets.

I'll explore **Option One** (emitting a single client side attribute), which you could do a couple ways:

1. Create a single Attribute that takes in multiple elements to validate on the server client
2. Keep multiple distinct server side attributes and then merge all attributes via reflection before emitting to the client

In either case you will have to re-write the client side logic (adapter/method) to take an array of values, instead of a single value at a time.

To we'll build/transmit a JSON serialized object that looks like this:



    var props = [
      {
        PropName: "RoleCd",
        CompValues: ["2","3","4","5"]
      },
      {
        PropName: "IsPatient",
        CompValues: ["true"]
      }
    ]


### `Scripts/ValidateRequiredIfAny.js`

Here's how we'll handle that in client side adapter / method:



    // hook up to client side validation
    $.validator.unobtrusive.adapters.add("requiredifany", ["props"], function (options) {
        options.rules["requiredifany"] = { props: options.params.props };
        options.messages["requiredifany"] = options.message;
    });
    
    // test validity
    $.validator.addMethod("requiredifany", function (value, element, params) {
        var reqIfProps = JSON.parse(params.props);
        var anytargetHasValue = false;
    
        $.each(reqIfProps, function (index, item) {
            var targetSel = "#" + buildTargetId(element, item.PropName);
            var $targetEl = $(targetSel);
            var targetHasValue = elHasValue($targetEl, item.CompValues);
           
            if (targetHasValue) {
                anytargetHasValue = true;
                return ;
            }
        });
    
        var valueRequired = anytargetHasValue;
        var requiredAndNoValue = valueRequired && !value; // true -> :(
        var passesValidation = !requiredAndNoValue;       // true -> :)
        return passesValidation;
    
    }, "");

    // UTILITY METHODS

    function buildTargetId(currentElement, targetPropName) {
        // https://stackoverflow.com/a/39725539/1366033
        // we are only provided the name of the target property
        // we need to build it's ID in the DOM based on a couple assumptions
        // derive the stacking context and depth based on the current element's ID/name
        // append the target property's name to that context
    
                                                    // currentElement.name i.e. Details[0].DosesRequested
        var curId = currentElement.id;              // get full id         i.e. Details_0__DosesRequested
        var context = curId.replace(/[^_]+$/, "");  // remove last prop    i.e. Details_0__
        var targetId = context + targetPropName;    // build target ID     i.e. Details_0__OrderIncrement
    
        // fail noisily
        if ($("#" + targetId).length === 0)
            console.error(
                "Could not find id '" + targetId +
                "' when looking for '" + targetPropName +
                "'  on originating element '" + curId + "'");
    
        return targetId;
    }

    function elHasValue($el, values) {
        var isCheckBox = $el.is(":checkbox,:radio");
        var isChecked = $el.is(":checked");
        var inputValue = $el.val();
        var valueInArray = $.inArray(String(inputValue), values) > -1;
    
        var hasValue = (!isCheckBox || isChecked) && valueInArray;
    
        return hasValue;
    };

### `Models/RequiredIfAttribute.cs`

On the server side, we'll validate attributes like normal, but when we got to build the client side attributes, we'll look for all attributes and build one mega attribute



    using System.ComponentModel.DataAnnotations;
    using System.Linq;
    using System.Reflection;
    using System.Web.Helpers;
    using System.Web.Mvc;

    [AttributeUsage(AttributeTargets.Property, AllowMultiple = true)]
    public class RequiredIfAttribute : ValidationAttribute, IClientValidatable
    {

        public PropertyNameValues TargetProp { get; set; }

        public RequiredIfAttribute(string compPropName, string[] compPropValues, string msg) : base(msg)
        {
            this.TargetProp = new PropertyNameValues()
            {
                PropName = compPropName,
                CompValues = compPropValues
            };
        }
        protected override ValidationResult IsValid(object value, ValidationContext validationContext)
        {
            PropertyInfo compareProp = validationContext.ObjectType.GetProperty(TargetProp.PropName);
            var compPropVal = compareProp.GetValue(validationContext.ObjectInstance, null);
            string compPropValAsString = compPropVal?.ToString().ToLower() ?? "";
            var matches = TargetProp.CompValues.Where(v => v == compPropValAsString);
            bool needsValue = matches.Any();

            if (needsValue)
            {
                if (value == null || value.ToString() == "" || value.ToString() == "0")
                {
                    return new ValidationResult(FormatErrorMessage(null));
                }
            }

            return ValidationResult.Success;
        }


        public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
        {
            // at this point, who cares that we're on this particular instance - find all instances
            PropertyInfo curProp = metadata.ContainerType.GetProperty(metadata.PropertyName);
            RequiredIfAttribute[] allReqIfAttr = curProp.GetCustomAttributes<RequiredIfAttribute>().ToArray();

            // emit validation attributes from all simultaneously, otherwise each will overwrite the last
            PropertyNameValues[] allReqIfInfo = allReqIfAttr.Select(x => x.TargetProp).ToArray();
            string allReqJson = Json.Encode(allReqIfInfo);

            var modelClientValidationRule = new ModelClientValidationRule
            {
                ValidationType = "requiredifany",
                ErrorMessage = ErrorMessageString
            };

            // add name for jQuery parameters for the adapter, must be LOWERCASE!
            modelClientValidationRule.ValidationParameters.Add("props", allReqJson);

            return new List<ModelClientValidationRule> { modelClientValidationRule };
        }
    }

    public class PropertyNameValues
    {
        public string PropName { get; set; }
        public string[] CompValues { get; set; }
    }


Then we can bind that to our model by applying multiple attributes simultaneously:



    [RequiredIf(nameof(RelationshipCd), new[] { 1,2,3,4,5 }, "Mailing Address is required.")]
    [RequiredIf(nameof(IsPatient), new[] { "true" },"Mailing Address is required.")]
    public string MailingAddressLine1 { get; set; }

**Further Reading**

* [ASP.NET MVC custom multiple fields validation][6] by [Stephen Muecke][7]
* [Unobtrusive Client Validation in ASP.NET MVC 3][8] by [Brad Wilson][9]



[1]: https://stackoverflow.com/a/28433753/1366033
[2]: https://msdn.microsoft.com/en-us/library/System.ComponentModel.DataAnnotations.ValidationAttribute "System.ComponentModel.DataAnnotations.ValidationAttribute"
[3]: https://msdn.microsoft.com/en-us/library/System.ComponentModel.DataAnnotations.ValidationAttribute.IsValid "System.ComponentModel.DataAnnotations.ValidationAttribute.IsValid"
[4]: https://msdn.microsoft.com/en-us/library/System.Web.Mvc.IClientValidatable "System.Web.Mvc.IClientValidatable"
[5]: https://i.stack.imgur.com/ctjB0.png
[6]: https://stackoverflow.com/a/42036235/1366033
[7]: https://stackoverflow.com/users/3559349/stephen-muecke
[8]: http://bradwilson.typepad.com/blog/2010/10/mvc3-unobtrusive-validation.html
[9]: https://stackoverflow.com/users/1554/brad-wilson

[99a]: https://msdn.microsoft.com/en-us/library/System.AttributeUsageAttribute "System.AttributeUsageAttribute"
[99b]: https://msdn.microsoft.com/en-us/library/System.AttributeUsageAttribute.AllowMultiple "System.AttributeUsageAttribute.AllowMultiple"
[99c]: https://msdn.microsoft.com/en-us/library/System.Web.Mvc.ViewContext.ClientValidationEnabled "System.Web.Mvc.ViewContext.ClientValidationEnabled"
[99d]: https://msdn.microsoft.com/en-us/library/System.Web.Mvc.ViewContext.UnobtrusiveJavaScriptEnabled "System.Web.Mvc.ViewContext.UnobtrusiveJavaScriptEnabled"

How can I use Same Custom Validation Attribute Multiple Times on Same Field or simply enable AllowMultiple=true, for both server side and client side validation??

I have a following Custom Validation Attribute:

    [AttributeUsage(AttributeTargets.Field | AttributeTargets.Property, 
            AllowMultiple = true, Inherited = true)]
    public class RequiredIfAttribute : ValidationAttribute,IClientValidatable
    {
        public RequiredIfAttribute(string dependentProperties, 
         string dependentValues = "",
         string requiredValue = "val")
         {
         }
    }

Where in dependentProperties I can specify multiple dependant properties seperated by comma, in dependentValues I can specify for which values of dependant properties validation should process and finally in requiredValue I can specify expected value for the field to be validated.

In my model there are two properties LandMark, PinCode and I want to use validation as follows:

    public string LandMark { get; set; }
    [RequiredIf("LandMark","XYZ","500500")]
    [RequiredIf("LandMark", "ABC", "500505")]
    public string PinCode { get; set; }

The values here are just for example, as per it seems I can add the attribute multiple times and don't get any compile error, I have implemented TypeID in attribute and it works well from serverside if I remove client validation from it. But when I am implementing IClientValidatable on the attribute, it gives me an error:

"Validation type names in unobtrusive client validation rules must be unique."

Any help how can I solve it??


Custom Validation Attribute Multiple Times on same field

**Note**: The accepted solution **won't work** *for partial views* as the question asks for.  

### The Problem

In the normal flow, you can define the contents for a particular section from inside of the parent view on your ActionResult using a <code>@section <i>SectionName</i> {}</code> declaration.  And when that view is finally inserted into its LayoutPage, it can call [`RenderSection`][7] to place those contents anywhere within the page, allowing you to define some inline JavaScript that can be rendered and parsed at the bottom of the page after any core libraries that it depends on like this:

[![Layout > Full View][3]][3]

The problem arises when you want to be able to reuse the full page view inside of a partial view.  Perhaps you'd like to also re-use the view as a widget or dialog from inside of another page.  In which case, the full Partial View is rendered in its entirety wherever you've placed the call to [`@Html.EditorFor`][5] or [`@Html.Partial`][6] inside of the Parent View like this:

[![Layout > Parent View > Partial View][4]][4]

According to the [MSDN Docs on Layouts with Razor Syntax][8]:

> * Sections defined in a view are available only in its immediate layout page.  
> * Sections cannot be referenced from partials, view components, or other parts of the view system.  
> * The body and all sections in a content page must all be rendered by the layout page

In that scenario, it becomes tricky to get the script defined into the partial view to the bottom of the page.  Per the docs, you can only call `RenderSection` from the layout view and you cannot define the `@section` contents from inside of a partial view, so everything gets lumped into the same area and your script will be rendered, parsed, and run from the middle of your HTML page, instead of at the bottom, after any libraries it might depend on.

### The Solution

For a full discussion of the many ways to inject sections from partial views into your page, I'd start with the following two questions on StackOverflow:

* [Injecting content into specific sections from a partial view with Razor View Engine][1]
* [Using sections in Editor/Display templates][2]

The varying solutions therein differ on support for nesting, ordering, multiple script support, different content types, calling syntax, and reusability. But however you slice it, pretty much any solution will have to accomplish two basic tasks:

1. Gradually build script objects onto your request from within any page, partial view, or template, probably leveraging some kind of HtmlHelper extension for reusability. 
2. Render that script object onto your layout page.  Since the layout page actually renders last, this is simply emitting the object we've been building onto the master page.

---

**Here's [a simple implementation][9] by [Darin Dimitrov][10]**


Add the Helper Extension Methods which will allow you to build arbitrary script objects into the `ViewContent.HttpContext.Items` collection and subsequently fetch and render them later.

**Utilities.cs**



    public static class HtmlExtensions
    {
        public static MvcHtmlString Script(this HtmlHelper htmlHelper, Func<object, HelperResult> template)
        {
            htmlHelper.ViewContext.HttpContext.Items["_script_" + Guid.NewGuid()] = template;
            return MvcHtmlString.Empty;
        }
    
        public static IHtmlString RenderScripts(this HtmlHelper htmlHelper)
        {
            foreach (object key in htmlHelper.ViewContext.HttpContext.Items.Keys)
            {
                if (key.ToString().StartsWith("_script_"))
                {
                    var template = htmlHelper.ViewContext.HttpContext.Items[key] as Func<object, HelperResult>;
                    if (template != null)
                    {
                        htmlHelper.ViewContext.Writer.Write(template(null));
                    }
                }
            }
            return MvcHtmlString.Empty;
        }
    }

Then you can use like this within your application

Build this script objects like this inside of your **Partial View** like this: 



<pre><code><b>@Html.Script(</b>
    <i>@&lt;script&gt;
         $(function() {
             $("#@Html.IdFor(model =&gt; model.FirstName)").change(function() {
                 alert("New value is '" + this.value + "'");
             });
         })
     &lt;/script&gt;</i>
<b>)</b>
</code></pre>

And then render them anywhere within your **LayoutPage** like this:



<pre><code>@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
<b>@Html.RenderScripts()</b>
</code></pre>

[1]: https://stackoverflow.com/q/7556400/1366033
[2]: https://stackoverflow.com/q/5433531/1366033
[3]: https://i.stack.imgur.com/lpI98.png
[4]: https://i.stack.imgur.com/2VL43.png
[5]: https://msdn.microsoft.com/en-us/library/System.Web.Mvc.Html.EditorExtensions.EditorFor "System.Web.Mvc.Html.EditorExtensions.EditorFor"
[6]: https://msdn.microsoft.com/en-us/library/System.Web.Mvc.Html.PartialExtensions.Partial "System.Web.Mvc.Html.PartialExtensions.Partial"
[7]: https://msdn.microsoft.com/en-us/library/System.Web.Mvc.WebViewPage.RenderSection "System.Web.Mvc.WebViewPage.RenderSection"
[8]: https://learn.microsoft.com/en-us/aspnet/core/mvc/views/layout#sections
[9]: https://stackoverflow.com/a/5433722/1366033
[10]: https://stackoverflow.com/users/29407/darin-dimitrov

Let's say I have a javascript slide-show in a partial view...

**_Slideshow.cshtml:**

    @{
        ViewBag.Title = "Slide Show";
    }
    <div id="slides">
    </div>
    <script src="js/slides.min.jquery.js"></script>
    <script type="text/javascript">
    $(function(){
        $('#slides').slides({
            // slide show configuration...
        });
    });
    </script>

But I want to be a good little web developer, and make sure all of my scripts go at the bottom of the page. So I'll make my *_Layout.cshtml* page look like this:

**_Layout.cshtml:**

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title</title>
        <link href="@Url.Content("~/css/global.css")" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="wrapper">
        @RenderBody
        </div>
        
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
    </body>
    </html>

But UH OH! What do I do now, because my slide show script ends up above my jQuery inclusion?! It wouldn't be a big deal if I wanted my slide show on every page, but I only want the slide show partial view to be rendered on a certain page, and.... I WANT MY SCRIPTS AT THE BOTTOM! What to do?

Including JavaScript at bottom of page, from Partial Views

For **multi-line support**, as pointed out in [Using in Razor VB.net MVC not work as expected](https://stackoverflow.com/q/16414271/1366033), you can use `@<text>...</text>` to switch back to "text mode" and output html like this:



    @Using Html.BeginForm("Action", "Controller")
        @<text>
          <fieldset>
            * Other form code and values *
          </fieldset>
        </text>
    End Using

related: https://stackoverflow.com/questions/4990717/mvc3-razor-using-html-beginform-problem

When I make an HTML form for MVC 3/VB with the Razor engine, I would expect to be able to do it like this:

    @Using Html.BeginForm("Action", "Controller")
        <fieldset>
            @* Other form code and values *@
        </fieldset>
    End Using

But if I do that I get "BC32035: Attribute specifier is not a complete statement. Use a line continuation to apply the attribute to the following statement."  I need to add an @ character before the opening <fieldset> tag to avoid this error.  Can someone explain why?

Why does normal markup inside an @Using Html.BeginForm need an @?

Because of the way the model binder works in ASP.NET MVC, there are a lot of scenarios where it's helpful to postback the index of each value in a list. 

So I prefer to use an **indexed for loop** (over the simplicity of a strongly typed **for each loop**):



    @For i = 0 To Model.Articles.Count - 1
        Dim curItem = Model.Articles(i)
        @Html.EditorFor(Function(model) curItem)
    Next

**Further Reading**:  
[Introduction to ASP.NET Web Programming Using the Razor Syntax (Visual Basic)][1] | [C#][2]

[1]: https://learn.microsoft.com/en-us/aspnet/web-pages/overview/getting-started/introducing-razor-syntax-vb#looping-code
[2]: https://learn.microsoft.com/en-us/aspnet/web-pages/overview/getting-started/introducing-razor-syntax-c#looping-code

I am using the following Razor script to loop through but it gives me the following error:

    @foreach (var item in ViewBag.Articles)
    {
        <div>@item.Title</div>
    }

Error:

Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately. 

Compiler Error Message: BC30451: 'foreach' is not declared. It may be inaccessible due to its protection level.

Source Error:

> Line 29:     <legend>Articles</legend> Line 30:  Line 31:     @foreach
> (var item in ViewBag.Articles) Line 32:     { Line 33:        
> <div>@(item.index). @item.model.Description</div>
> 
> Source File: C:\Users\darchual\documents\visual studio
> 2010\Projects\Blog\Blog\Views\Blog\Details.vbhtml    Line: 31

It also says in my IDE that "'foreach' is not declared. It may be inaccessible due to its protection level."

How do I loop through the collection?  Thank you for your help.

Edit:

Here is the whole code:


> @ModelType Blog.Blog
> 
> @Code
>     ViewData("Title") = ViewBag.Title End Code
> 
> <h2>Details</h2>
> 
> <fieldset>
>     <legend>Blog</legend>
> 
>     <div class="display-label">name</div>
>     <div class="display-field">
>         @Html.DisplayFor(Function(model) model.name)
>     </div>
> 
>     <div class="display-label">description</div>
>     <div class="display-field">
>         @Html.DisplayFor(Function(model) model.description)
>     </div>
> 
>     <div class="display-label">dateCreated</div>
>     <div class="display-field">
>         @Html.DisplayFor(Function(model) model.dateCreated)
>     </div> </fieldset>
> 
> <fieldset>
>     <legend>Articles</legend>
> 
>     @foreach (var item in ViewBag.Articles)
>     {
>         <div>@item.Title</div>
>     }
> 
> </fieldset> <p>
> 
>     @Html.ActionLink("Edit", "Edit", New With {.id = Model.BlogId}) |
>     @Html.ActionLink("Back to List", "Index") </p>

Here is the Blog object:


> Imports System.Data.Entity Imports
> System.ComponentModel.DataAnnotations
> 
> Public Class Blog
> 
>     Public Property BlogId() As Integer
> 
>     Public Property Name() As String
>     Public Property Description() As String
>     Public Property DateCreated As Date
> 
>     Public Overridable Property Articles() As ICollection(Of Article)
> 
> End Class
> 
> Public Class BlogDbContext
> 
>     Inherits DbContext
>     Public Property Blogs As DbSet(Of Blog)
> 
> End Class

Edit:

Finally got it to work.  Working code is:

    @For Each item In ViewBag.Articles
        @<div>@item.Title</div>
    Next

Loop through Collection in VB ASP.NET MVC Razor

As Tommy noted, this is, somewhat counterintuitively, the correct behavior since form data submitted on post gets first priority when binding the data to the returned view.  This makes some sense as the user is likely to have made a validation error when re-returning the same view and gets to resume their form entry as is without the problems of losing form input when restoring a page

One other option is to manually insert the value for the input

**So instead of this**:

```html
@Html.TextBoxFor(model => model.City)
```

**Do this instead**:



<pre><code>&lt;input type="text" name="City" <b>value="@Model.City"</b> /&gt;
</code></pre>
\* *which will grab the value directly off the model*


**Or even better**:

```html
<input type="text" value="@Model.City"
       name="@Html.NameFor(model => model.City)"
       id="@Html.IdFor(model => model.City)" />
```

> ***Note**: this won't bring in `data-val` attributes.  If you're using them on this property for client side validation, you'll need to [build list of data validation attributes for a given element][4]

### Additional Resources

* [HiddenFor not getting correct value from view model][1]
* [HTML.HiddenFor is not updating on a postback][2]
* [ASP.NET MVC Postbacks and HtmlHelper Controls ignoring Model Changes][3]

[1]: https://stackoverflow.com/q/4837744/1366033
[2]: https://stackoverflow.com/q/20657706/1366033
[3]: https://weblog.west-wind.com/posts/2012/apr/20/aspnet-mvc-postbacks-and-htmlhelper-controls-ignoring-model-changes
[4]: https://stackoverflow.com/q/42999080/1366033

**The Model**:

```cs
class Address
{
    public string City { get; set; }
    public string Zip { get; set; }
}
```

**The Controller**:

```cs
[HttpPost]
public ActionResult GetAddress(Address model)
{
    if (!String.IsNullOrEmpty(model.Zip))
    {
        model.City = GetCityByZip(model.Zip);
    }
    return View(model);
}
```

**The View**:

```html
<div class="formrow">
    @Html.LabelFor(model => model.City)
    @Html.TextBoxFor(model => model.City) 
    @Html.ValidationMessageFor(model => model.City)
</div>
<div class="formrow">
    @Html.LabelFor(model => model.Zip)
    @Html.TextBoxFor(model => model.Zip) 
    @Html.ValidationMessageFor(model => model.Zip)
</div>
```

The problem is whenever the city is being modified, it never gets reflected on the view. During debugging, the `model.City` contains the correct value but it doesn't show up on view. Even something as simple as `@Html.TextBoxFor(model => model.City)` doesn't display the correct `model.City` value.

MVC Model not updating

Assuming your class currently looks something like this:

    [ValidateThisForm]
    public class MyViewModel
    {
        public bool TestOne { get; set; }
        public bool TestTwo { get; set; }
    }

If you have complex model-level validation you want to perform, where you can't simply annotate a single property, you can hook into the validation pipeline with [`IValidatableObject`][1] like this:

    public class MyViewModel : IValidatableObject
    {
        public bool TestOne { get; set; }
        public bool TestTwo { get; set; }
        
        public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
        { 
          if (TestOne == false && TestTwo == false) 
          {
              yield return new ValidationResult("Form Incomplete: Please correct")
          }
        }
    }

You can continue to `yield return` as many validation messages as you'd like. And you can display them all on the client with [`@Html.ValidationSummary`][3]

If you'd like the message to appear alongside a particular control, the [`ValidationResult`][2] constructor takes an overload with the `memberNames` of the affected properties so you could change the `Validate` method like this:

    if (TestOne == false && TestTwo == false) 
    {
        yield return new ValidationResult("Form Incomplete Message", new[] {"TestOne"})
    }

Then you can provide the validation message for that particular property with the [`ValidationMessageFor`][4] HTML helper like this:

    @Html.ValidationMessageFor(Function(model) model.TestOne )

For further reading, Scott Guthrie wrote about using `IValidatableObject` as part of his [blog post introducing new features in MVC3][5] and had a follow up post with more detail on [class level validation][6] shortly thereafter.

 
[1]: https://msdn.microsoft.com/en-us/library/system.componentmodel.dataannotations.ivalidatableobject%28v=vs.110%29.aspx
[2]: https://msdn.microsoft.com/en-us/library/dd411880(v=vs.110).aspx
[3]: https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.validationsummary%28v=vs.110%29.aspx
[4]: https://msdn.microsoft.com/en-us/library/system.web.mvc.html.validationextensions.validationmessagefor%28v=vs.118%29.aspx
[5]: http://weblogs.asp.net/scottgu/introducing-asp-net-mvc-3-preview-1
[6]: http://weblogs.asp.net/scottgu/class-level-model-validation-with-ef-code-first-and-asp-net-mvc-3

I have a viewmodel such that, on validation, I want to compare multiple fields. 
I have a custom attribute that takes the viewmodel and performs the required validation.
I am decorating the viewmodel class with the custom attribute [ValidateThisForm]

    [AttributeUsage(AttributeTargets.Class)]
    public class ValidateThisForm : ValidationAttribute
    {
        public override bool IsValid(object value)
        {
            ViewModel _viewModel = value as ViewModel;

            if (_viewModel.TestOne == false && _viewModel.TestTwo == false)
            {
                ErrorMessage = "Form Incomplete: Please correct";
                return false;
            }
            else
            {
                return true;
            }
        }
    }


The problem is, I want to perform several "class level" validations. As a result, in my view, I can only display these errors in one place on the form:

    <td class = "field-validation-error">@Html.ValidationMessageFor(viewmodel => viewmodel)</td>

Is there a way that I can have multiple "class level" errors being displayed in different locations on the form? 


MVC - Displaying multiple class level validation error messages

### The Problem

If you look at the html emitted by your razor view, you'll see what's at issue here.



**Without a viewmodel**, we should generate the following code (cleaned up a little):



<pre><code>&lt;input type=&quot;checkbox&quot; name=&quot;IsAdult&quot; id=&quot;<b><i>IsAdult</i></b>&quot; /&gt;
&lt;input type=&quot;text&quot; name=&quot;Comments&quot; id=&quot;Comments&quot;
       data-val-requiredif-dependprop=&quot;<b><i>IsAdult</i></b>&quot; 
       data-val-requiredif-value=&quot;Yes&quot;
       data-val-requiredif=&quot;Please leave a comment&quot; /&gt;
</code></pre>

**With a viewmodel**, we get this:



<pre><code>&lt;input type=&quot;checkbox&quot; name=&quot;PersonModel.IsAdult&quot; id=&quot;<b><i>PersonModel_IsAdult</i></b>&quot; /&gt;
&lt;input type=&quot;text&quot; name=&quot;PersonModel.Comments&quot; id=&quot;PersonModel_Comments&quot;
       data-val-requiredif-dependprop=&quot;<b><i>IsAdult</i></b>&quot; 
       data-val-requiredif-value=&quot;Yes&quot;
       data-val-requiredif=&quot;Please leave a comment&quot; /&gt;
</code></pre>

Whenever a property is nested inside another property, MVC will build a stack of prefixes to generate unique ID's and names.  You can see in the first case, `IsAdult` is enough to identify the field, however once it has been nested, the id has changed.  In unobtrusive validation (rules stored in attributes), everything we need to possibly know about how to validate an element needs to get sent along in the `data-attributes`, including how to locate other properties.

### The Solution

The data attribute on the class should never know or care about what context it is being called under, so it will continue to blindly point out the relative attribute on which it depends:



    public bool IsAdult { get; set; }
    [RequiredIf("IsAdult", "Yes", Errormessage="Please leave a comment")]
    public string Comments { get; set; }

So we'll have to establish the context either on the server or on the client.

**On the Server** - Nope!

As part of your `public class RequiredIfAttribute : ValidationAttribute, IClientValidatable`, you'll have a method that emits client side validation rules that looks something like this:

    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        ModelClientValidationRule requiredIfRule = new ModelClientValidationRule();
        requiredIfRule.ErrorMessage = ErrorMessageString;
        requiredIfRule.ValidationType = "requiredif";
        requiredIfRule.ValidationParameters.Add("dependprop", this._propertyName);
        requiredIfRule.ValidationParameters.Add("value", Json.Encode(this._value));     

        yield return requiredIfRule;
    }


The temptation here would be to navigate the `viewContext.ViewData.TemplateInfo` to return the [`GetFullHtmlFieldId`][1], but from what I can tell, this [information isn't available yet][2].

**Client** - wonky but working:

On the client, we'll wire up the adapter with a method that looks [something like this][3]:



    $.validator.unobtrusive.adapters.add('requiredif', ['dependprop', 'value'], function (options) {
        options.rules["requiredif"] = { 
            id: '#' + options.params['dependprop'],
            value: JSON.parse(options.params.value) 
        };
        options.messages['requiredif'] = options.message;
    });


Notice this still just takes the plain old property name and assumes it can be used as the ID to locate the object.

By making some reasonable assumptions, we can build the full dependency property id.  It should always be the case that the requiredif calling element is within the same scope as the property we're identify (that's how we were able to find it on the server via reflection). 

So we'll grab that context from the sender, remove that property's name, and append our own like this inside of `$.validator.unobtrusive.adapters.add`:




    var curId = options.element.id;               // get full id      i.e. ViewModel_Comments
    var context = curId.replace(/[^_]+$/, "");    // remove last prop i.e. ViewModel_
    var targetProp = options.params['dependprop'] // target name      i.e. IsAdult
    var targetId = '#' + context + targetProp;    // build target ID  i.e. #ViewModel_IsAdult

    options.rules["requiredif"] = {
        id: targetId,
        value: JSON.parse(options.params.value)
    };



That should help find the right client side property - then write whatever other conditions you need to meet.


[1]: https://msdn.microsoft.com/en-us/library/system.web.mvc.templateinfo.getfullhtmlfieldid.aspx
[2]: https://stackoverflow.com/a/24825324/1366033
[3]: https://thewayofcode.wordpress.com/tag/custom-unobtrusive-validation/

I am using the [custom RequiredIf attribute created by Simon Ince][1] in my MVC app.  

I have a viewmodel which is passed to the view like this:
    


    public class HistoryViewModel
    {
        public Contact ContactModel { get; set; }
        public Account AccountModel { get; set; }
        public Person PersonModel { get; set; }
     }

I have a bunch of models with all the props in them (i.e. contact.cs, account.cs, person.cs)



    public class Person
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public bool IsAdult { get; set; }        
        [RequiredIf("IsAdult", "Yes", Errormessage="Please leave a comment")]
        public string Comments { get; set; }
     }
     

The `RequiredIf` validation does not seem to be working when passed through the viewmodel.  It works fine if I move the properties into the viewmodel directly`.  All other `[Required]` attributes work from the model, through the viewmodel. 

*So do I need to move all the properties into the viewmodel, that need the RequiredIf on them?  Or is there another way around this?*

[1]: https://blogs.msdn.microsoft.com/simonince/2011/02/04/conditional-validation-in-asp-net-mvc-3/

Using [RequiredIf] in ASP MVC3 with ViewModels

Here's another approach from [How to create custom validation attribute for MVC][1], which is adapted from this article on [ASP.NET MVC Custom Validation][2]:

    [AttributeUsage(AttributeTargets.Property | AttributeTargets.Field, AllowMultiple = false)]
    public class AlphaNumericAttribute: RegularExpressionAttribute
    {
        private const string pattern = "^[-A-Za-z0-9]+$";
    
        public AlphaNumericAttribute() : base(pattern)
        {
            // necessary to enable client side validation
            DataAnnotationsModelValidatorProvider.RegisterAdapter(
                typeof(AlphaNumericAttribute), 
                typeof(RegularExpressionAttributeAdapter));
        }
    }

By using [`RegisterAdapter`][3], you can leverage the integrations that already exist for regular expressions for your own inherited type.

[1]: https://stackoverflow.com/a/5954452/1366033
[2]: http://haacked.com/archive/2009/11/19/aspnetmvc2-custom-validation.aspx/
[3]: https://msdn.microsoft.com/en-us/library/system.web.mvc.dataannotationsmodelvalidatorprovider.registeradapter(v=vs.118).aspx

I have created the following custom RegularExpressionAttribute

    [AttributeUsage(AttributeTargets.Property | AttributeTargets.Field, AllowMultiple = false)]
    public class AlphaNumericAttribute: RegularExpressionAttribute, IClientValidatable
    {
        public AlphaNumericAttribute()
          : base("^[-A-Za-z0-9]+$")
        {
        }

       public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
       {
          yield return new ModelClientValidationRule { ErrorMessage =  FormatErrorMessage(metadata.GetDisplayName()), ValidationType = "alphanumeric" };
       }
    }

The field in the ViewModel is decorated with my AlphaNumeric attribute:

    [AlphaNumeric(ErrorMessageResourceType = typeof(Resources), ErrorMessageResourceName = Resources.DriverLicenseNumber_RegexError_)]
    public string DriverLicenseNumber { get; set; }

The field is built in the view:

    @using (Html.BeginForm("Index", "Application", FormMethod.Post, new { id = "applicationDataForm", autocomplete = "off" }))
    {
        @Html.LabelFor(m => m.DriverLicenseNumber)
        @Html.ValidationMessageFor(m => m.DriverLicenseNumber)
        @Html.TextBoxFor(m => m.DriverLicenseNumber)
    }

This should yield the proper *"data-"* validation attributes on my html input tag.  However, the rendered tag looks like this:

    <input data-val="true" data-val-alphanumeric="Please enter a valid driver's license number." id="DriverLicenseNumber" name="DriverLicenseNumber" type="text" value="" maxlength="20" class="valid">

Conspicuously absent are the *data-val-regex* and *data-val-regex-pattern* attributes that are supposed be rendered.  

I have built other validators with the exact same structure, and they work correctly, like this SSN validation which handles masked spaces for a masked input using jquery masking:

    public class SsnAttribute : RegularExpressionAttribute, IClientValidatable
    {
      public SsnAttribute()
      : base("^([0-9]{3}–[0-9]{2}–[0-9]{4})|([ ]{3}–[ ]{2}–[ ]{4})|([0-9]{9,9})$")
    {
    }

    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
      yield return new ModelClientValidationRule { ErrorMessage = FormatErrorMessage(metadata.GetDisplayName()), ValidationType = "ssn" };
    }
  }

With the accompanying application on the ViewModel:

    [Ssn(ErrorMessageResourceType = typeof(Resources), ErrorMessageResourceName = Resources.SocialSecurity_RegexError_)]
    public new string SocialSecurityNumber { get; set; }

The field is built in the view:
    
    @using (Html.BeginForm("Index", "Application", FormMethod.Post, new { id = "applicationDataForm", autocomplete = "off" }))
    {
        @Html.LabelFor(m => m.SocialSecurityNumber)
        @Html.ValidationMessageFor(m => m.SocialSecurityNumber)
        @Html.TextBoxFor(m => m.SocialSecurityNumber)
    }

This validation attribute correctly renders the data-val-regex and data-val-regex-pattern attributes:

    <input class="SSNMask valid" data-val="true" data-val-regex="Please enter a valid social security number." data-val-regex-pattern="^([0-9]{3}–[0-9]{2}–[0-9]{4})|([ ]{3}–[ ]{2}–[ ]{4})|([0-9]{9,9})$" id="SocialSecurityNumber" name="SocialSecurityNumber" type="text" value="" maxlength="22">

<br/><br/>
I cannot figure out what I am missing with the AlphaNumeric attribute that it does not render the appropriate html attributes.

Custom RegularExpressionAttribute missing data-val-regex-pattern for client-side validation

If you want to capture the return event, you'll have to submit the original request yourself over AJAX.  Which means JavaScript will have to be ultimately responsible for downloading the file, instead of the browser via the [`Content-Disposition: attachment` header][3].

In your controller, instead of returning a `FileActionResult`, you can [convert the file into a Base64String][4] and return that like this:




    Byte[] bytes = File.ReadAllBytes("path");

    if (Request.IsAjaxRequest())
    {
        var file64 = Convert.ToBase64String(bytes);
        return Json( new {File = file64, MimeType = mimeType, FileName = fileName});
    }
    else
    {
        // return file - should just auto download
        return File(bytes, mimeType, fileName);
    }

Then in your AJAX handler, you can [use HTML5/Javascript to generate and save a file][5] using [base64 encoding][6] like this:



    $(":submit").on("click", function(e) {
        e.preventDefault();
        var $form = $(this).closest('form');

        // disable buttons
        var $btns = $(":submit").addClass("disabled");
        
        $.ajax({
            type: $form.attr("method"),
            url: $form.attr("action"),
            data: $form.serializeArray(),
            success: function (data) {

                var pom = document.createElement('a');
                pom.setAttribute('href', 'data:' + data.MimeType + ';base64,' + data.File);
                pom.setAttribute('download', data.FileName);

                if (document.createEvent) {
                    var event = document.createEvent('MouseEvents');
                    event.initEvent('click', true, true);
                    pom.dispatchEvent(event);
                }
                else {
                    pom.click();
                }

                // reset buttons
                $btns.removeClass("disabled");
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log(jqXHR);
            }
        });
    });

### IE / Edge Support

For [IE /Edge][9], you'll need to use [`window.navigator.msSaveBlob`][7]. If you're sending back a base64 string, you'll also need to [Creating a Blob from a base64 string in JavaScript][8]

**Further Reading**:

* [Returning a file to View/Download in ASP.NET MVC][1]
* [ASP.NET MVC Controller FileContent ActionResult called via AJAX][2]

[1]: https://stackoverflow.com/q/5826649/1366033
[2]: https://stackoverflow.com/q/2240869/1366033
[3]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition
[4]: https://stackoverflow.com/a/25919641/1366033
[5]: https://stackoverflow.com/a/18197511/1366033
[6]: https://stackoverflow.com/q/16996319/1366033
[7]: https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/samples/hh779016(v=vs.85)
[8]: https://stackoverflow.com/q/16245767/1366033
[9]: https://stackoverflow.com/q/48754185/1366033

In my controller I have an `ActionResult` which returns a File.



 

    [HttpPost]
    public ActionResult ExportCSV(ReportResultViewModel model)   
    {     
        var content = "hello,world";
        return File(Encoding.UTF8.GetBytes(content),"text/csv","export.csv");
    }


In my view, when I post to this ActionResult, I display a modal saying "please wait".


    
    
    <div class="modal fade" id="pleaseWaitDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" style="background: #EBF3EB;">
                <div class="modal-header">
                    <h1>Please wait...</h1>
                </div>
                <div class="modal-body">
                    <div id="loader"></div>
                </div>
           </div>
        </div>
    </div>
    @using (Html.BeginForm("ExportCSV", "Reporting", FormMethod.Post, new { name = "back", id = "back", style = "width:100%" }))
    {
         @Html.HiddenFor(m => m.A)
         @Html.HiddenFor(m => m.LOT)
         @Html.HiddenFor(m => m.OF)
         @Html.HiddenFor(m => m.THINGS)
                                
         <input type="submit" data-toggle="modal" data-target="#pleaseWaitDialog" value="Export CSV" style="width: 100%; background: #fff" class="btn btn-default"  />
    }

I want to hide it when the file is finally returned to the page.

Is there a way to detect client side (with JavaScript maybe) when the file arrives so I can hide the modal?

Handling ASP.NET MVC FileResult returned

You'll need to determine that information when the page loads and dynamically add the `.active` class to the applicable menu item.  You can do that by using the routing information exposed by `html.ViewContext.RouteData` and an extension method that checks to see if it matches.

Update your `_navbar.cshtml` like this:



<pre><code>&lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarcollapse&quot;&gt;
    &lt;ul class=&quot;nav navbar-nav&quot;&gt;
        &lt;li <b>class='@Html.IsActive(&quot;Home&quot;, &quot;Index&quot;)'</b>&gt;
            &lt;a href=&quot;/Home/Index&quot;&gt;Home&lt;/a&gt;
        &lt;/li&gt;
        &lt;li <b>class='@Html.IsActive(&quot;Home&quot;, &quot;ListOfEmployees&quot;)'</b>&gt;
            &lt;a href=&quot;/Home/ListOfEmployees&quot;&gt;Employee List&lt;/a&gt;
        &lt;/li&gt;
        &lt;li <b>class='@Html.IsActive(&quot;Register&quot;, &quot;Index&quot;)'</b>&gt;
            &lt;a href=&quot;/Register/Index&quot;&gt;Registration&lt;/a&gt;
        &lt;/li&gt;
        &lt;li <b>class='@Html.IsActive(&quot;Home&quot;, &quot;AddEmployee&quot;)'</b>&gt;
            &lt;a href=&quot;/Home/AddEmployee&quot;&gt;Add Employee&lt;/a&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

Then add the extension method `IsActive`:



    public static class Utilities
    {
        public static string IsActive(this HtmlHelper html, 
                                      string control,
                                      string action)
        {
            var routeData = html.ViewContext.RouteData;
    
            var routeAction = (string)routeData.Values["action"];
            var routeControl = (string)routeData.Values["controller"];
    
            // both must match
            var returnActive = control == routeControl &&
                               action == routeAction;
    
            return returnActive ? "active" : "";
        }
    }

For more info, you can check an article I authored a while back about loading the [active class in bootstrap using ASP.NET MVC][blog]


[blog]:http://www.codingeverything.com/2014/05/mvcbootstrapactivenavbar.html

I am using Bootstrap 3.2.0 to create a navbar in my MVC3 application.
Also I am using jquery-1.11.1.js.

The problem I am facing is that my navbar is created properly and it's responsive too, but the "active" class is not retained on the selected navbar item once the new page loads.

What is happening is that when I click on the navbar item, selected item gets the "active" class but after the new page is loaded, selected item losses the "active" class and the "active" class goes to the first item in the nav list.

I am pasting the code below for reference:

**_Layout.cshtml**:



    <body>
        <div class="container">
            <div class="row" id="navigationbar" 
                 style="height:50px; background-color:black;">
                @Html.Partial("_navbar")
            </div>
            <div class="content">
                ......
            </div>
        </div>
    </body>

**_navbar.cshtml**:



    <div class="navbar navbar-default col-xs-10" role="navigation" 
         style="background-color: orange; border: 0px; border-radius: 0px; text-align: center;">
        <div>
            <button type="button" class="navbar-header navbar-toggle" data-toggle="collapse"
            data-target="#navbarcollapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse" id="navbarcollapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="/Home/Index">Home</a></li>
                <li><a href="/Home/ListOfEmployees">Employee List</a></li>
                <li><a href="/Register/Index">Registration</a></li>
                <li><a href="/Home/AddEmployee">Add Employee</a></li>
            </ul>
        </div>
    </div>
 
And I have included the below jquery code in the _navbar.cshtml:-



    $(".nav a").on("click", function () {
        $(".nav").find(".active").removeClass("active");
        $(this).parent().addClass("active");
    });

Active class not retained on the selected list item in the bootstrap nav bar in mvc3 after new page opens

Here's a [similar question on preventing flickering with Bootstrap-Select][1].

The fact is that a [Flash of Unstyled Content (FOUC)][3] is going to happen anytime that JavaScript is running on the client after the page has rendered and changes the appearance of the page.  You're best bet is to just minimize the changes ahead of time.

The heavy handed approach would be to wait to display the page until all the scripts have run, but this is much worse for users. 

As [Roryok suggested][2], the best way to mitigate this issue is to style the appearance of the native element as close as possible to the plugin control.

To do that, just add the following css to any select element which will be applied before the javascript renders the control.

```css
/* apply styles to original select element before hidden */
select.select2{
  color: #444;
  background-color: #FFF;
  border: 1px solid #AAA;
  border-radius: 4px;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  height: 28px;
  padding-left: 5px;
  font: unset;
}
```

### Demo in Stack Snippets





    $('.select2').select2();



    body {
      display: flex;
      flex-direction: row;
    }

    div {
      padding: 15px;
      display: flex;
      flex-direction: column;
    }

    label {
      font-weight: bold;
    }

    select {
      min-width: 150px;
    }

    .select2-theme {
      color: #444;
      background-color: #FFF;
      border: 1px solid #AAA;
      border-radius: 4px;
      box-sizing: border-box;
      cursor: pointer;
      display: block;
      height: 28px;
      padding-left: 5px;
      font: unset;
    }



    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.js"></script>


    <div >
      <label>Select 2</label>
      <select class="select2">
        <option>Mustard</option>
        <option>Ketchup</option>
        <option>Relish</option>
      </select>

    </div>

    <div>
      <label>Select2 Themed</label>
      <select class="select2-theme">
        <option>Mustard</option>
        <option>Ketchup</option>
        <option>Relish</option>
      </select>
    </div>

    <div>
      <label>Default Select</label>
      <select >
        <option>Mustard</option>
        <option>Ketchup</option>
        <option>Relish</option>
      </select>  
    </div>





[1]: https://stackoverflow.com/q/23251488/1366033
[2]: https://stackoverflow.com/questions/29849666/#comment47825566_29849666
[3]: http://en.wikipedia.org/wiki/Flash_of_unstyled_content

I'm using bootstrap on a site, and using the following code on load to turn my select boxes into [select2][1] dropdowns

    $("select").select2();

However when any page with a select dropdown loads, there's a brief delay where the original can be seen before the select2 replacement is drawn in. This is quite jarring as elements of the forms on my pages move around. 

Is there a way to generate the select2 HTML in my backend (ASP MVC3) and write it out to the page in such a way that the select2 plugin will still hook up all the behaviours correctly? 

[1]: https://select2.github.io/