사용자 지정 유효성 검사 요약 템플릿 Asp.net MVC 3

사용자 지정 유효성 검사 요약 템플릿 Asp.net MVC 3

---

Asp.Net MVC3로 프로젝트를 진행 중입니다.

보기에서 내가 가지고 @Html.ValidationSummary(true)있고 일반적으로

<div class="validation-summary-errors">
    <ul>
        <li>Something bad Happened!</li>
    </ul>
</div>

이 ValidationSummary를 MyValidationSummary로 확장하고 다음과 같은 Html 코드 템플릿을 생성하려면 어떻게해야합니까?

<div class="notification warning"> 
    <span></span> 
    <div class="text"> <p>Something bad Happened!</p> </div> 
</div>

---

이 질문 은 사용자 지정 유효성 검사 요약을 작성하는 절차를 자세히 설명합니다.

편집 이것은 당신이 원하는 것을 할 것입니다 :

public static class LinqExt 
{
    public static string MyValidationSummary(this HtmlHelper helper, string validationMessage="")
    {
        string retVal = "";
        if (helper.ViewData.ModelState.IsValid)
            return "";

        retVal += "<div class='notification-warnings'><span>";
        if (!String.IsNullOrEmpty(validationMessage))
            retVal += helper.Encode(validationMessage);
        retVal += "</span>";
        retVal += "<div class='text'>";
        foreach (var key in helper.ViewData.ModelState.Keys) 
        {
            foreach(var err in helper.ViewData.ModelState[key].Errors)
                retVal += "<p>" + helper.Encode(err.ErrorMessage) + "</p>";
        }
        retVal += "</div></div>";
        return retVal.ToString();
    }
}

코드는 자명합니다. 모델 상태 오류를 통해 열거하고 선택한 dom 요소의 오류를 래핑합니다. 다음과 같이 사용하면 오류가 발생합니다.

<%:Html.MyValidationSummary()%>

페이지에 html 태그를 렌더링하는 대신 텍스트로 표시합니다.

<%=Html.MyValidationSummary()%>

이것은 잘 작동합니다.

---

내 접근 방식은 사용자 정의를 사용하는 것입니다 ValidationSummary.cshtml.

@model ModelStateDictionary

@if(!Model.IsValid)
{
    <div class="validation-summary-errors">
        <ul>
            @foreach (var modelError in 
                     Model.SelectMany(keyValuePair => keyValuePair.Value.Errors))
            {
                <li>@modelError.ErrorMessage</li>
            }
        </ul>
    </div>
}

이 부분보기를 공유 폴더에 넣고 코드에서 참조하십시오.

@Html.Partial("_ValidationSummary", ViewData.ModelState);

이렇게하면 html을 완전히 제어 할 수 있습니다.

---

flos의 답변을 바탕 으로 Microsoft의 jQuery Unobtrusive Validation과 호환되도록 만들고 Bootstrap의 3 패널 스타일을 추가했습니다. 다음은 새로운 코드입니다.

@model ModelStateDictionary

<div class="@(Html.ViewData.ModelState.IsValid ? "validation-summary-valid" : "validation-summary-errors") panel panel-danger"
     data-valmsg-summary="true">
    <div class="panel-heading">
        Please, correct the following errors:
    </div>
    <div class="panel-body">
        <ul>
            @foreach(var modelError in Model.SelectMany(keyValuePair => keyValuePair.Value.Errors))
            {
                <li>@modelError.ErrorMessage</li>
            }
        </ul>
    </div>
</div>

여기에서 자세한 내용을 읽을 수 있습니다.

Bootstrap 3 패널로 스타일이 지정된 사용자 지정 ASP.NET MVC @ Html.ValidationSummary 만들기

또한이 사용자 지정 ValidationSummary가 작동하는 모습을 보여주는 샘플 ASP.NET MVC 프로젝트를 만들었습니다. 여기에서 얻으십시오 :

https://github.com/leniel/AspNetMvcCustomHtmlValidationSummary

---

저에게 잘 작동하기 때문에 여기에 내 대답을 게시하십시오.)

를 가져 와서 MvcHtmlStringHTML로 다시 디코딩 하는 간단한 확장 메서드를 사용합니다 .

    public static MvcHtmlString ToMvcHtmlString(this MvcHtmlString htmlString)
    {
        if (htmlString != null)
        {
            return new MvcHtmlString(HttpUtility.HtmlDecode(htmlString.ToString()));
        }
        return null;
    }

이것을 연결하기 위해 다음과 같이 내 chstml에 유효성 검사 요약 도우미를 추가합니다.

@Html.ValidationSummary(true).ToMvcHtmlString()

즉, 유효성 검사 요약에 사용자 정의 HTML을 추가 할 수 있습니다.

ModelState.AddModelError("", "<p>This message can have html in it</p>");

And I can even add custom HTML to my field validation messages:

ModelState.AddModelError("MyField", "<p>This message can have html in it</p>");

And to get my field validation messages to work with HTML:

@Html.ValidationMessageFor(model => model.MyField).ToMvcHtmlString();

---

Adding related styles:

.field-validation-error {
    color: #b94a48;
}

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

input.input-validation-error {
    border: 1px solid #b94a48;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #b94a48;
}

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

---

I've just had to do something similar for server side validation only ( e.g checking file contents) and have ended up completely usurping the @Html.ValidationSummary altogether with quite a nice little work around.

We have a BaseController class that extends Controller, and inside we override the OnActionExecuting method for several purposes. We create a new list in ViewBag for our error messages and ensure before any action runs it is initialized. Then we can add our errors to be displayed to it, and display on screen.

For the purposes of this question it would look like this.

public class BaseController : Controller
{
    protected override void OnActionExecuting(ActionExecutingContext filterContext)
    {
        if (ViewBag.ErrorsList == null)
        {
            ViewBag.ErrorsList = new List<string>();
        }
    }
}

Then in our _Layout.cshtml add the following above your @RenderBody()

@if(ViewBag.ErrorsList.Count > 0)
{
    <div class="container margin-top-10 alert alert-danger">
        <h3><i class="glyphicon glyphicon-warning-sign"></i></h3><br/>
        @foreach (string error in @ViewBag.ErrorsList)
        {
            @error <br/>
        }
    </div>
    @RenderBody()
}

Now whenever an error occurs server side that we want to display as a validation error message we simply add it to our ViewBag.ErrorsList

ViewBag.ErrorsList.Add("Something bad happened...");

And voila, one custom container for your server side validation error messages with any styles you want on it, with errors passed in the same manner as ValidationSummary.

---

I wanted to show just top-level message and nothing else. We already have validation next to the fields below. Working off @Leniel-Macaferi's solution this is what I did to make it work with jQuery validation: (added style="display: none;")

<div class="@(Html.ViewData.ModelState.IsValid ? "validation-summary-valid" : "validation-summary-errors")"
     data-valmsg-summary="true">
    <div>
        There are still some fields not filled in before we can submit this. Please correct.
    </div>
    <div style="display: none;">
        <ul>
            @foreach (var modelError in Model.SelectMany(keyValuePair => keyValuePair.Value.Errors))
            {
                <li>@modelError.ErrorMessage</li>
            }
        </ul>
    </div>
</div>

참고URL : https://stackoverflow.com/questions/5857851/custom-validationsummary-template-asp-net-mvc-3