在MVC3中擴展不顯眼的JavaScript以向div客戶端添加樣式的最佳方法

Question

我使用的是利用來自Twitter的Bootstrap模板的html5/Razor/MVC3。我想要表單驗證，看起來像他們已經記錄（http://twitter.github.com/bootstrap/#forms）光滑。因此，如果我們看一看如何的標準樣板MVC3帳戶登記，標記看起來像：

@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class="form-stacked" })) { 
    @Html.ValidationSummary(true, "Snap! Something went wrong") 
    <div> 
     <fieldset> 
      <legend>Account Information</legend> 
      <div class="clearfix error"> 
       @Html.LabelFor(m => m.UserName) 
       <div class="input"> 
        @Html.TextBoxFor(m => m.UserName) 
        <span class="help-inline">@Html.ValidationMessageFor(m => m.UserName)</span> 
       </div> 
      </div> 

      <div class="clearfix"> 
       @Html.LabelFor(m => m.Email) 
       <div class="input"> 
        @Html.TextBoxFor(m => m.Email) 
        <span class="help-inline">@Html.ValidationMessageFor(m => m.Email)</span> 
       </div> 
      </div> 

      <div class="clearfix"> 
       @Html.LabelFor(m => m.Password) 
       <div class="input"> 
        @Html.PasswordFor(m => m.Password) 
        <span class="help-inline">@Html.ValidationMessageFor(m => m.Password)</span> 
       </div> 
      </div> 

      <div class="clearfix"> 
       @Html.LabelFor(m => m.ConfirmPassword) 
       <div class="input"> 
        @Html.PasswordFor(m => m.ConfirmPassword) 
        <span class="help-inline">@Html.ValidationMessageFor(m => m.ConfirmPassword)</span> 
       </div> 
      </div> 
     </fieldset> 
     <div class="actions"> 
      <button class="btn large primary" type="submit">Register</button> 
     </div> 
    </div> 

我想要做的是有div容器注入的「錯誤」類像我在第一個輸入中被硬編碼。 （所以進入頁面後，div會有一個「clearfix」類，但是如果該輸入塊未通過驗證，則會將其標記爲「clearfix error」）。我想我將不得不更新div塊以包含某種類型的ID，並且可能會向ValidationMessage添加新的數據屬性。我沒有擴展ValidationMessageFor幫助器的問題。我只是不能100％確定該擴展該庫的方法。有關如何解決這個問題的任何建議？

TIA。

UPDATE：

我想這種做法是合理的：

<div id="UserNameContainer" class="clearfix error"> 
    @Html.LabelFor(m => m.UserName) 
    <div class="input"> 
     @Html.TextBoxFor(m => m.UserName) 
     <span class="help-inline">@Html.ValidationMessageFor(m => m.UserName, null, new { @data_container = "UserNameContainer" })</span> 
    </div> 
</div> 

通過裝飾我的驗證消息與數據容器的名字，然後我可以瞄準div容器。現在我只需要弄清楚如何攔截驗證消息。

Answer 1

與其重新創建此特定輪子，請檢查位於http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/處的validationEngine插件。

您可以根據需要自定義彈出窗口元素，並且連接到jQuery.validate.js是微不足道的。

Answer 2

來自同一問題。我正在通過添加和擴展HtmlHelper類來解決這個問題。

這是我爲在ValidationSummary：

public static class TwitterBootstrapHelperExtensions 
    { 
     public static MvcHtmlString BootstrapValidationSummary(this HtmlHelper helper, 
           bool excludePropertyErrors, 
           string message) 
     { 
      if(helper.ViewData.ModelState.Values.All(v => v.Errors.Count == 0)) return new MvcHtmlString(string.Empty); 

      string errorsList = "<ul>"; 
      foreach (var error in helper.ViewData.ModelState.Values.Where(v => v.Errors.Count >0)) 
      { 
       errorsList += string.Format("<li>{0}</li>", error.Errors.First().ErrorMessage); 
      } 
      errorsList += "</ul>"; 
      return new MvcHtmlString(string.Format("<div class=\"alert-message error\"><span>{0}</span>{1}</div>",message,errorsList)); 

     } 
    } 

而在.cshtml文件我這個替換Html.ValidationSummary：

@Html.BootstrapValidationSummary(true, "Login was unsuccessful. Please correct the errors and try again.") 

記住要添加擴展類的namespance在視圖文件夾web.config文件中。

如果我在之前處理單個輸入項目，我會在稍後發佈。 HTH

Answer 3

$.validator.setDefaults方法通過Twitter從Bootstrap中解決了這個問題。我正在使用jquery.validate.js和jquery.validate.unobtrusive.js。

由於DOM ready上的不顯眼驗證會掃描您的文檔併爲其遇到的每種表單緩存不顯眼的驗證選項，因此在文檔掃描發生之前需要調用$.validator.setDefaults方法。

// setup defaults for $.validator outside domReady handler 
$.validator.setDefaults({ 
    highlight: function (element) { 
     $(element).closest(".clearfix").addClass("error"); 
    }, 
    unhighlight: function (element) { 
     $(element).closest(".clearfix").removeClass("error"); 
    } 
}); 

$(document).ready(function() { 
     // do other stuff 
}); 

Answer 4

我所做的是採取驗證錯誤的CSS類並創建了一個新的CSS文件使用相同的類，但自舉值。http://nuget.org/List/Packages/MahApps.Twitter.Bootstrap

這也提供了一些腳手架模板自動創建新的觀點：

你可以找到它的NuGet包。

Answer 5

我喜歡改變bootstrap的CSS。 只需在正確的位置添加jQuery驗證的類。 現場驗證錯誤輸入驗證錯誤

form .clearfix.error > label, form .clearfix.error .help-block, form .clearfix.error .help-inline, .field-validation-error { 
    color: #b94a48; 
} 
form .clearfix.error input, form .clearfix.error textarea, .input-validation-error { 
    color: #b94a48; 
    border-color: #ee5f5b; 
} 
form .clearfix.error input:focus, form .clearfix.error textarea:focus, .input-validation-error:focus { 
    border-color: #e9322d; 
    -webkit-box-shadow: 0 0 6px #f8b9b7; 
    -moz-box-shadow: 0 0 6px #f8b9b7; 
    box-shadow: 0 0 6px #f8b9b7; 
} 

Answer 6

您可以通過添加下面的JavaScript到您的網頁MVC3驗證與引導框架集成（查看）

<script> 
$(document).ready(function() { 
/* Bootstrap Fix */ 
$.validator.setDefaults({ 
    highlight: function (element) { 
     $(element).closest("div.control-group").addClass("error"); 
    }, 
    unhighlight: function (element) { 
     $(element).closest("div.control-group").removeClass("error"); 
    } 
}); 
var current_div; 
$(".editor-label, .editor-field").each(function() { 
    var $this = $(this); 
    if ($this.hasClass("editor-label")) { 
     current_div = $('<div class="control-group"></div>').insertBefore(this); 
    } 
    current_div.append(this); 
}); 
$(".editor-label").each(function() { 
    $(this).contents().unwrap(); 
}); 
$(".editor-field").each(function() { 
    $(this).addClass("controls"); 
    $(this).removeClass("editor-field"); 
}); 
$("label").each(function() { 
    $(this).addClass("control-label"); 
}); 
$("span.field-validation-valid, span.field-validation-error").each(function() { 
    $(this).addClass("help-inline"); 
}); 
$("form").each(function() { 
    $(this).addClass("form-horizontal"); 
    $(this).find("div.control-group").each(function() { 
     if ($(this).find("span.field-validation-error").length > 0) { 
      $(this).addClass("error"); 
     } 
    }); 
}); 
}); 
</script> 

此外，在意見（例如，「Create.cshtml」），確保在表單中的字段被格式化爲以下...

<div class="editor-label"> 
     @Html.LabelFor(Function(model) model.Name) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(Function(model) model.Name) 
     @Html.ValidationMessageFor(Function(model) model.Name) 
    </div> 

有了這個解決方案，它很可能是足以在沒有編輯視圖的情況下添加javascript。

Answer 7

我需要使用Bootstrap 3.1和Razor來解決這個問題。這是我用什麼：

$.validator.setDefaults({ 
    highlight: function (element) { 
     $(element).parents(".form-group").addClass("has-error"); 
    }, 
    unhighlight: function (element) { 
     $(element).parents(".form-group").removeClass("has-error"); 
    } 
}); 

$(function() { 

    $('span.field-validation-valid, span.field-validation-error').each(function() { 
     $(this).addClass('help-block'); 
    }); 

    $('form').submit(function() { 
     if ($(this).valid()) { 
      $(this).find('div.form-group').each(function() { 
       if ($(this).find('span.field-validation-error').length == 0) { 
        $(this).removeClass('has-error'); 
       } 
      }); 
     } 
     else { 
      $(this).find('div.form-group').each(function() { 
       if ($(this).find('span.field-validation-error').length > 0) { 
        $(this).addClass('has-error'); 
       } 
      }); 
     } 
    }); 

    $('form').each(function() { 
     $(this).find('div.form-group').each(function() { 
      if ($(this).find('span.field-validation-error').length > 0) { 
       $(this).addClass('has-error'); 
      } 
     }); 
    }); 
}); 

這是一個組合@德國的答案，從這個post有助於「theBraindonor」。更新爲使用新的Bootstrap 3類。