如何在ASP.Net MVC 5中显示错误验证摘要标题

Question

I am a beginner in ASP.Net MVC 5 and I want to know how to display validation summary "Header Message" on top of page above all the errors.

Below is what I have till now:

View:

@model WebApplication3.Models.Form
@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    <div class="form-horizontal">
        <h4>Form</h4>
        @* first parameter false means show all the errors *@
        @* second parameter means the message to display as Header on top*@
        @Html.ValidationSummary(false,"Fix below error", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Name, "*", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.age, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.age, new { htmlAttributes = new { @class = "form-control" } })
                @*star meaning show the star sign to keep show field required.  *@
                @Html.ValidationMessageFor(model => model.age, "*", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

@* CLIENT SIDE VALIDATION*@
@section Scripts
 {
 @Scripts.Render("~/bundles/jqueryval")
 }

Model

 public class Form
    {
        public int Id { get; set; }
        [Required]
        public string Name { get; set; }
        [Required]
        [Remote("IsAgeUnique", "Form", ErrorMessage = "Age is not unique")]
        public int age { get; set; }
    }

PS: I have used @Html.ValidationMessageFor(prop, "*") wildcard for each property to display star message side to the UI field.

Issue: When the page loads the error header is already there displayed on the page. Functionality wise everything is working fine. But during initial page load why the "Header message gets displayed"

Answer 1

You can try to add css rule like following to make header error part unvisible initially.

Validation summary text has validation-summary-valid class initially. If there are some errors it becomes validation-summary-errors so your initial value dont have any error, I think you can use css rule

.validation-summary-valid {
    display:none;
}