2013-03-13 168 views
0

如果[必需]屬性修飾我的ViewModel屬性,我想要做的是自動將圖像跨度添加到我的輸入文本框之後,無論它是整數,雙精度,字符串,日期等基於ViewModel Dataannotation屬性的自定義編輯器模板MVC4

例如,我的視圖模型可能看起來像

public class MyViewModel 
{ 
    [Required] 
    public string Name { get; set; } 
} 

我查看會是什麼樣子

@Html.EditorFor(model => model.Name) 
@Html.ValidationMessageFor(model => model.Name) 

,輸出會是這樣的

<input id="Name" class="text-box single-line" type="text" value="" name="Name" data-val-required="The Name field is required." data-val-length-max="20" data-val-length="The field Name must be a string with a maximum length of 20." data-val="true"> 
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="Name"></span> 

-- Note the automatically added span 
<span class="indicator required" style="width: 11px;"></span> 

我打算有一些CSS,將顯示圖像即

span.required { 
    background-image: url("required.png"); 
} 

這是可以做到的還是我需要創建自己的Helper方法實現這種類型的功能?

回答

2

是的,這是可能的,但一般我不會推薦它,因爲模板是真的有自定義類型的渲染,你應該能夠在不若覆蓋另一個令人擔憂的模板來創建模板。

我反而會創建一個自定義LabelFor幫手,如這裏所描述的:

http://weblogs.asp.net/imranbaloch/archive/2010/07/03/asp-net-mvc-labelfor-helper-with-htmlattributes.aspx

或在這裏:

http://weblogs.asp.net/raduenuca/archive/2011/02/17/asp-net-mvc-display-visual-hints-for-the-required-fields-in-your-model.aspx

第三個選擇是不會做任何事情MVC,而是添加一些JavaScript,基於標準的MVC驗證數據屬性添加指標(如果您使用不顯眼的驗證)。看到這裏的答案:

https://stackoverflow.com/a/8524547/61164

+0

謝謝我會看看 – dreza 2013-03-13 04:36:39

1

我所做的是修改jquery.validate.unobtrusive JS文件添加第二個容器,專門爲你的圖片,如果有一個驗證錯誤。

var container2 = $(this).find("[data-valimg-for='" + escapeAttributeValue(inputElement[0].name) + "']"), 
     replace = $.parseJSON(container.attr("data-valimg-replace")) !== false; 

    container2.removeClass("img-validation-valid").addClass("img-validation-error"); 

那就不要忘了將它綁定到模型:

error.data("unobtrusiveContainer", container2); 

最後,空它在if(替換)代碼塊:

if (replace) { 
     container.empty(); 
     container2.empty(); 
     error.removeClass("input-validation-error").appendTo(container);    
    } 
    else { 
     error.hide(); 
    } 

成功時,請記住隱藏它:

var container2 = error.data("unobtrusiveContainer"), 
     replace = $.parseJSON(container.attr("data-valimg-replace")); 

    if (container2) { 
     container2.addClass("img-validation-valid").removeClass("img-validation-error"); 
     error.removeData("unobtrusiveContainer"); 

     if (replace) { 
      container2.empty(); 
     } 
    } 

如果你看看在文件中的onError和onSuccess函數中,你應該能夠找到你可以放入的位置。

在您看來,下面的代碼行添加到每個表單輸入有驗證爲:

<img class="img-validation-valid" data-valimg-replace="true" data-valimg-for="<replace with field name here, ie. Name>" src="required.png" /> 

我只用[Required]屬性測試這一點,但它的工作原理。我也很肯定你可以用它來產生其他的東西,而不僅僅是圖像。

+0

乾杯朱利安,我會試一試,讓你知道我想出了什麼 – dreza 2013-03-13 04:36:58

+1

我不會修改jquery.unobtrusive.js,因爲這個文件從時間更新到時間,你將不得不重新應用更改。更好的解決方案是隻使用jQuery與現有的屬性。 – 2013-03-13 06:58:22

+0

是的,如果有辦法通過外部腳本文件添加這些更改,就像簡單地擴展這兩個函數一樣,那會更好。 – 2013-03-13 08:13:47

相關問題