在foreach中对EditorFor进行MVC客户端验证

Question

所以我有一个具有以下结构的视图(这不是实际的代码,而是摘要):

@using (Html.BeginForm("Action", "Controller", FormMethod.Post))
{
  @Html.ValidationSummary("", new { @class = "text-danger" })
  <table>
    <thead>
      <tr>
        <th>Column1</th>
        <th>Column2</th>
      </tr>
    </thead>
    <tbody id="myTableBody">
      @for (int i = 0; i < Model.Components.Count; i++)
      {
        @Html.EditorFor(m => m.MyCollection[i])
      }
    </tbody>
    <tfoot>
      <tr>
        <td>
          <button id="btnAddRow" type="button">MyButton</button>
        </td>
      </tr>
    </tfoot>
  </table>

  <input type="button" id="btnSubmit" />
}

@section scripts {
  @Scripts.Render("~/Scripts/MyJs.js")
}

EditorFor是渲染标记,表示绑定到MyCollection中的属性的行.以下是编辑器模板外观的示例摘录:

@model MyProject.Models.MyCollectionClass

<tr>
  <td>
    @Html.TextBoxFor(m => m.Name)
  </td>
  <td>
    @Html.DropDownListFor(m => m.Type, Model.AvailableTypes)
  </td>
</tr>

基本上,我的问题是客户端验证不会触发编辑器模板内部的元素.有人能指出我可能出错的方向吗？

另请注意,我的web.config中设置了以下内容.

<appSettings>
  <add key="ClientValidationEnabled" value="true" />
  <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>

并且MyCollectionClass对应强制执行的属性具有正确的[Require]注释.需要注意的另一件事是检查

if(ModelState.IsValid)
{
}

如果必需字段不正确,则按预期返回false.问题是我想要客户端验证而不是服务器端.我的其他页面之一是实现jQuery验证,但不包含此方案所做的所有嵌套,因此它可以正常工作.

提前致谢.

Answer 1

据我所知，MVC 并没有真正提供“开箱即用”的客户端验证。有第三方选项，但我更喜欢做自己的事情，所以我用 JavaScript 手工完成了整个事情。与 EditorFor 混合的情况不允许像其他帮助方法一样添加 html 属性。

我对此的修复相当复杂，但我感觉很全面，我希望你发现它和我一样有帮助

首先在.Net中重载HtmlHelper EditorFor

public static HtmlString EditBlockFor<T, TValue>(this HtmlHelper<T> helper, Expression<System.Func<T, TValue>> prop, bool required)
    {   
        string Block = "";
        Block += "<div class='UKWctl UKWEditBox' " +
            "data-oldvalue='" + helper.ValueFor(prop) + "' " +
            "data-required='" + required.ToString() + ">";
        Block += helper.EditorFor(prop);
        Block += "</div>";

        return new HtmlString(Block);
    }

在 razor 视图中添加新的 editBlockfor （就像您一样），但更改 Begin Form 方法以将名称和 id 添加到表单元素，以便您稍后可以识别它

    @using (Html.BeginForm("Action", "Controller", FormMethod.Post, new { name = "MyDataForm", id = "MyDataForm" }))

然后，当用户单击“保存”时，从 JavaScript 运行验证方法

function validate(container)    {

    var valid = true;
    //use jquery to iterate your overloaded editors controls fist and clear any old validation
    $(container).find(".UKWctl").each(function (index) { clearValidation($(this)); });
    //then itterate Specific validation requirements 
    $(container).find(".UKWctl[data-required='True']").each(function (index) {
        var editobj = getUKWEdit(this);
        if (editobj.val() == "") {
            valid = false;
            //use this Method to actually add the errors to the element
            AddValidationError(editobj, 'This field, is required');
            //now add the Handlers to the element to show or hide  the valdation popup
            $(editobj).on('mouseenter', function (evt) { showvalidationContext(editobj, evt); });
            $(editobj).on('mouseout', function () { hidevalidationContext(); });
            //finally add a new class to the element so that extra styling can be added to indicate an issue 
        $(editobj).addClass('valerror');
    }
    });
    //return the result so the methods can be used as a bool
    return valid;
}

添加验证方法

function AddValidationError(element, error) {
    //first check to see if we have a validation attribute using jQuery
    var errorList = $(element).attr('data-validationerror');
    //If not Create a new Array() 
    if (!errorList || errorList.length < 1) {
        errorList = new Array();
    } else {
        //if we have, parse the Data from Json
        var tmpobj = jQuery.parseJSON(errorList);
        //use jquery.Map to convert it to an Array()
       errorList = $.map(tmpobj, function (el) { return el; });
    }
   if ($.inArray(error, errorList) < 0) {
        // no point in add the same Error twice (just in case)
        errorList.push(error);
    }
    //then stringyfy the data backl to JSON and add it to a Data attribute     on your element using jQuery
     $(element).attr('data-validationerror', JSON.stringify(errorList));
}

最后显示和隐藏实际的错误，为了方便起见，我在 _Layout.html 中插入了一个小 div 元素

    <div id="ValidataionErrors" title="" style="display:none">
        <h3 class="error">Validation Error</h3>
        <p>This item contatins a validation Error and Preventing Saving</p>
        <p class="validationp"></p>
    </div>

展示

var tipdelay;
function showvalidationContext(sender, evt)
{
    //return if for what ever reason the validationError is missing
    if ($(sender).attr('data-validationerror') == "") return;
    //Parse the Error to an Object 
    var jsonErrors = jQuery.parseJSON($(sender).attr('data-validationerror'));
    var errorString = '';
//itterate the Errors from the List and build an 'ErrorString'
    for (var i = 0; i <= jsonErrors.length; i++)
    {
        if (jsonErrors[i]) {
            //if we already have some data slip in a line break
            if (errorString.length > 0) { errorString += '<br>'; }
            errorString += jsonErrors[i];
        }
    }
//we don't want to trigger the tip immediatly so delay it for just a moment 
    tipdelay = setTimeout(function () {
        //find the p tag tip if the tip element  
        var validationError = $('#ValidataionErrors').find('.validationp');
        //then set the html to the ErrorString 
        $(validationError).html(errorString);
        //finally actually show the tip using jQuery, you can use the     evt to find the mouse position 
        $('#ValidataionErrors').css('top', evt.clientY);
        $('#ValidataionErrors').css('left', evt.clientX);
        //make sure that the tip appears over everything 
        $('#ValidataionErrors').css('z-index', '1000');
        $('#ValidataionErrors').show();
    }, 500);
}    

隐藏（隐藏起来更容易）

function hidevalidationContext() {
    //clear out the tipdelay
    clearTimeout(tipdelay);
    //use jquery to hide the popup
    $('#ValidataionErrors').css('top', '-1000000px');
    $('#ValidataionErrors').css('left', '-1000000px');
    $('#ValidataionErrors').css('z-index', '-1000');
    $('#ValidataionErrors').hide();
}

对于使用，你可以尝试类似的东西

function save()
{
    if (validate($("#MyDataForm")))
    {
         $("#MyDataForm").submit();   
    }
    else {
        //all the leg has been done this stage so perhaps do nothing
    }
}

这是我的验证弹出窗口的 CSS

#ValidataionErrors {
    display: block; 
    height: auto;
    width: 300px;
    background-color: white;
    border: 1px solid black;
    position: absolute;
    text-align: center;
    font-size: 10px;
}

#ValidataionErrors h3 { border: 2px solid red; }
.valerror { box-shadow: 0 0 2px 1px red; }