ASP.NET MVC HTML yardımcı yöntemler

Question

HTML5 things such as için input fields yeni bir dizi desteklemek için görünür:

URL'ler

• Numaraları
• E-posta adresleri
• Renkler
• Sayısal aralık (bir sürgü yoluyla)
• Tarihler
• Arama kutuları

kimse bunlar henüz oluşturduğu ASP.NET MVC için HtmlHelper uzatma yöntemleri uygulamış? Bu gibi htmlAttributes kabul aşırı yüklenmeye kullanarak bunu yapmak mümkündür:

Html.TextBoxFor(model => model.Foo, new { type="number", min="0", max="100" }) 

Ama bu kadar güzel (veya türgüvenli) değil:

Html.NumericInputFor(model => model.Foo, min:0, max:100) 

Answer 1

Bunlardan çoğu, şimdi DataType özniteliğini kullanarak MVC4'e dahil edilmiştir.

this work item itibariyle kullanabilirsiniz:

public class MyModel 
{ 
    // Becomes <input type="number" ... > 
    public int ID { get; set; } 

    // Becomes <input type="url" ... > 
    [DataType(DataType.Url)] 
    public string WebSite { get; set; } 

    // Becomes <input type="email" ... > 
    [DataType(DataType.EmailAddress)] 
    public string Email { get; set; } 

    // Becomes <input type="tel" ... > 
    [DataType(DataType.PhoneNumber)] 
    public string PhoneNumber { get; set; } 

    // Becomes <input type="datetime" ... > 
    [DataType(DataType.DateTime)] 
    public DateTime DateTime { get; set; } 

    // Becomes <input type="date" ... > 
    [DataType(DataType.Date)] 
    public DateTime Date { get; set; } 

    // Becomes <input type="time" ... > 
    [DataType(DataType.Time)] 
    public DateTime Time { get; set; } 
} 

Answer 2

Geliş Sadece ASP.net MVC HTML5 Helpers Toolkit

Answer 3

Love it modelin kapalı şeyler bu tip sürebilirim ne zaman !! Modellerimi [DataType(DataType.PhoneNumber)] ile dekore ettim ve hepsi çalıştı.

@Html.TextBoxFor'un type="<HTML5 type>" görüntülemesinin zor yolunu anladım ancak @Html.EditorFor yapar. Bunu düşünmek, ama belki başkalarına Sadece kayıp sinir bozucu birkaç dakika kaydetmek için bu yayınlayarak şimdi sanırım mantıklı;)

i Nitelikler yaklaşık datatypes sevmiyorum Ne

Answer 4

u kullanmak zorunda olmasıdır Görünümde EditorFor. Ardından, etiketinizi süslemek için htmlAttributes'u kullanamazsınız. Başka çözümler var ama ben bu yolu tercih ederim.

Bu örnekte en çok kullandığım imzayı genişlettim. Yani sınıfta

:

using System.Linq.Expressions; 
namespace System.Web.Mvc.Html 
{ 
    public static class HtmlExtensions 
    { 
     public static MvcHtmlString EmailFor<TModel, TProperty>(this HtmlHelper<TModel> html, Expression<Func<TModel, TProperty>> expression, Object htmlAttributes) 
     { 
      MvcHtmlString emailfor = html.TextBoxFor(expression, htmlAttributes); 
      return new MvcHtmlString(emailfor.ToHtmlString().Replace("type=\"text\"", "type=\"email\"")); 
     } 
    } 
} 

Eğer ben sadece type = "email" için type = "text" olarak değiştirildi ve daha sonra benim görünümünde kullanabilirsiniz Gördüğünüz gibi:

<div class="form-group">    
     @Html.LabelFor(m => m.Email, new { @class = "col-lg-2 control-label" }) 
     <div class="col-lg-10"> 
      @Html.EmailFor(m => m.Email, new { @class = "form-control", placeholder = "Email" }) 
      @Html.ValidationMessageFor(m => m.Email)         
     </div>    
    </div> 

ve html kaynağı verir:

<div class="form-group">    
    <label class="col-lg-2 control-label" for="Email">Email</label> 
    <div class="col-lg-10"> 
     <input class="form-control" data-val="true" data-val-required="The Email field is required." id="Email" name="Email" placeholder="Email" type="email" value="" /> 
     <span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>         
    </div>    
</div> 

Answer 5

kolay yolu basitçe bir html niteliği olarak type = "E-posta" eklemektir. Varsayılan type = "text" öğesini geçersiz kılar.Burada ayrıca html5 doğrulayıcı ile bir örnektir:

Bir HtmlHelper gelen <input type='number' /> kullanırken olsun spinner benim öz numarasını isteyen buldum ve kendime çözmeye sona

@Html.TextBox("txtEmail", "", new { placeholder = "email here", @required = "", @type="email" }) 

Answer 6

.

RPAlbert'in Html.EmailFor yanıtına benzer bir şekilde, normal Html.TextBoxFor'u kullanarak kullanmaya başladım, ancak daha sonra bir dize yerine HTML'yi değiştirmek için LinqToXml kullandım.

Html.TextBoxFor ile başlatmanın avantajı, MVC'nin sizin için yaptığı tüm istemci tarafı doğrulama maddelerini kullanabilmenizdir. Bu durumda, çeviriciyi sınırlamak için gerekli olan min/max özniteliklerini ayarlamak için data-val-range özniteliklerinden değerleri kullanıyorum.

public static HtmlString SpinnerFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression, object htmlAttributes) 
{ 
    XDocument _xml = XDocument.Parse(html.TextBoxFor(expression, htmlAttributes).ToString()); 
    XElement _element = _xml.Element("input"); 

    if (_element != null) 
    { 
     _element.SetAttributeValue("type", "number"); 

     if (_element.Attribute("data-val-range-max") != null) 
      _element.SetAttributeValue("max", _element.Attribute("data-val-range-max").Value); 

     if (_element.Attribute("data-val-range-min") != null) 
      _element.SetAttributeValue("min", _element.Attribute("data-val-range-min").Value); 
    } 

    return new HtmlString(_xml.ToString()); 
} 

Daha sonra olarak kullanmak

yapacağınız görüşleriniz başka HtmlHelper:

@Html.SpinnerFor(model => model.SomeNumber, new { htmlAttribute1 = "SomeValue" })

Seni istediğini görebilirsiniz soru gelen bu onun benim uygulanması, yine de oldu:

@Html.NumericInputFor(model => model.Foo, min:0, max:100)

O şöyle bunu yapmak benim yöntemi çimdik çok basit olacaktır:

public static HtmlString NumericInputFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression, int min, int max) 
{ 
    XDocument _xml = XDocument.Parse(html.TextBoxFor(expression, htmlAttributes).ToString()); 
    XElement _element = _xml.Element("input"); 

    if (_element != null) 
    { 
     _element.SetAttributeValue("type", "number"); 
     _element.SetAttributeValue("min", min); 
     _element.SetAttributeValue("max", max); 
    } 

    return new HtmlString(_xml.ToString()); 
} 

Temelde ben ve yapılan tüm yeniden adlandırmak ve DataAnnotation niteliklerini onları almak yerine argümanlar olarak min/max sağlamaktır.

Umarım bu yardımcı olur!