Pergunta

Asp.Net MVC 2.0 pré-visualização constrói fornecer ajudantes como

Html.EditorFor(c => c.propertyname)

Se o nome da propriedade é uma string, o código acima torna um texbox.

E se eu quiser passar em MaxLength e propriedades de tamanho da caixa de texto ou a minha própria propriedade de classe css?

Eu preciso criar um modelo para cada tamanho e combinações comprimento na minha aplicação? Se assim for, isso não faz os modelos padrão que utilizável.

Foi útil?

Solução 11

I escreveu um blog para responder a minha própria pergunta

Adicionando html atributos suporte para modelos - ASP.Net MVC 2.0 Beta

Outras dicas

Em MVC3, você pode definir a largura da seguinte forma:

@Html.TextBoxFor(c => c.PropertyName, new { style = "width: 500px;" })

Eu resolvi isso criando um EditorTemplate chamado String.ascx na minha / Views / Shared / EditorTemplates pasta:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<string>" %>
<% int size = 10;
   int maxLength = 100;
   if (ViewData["size"] != null)
   {
       size = (int)ViewData["size"];
   }
   if (ViewData["maxLength"] != null)
   {
       maxLength = (int)ViewData["maxLength"];
   }
%>
<%= Html.TextBox("", Model, new { Size=size, MaxLength=maxLength }) %>

No meu ponto de vista, eu uso

<%= Html.EditorFor(model => model.SomeStringToBeEdited, new { size = 15, maxLength = 10 }) %>

funciona como um encanto para mim!

Nenhuma das respostas neste ou em qualquer outro segmento sobre como configurar atributos HTML para @ Html.EditorFor foram de grande ajuda para mim. No entanto, eu achei uma grande resposta em

Styling um @ Html.EditorFor ajudante

Eu usei a mesma abordagem e funcionou muito bem sem escrever um monte de código extra. Note-se que o atributo id da saída html de Html.EditorFor está definido. O código de exibição

<style type="text/css">
#dob
{
   width:6em;
}
</style>

@using (Html.BeginForm())
{
   Enter date: 
   @Html.EditorFor(m => m.DateOfBirth, null, "dob", null)
}

A propriedade modelo com anotação de dados e formatação de data como "dd MMM aaaa"

[Required(ErrorMessage= "Date of birth is required")]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd MMM yyyy}")]
public DateTime DateOfBirth { get; set; }

Trabalhou como um encanto sem escrever um monte de código extra. Esta resposta usa ASP.NET MVC 3 Navalha C #.

Pode querer olhar para Kiran Chand pós Blog , ele usa metadados personalizados sobre o modelo de visão, tais como:

[HtmlProperties(Size = 5, MaxLength = 10)]
public string Title { get; set; }

Isto é combinado com modelos personalizados que fazem uso de metadados. Uma abordagem simples e limpo na minha opinião, mas eu gostaria de ver este caso de uso comum embutido para MVC.

Eu sou surpreendido ninguém mencionou passá-lo em "additionalViewData" e lê-lo do outro lado.

Ver (com quebras de linha, para maior clareza):

<%= Html.EditorFor(c => c.propertyname, new
    {
        htmlAttributes = new
        {
            @class = "myClass"
        }
    }
)%>

template editor:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<string>" %>

<%= Html.TextBox("", Model, ViewData["htmlAttributes"])) %>

O problema é que seu modelo pode conter vários elementos HTML, então MVC não sabe a que aplicar o seu tamanho / aula. Você vai ter que defini-la a si mesmo.

Faça o seu derive modelo a partir de sua própria classe chamada TextBoxViewModel:

public class TextBoxViewModel
{
  public string Value { get; set; }
  IDictionary<string, object> moreAttributes;
  public TextBoxViewModel(string value, IDictionary<string, object> moreAttributes)
  {
    // set class properties here
  }
  public string GetAttributesString()
  {
     return string.Join(" ", moreAttributes.Select(x => x.Key + "='" + x.Value + "'").ToArray()); // don't forget to encode
  }

}

No modelo que você pode fazer isso:

<input value="<%= Model.Value %>" <%= Model.GetAttributesString() %> />

Na sua opinião você faz:

<%= Html.EditorFor(x => x.StringValue) %>
or
<%= Html.EditorFor(x => new TextBoxViewModel(x.StringValue, new IDictionary<string, object> { {'class', 'myclass'}, {'size', 15}}) %>

A primeira forma irá processar modelo padrão para string. A segunda forma irá tornar o modelo personalizado.

uso Sintaxe alternativa interface fluente:

public class TextBoxViewModel
{
  public string Value { get; set; }
  IDictionary<string, object> moreAttributes;
  public TextBoxViewModel(string value, IDictionary<string, object> moreAttributes)
  {
    // set class properties here
    moreAttributes = new Dictionary<string, object>();
  }

  public TextBoxViewModel Attr(string name, object value)
  {
     moreAttributes[name] = value;
     return this;
  }

}

   // and in the view
   <%= Html.EditorFor(x => new TextBoxViewModel(x.StringValue).Attr("class", "myclass").Attr("size", 15) %>

Observe que em vez de fazer isso na visualização, você também pode fazer isso no controlador, ou muito melhor no ViewModel:

public ActionResult Action()
{
  // now you can Html.EditorFor(x => x.StringValue) and it will pick attributes
  return View(new { StringValue = new TextBoxViewModel(x.StringValue).Attr("class", "myclass").Attr("size", 15) });
}

Além disso, observe que você pode fazer classe TemplateViewModel base - um terreno comum para todos os seus modelos de visão -. Que conterá suporte básico para atributos / etc

Mas, em geral eu acho MVC v2 precisa de uma solução melhor. É ainda Beta - Vá perguntar para ele; -)

Acho que usando CSS é o caminho a percorrer. Eu gostaria de poder fazer mais com .NET codificação, como em XAML, mas no navegador CSS é rei.

Site.css

#account-note-input { 
  width:1000px; 
  height:100px; 
} 

.cshtml

<div class="editor-label"> 
  @Html.LabelFor(model => model.Note) 
</div> 
<div class="editor-field"> 
  @Html.EditorFor(model => model.Note, null, "account-note-input", null) 
  @Html.ValidationMessageFor(model => model.Note) 
</div>

Joe

Em MVC 5, se você quiser adicionar qualquer atributos que você pode simplesmente fazer

 @Html.EditorFor(m => m.Name, new { htmlAttributes = new { @required = "true", @anotherAttribute = "whatever" } })

As informações encontradas a partir neste blog

Você pode definir atributos para as suas propriedades.

[StringLength(100)]
public string Body { get; set; }

Isto é conhecido como System.ComponentModel.DataAnnotations. Se você não consegue encontrar a ValidationAttribute que você precisa, você pode allways definir atributos personalizados.

Atenciosamente, Carlos

Esta não pode ser a solução mais liso, mas é simples. Você pode escrever uma extensão para a classe HtmlHelper.EditorFor. Em que extensão, você pode fornecer um parâmetro de opções que vai escrever as opções para o ViewData para o auxiliar. Aqui está algum código:

Em primeiro lugar, o método de extensão:

public static MvcHtmlString EditorFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression, TemplateOptions options)
{
    return helper.EditorFor(expression, options.TemplateName, new
    {
        cssClass = options.CssClass
    });
}

A seguir, as opções objeto:

public class TemplateOptions
{
    public string TemplateName { get; set; }
    public string CssClass { get; set; }
    // other properties for info you'd like to pass to your templates,
    // and by using an options object, you avoid method overload bloat.
}

E, finalmente, aqui é a linha a partir do modelo String.ascx:

<%= Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, new { @class = ViewData["cssClass"] ?? "" }) %>

Francamente, acho que isso é simples e clara para a pobre alma que tem de manter o seu código abaixo da estrada. E é fácil de se estender por vários outros pedaços de informação que você gostaria de passar para seus modelos. Está funcionando bem até agora para mim em um projeto onde eu estou tentando envolver tanto quanto eu posso em um conjunto de modelo para ajudar a padronizar o html circundante, a la http://bradwilson.typepad.com/blog/2009/10/ aspnet-MVC-2-templates-part-5-master-page-templates.html .

Eu não sei por que ele não funciona para Html.EditorFor mas eu tentei TextBoxFor e funcionou para mim.

@Html.TextBoxFor(m => m.Name, new { Class = "className", Size = "40"})

... e também de validação obras.

Na minha prática, eu descobri que é melhor usar EditorTemplates com apenas um HtmlHelper nele - TextBox que é na maioria dos casos. Se eu quiser um modelo para a estrutura html mais complexa, vou escrever um HtmlHelper separado.

Dado que nós pode furar todo o objeto ViewData no lugar de htmlAttributes da caixa de texto. Além disso, podemos escrever algum código de personalização para algumas das propriedades do ViewData se eles precisam de tratamento especial:

@model DateTime?
@*
    1) applies class datepicker to the input;
    2) applies additionalViewData object to the attributes of the input
    3) applies property "format" to the format of the input date.
*@
@{
    if (ViewData["class"] != null) { ViewData["class"] += " datepicker"; }
    else { ViewData["class"] = " datepicker"; }
    string format = "MM/dd/yyyy";
    if (ViewData["format"] != null)
    {
        format = ViewData["format"].ToString();
        ViewData.Remove("format");
    }
}

@Html.TextBox("", (Model.HasValue ? Model.Value.ToString(format) : string.Empty), ViewData)

A seguir estão exemplos da sintaxe a vista e o html emitido:

@Html.EditorFor(m => m.Date)
<input class="datepicker" data-val="true" data-val-required="&amp;#39;Date&amp;#39; must not be empty." id="Date" name="Date" type="text" value="01/08/2012">
@Html.EditorFor(m => m.Date, new { @class = "myClass", @format = "M/dd" })
<input class="myClass datepicker" data-val="true" data-val-required="&amp;#39;Date&amp;#39; must not be empty." id="Date" name="Date" type="text" value="1/08">

Como a questão é para EditorFor não a sugestão de TextBoxFor WEFX não funciona.

Para alterar caixas de entrada individuais, você pode processar a saída do método EditorFor:

<%: new HtmlString(Html.EditorFor(m=>m.propertyname).ToString().Replace("class=\"text-box single-line\"", "class=\"text-box single-line my500pxWideClass\"")) %>

Também é possível alterar a sua EditorFors como se vê MVC define a classe de caixas de texto EditorFor com .text-box , portanto, você pode simplesmente substituir esse estilo, na sua folha de estilo ou em a página.

.text-box {
    width: 80em;
}

Além disso, você pode definir o estilo de

input[type="text"] {
    width: 200px;
}
  • Isso substitui .Text-box e vai mudar todas as caixas de texto de entrada, EditorFor ou de outra forma.

I problema também teve com definindo a largura da caixa de texto no MVC3, ao definir o atributo Clsss trabalhou para o controle TextArea, mas não para o controle TextBoxFor ou controle EditorFor:

Eu tentei seguir e que funcionou para mim:

@ Html.TextBoxFor (modelo => model.Title, new {class = "textBox", style = "width: 90%;"})

Também neste caso validações estão funcionando perfeitamente.

Uma maneira que você poderia contornar isso é por ter delegados sobre o modelo de vista a alça imprimir prestação especial como este. Eu fiz isso para uma classe de paginação, eu expor uma propriedade pública sobre o modelo Func<int, string> RenderUrl para lidar com ele.

Assim, definir como o bit personalizado será escrito:

Model.Paging.RenderUrl = (page) => { return string.Concat(@"/foo/", page); };

Saída a visão para a classe Paging:

@Html.DisplayFor(m => m.Paging)

... e para a visão real Paging:

@model Paging
@if (Model.Pages > 1)
{
    <ul class="paging">
    @for (int page = 1; page <= Model.Pages; page++)
    {
        <li><a href="@Model.RenderUrl(page)">@page</a></li>
    }
    </ul>
}

Pode ser visto como questões de excesso de complicadores mas eu uso esses pagers em todos os lugares e não poderia estar vendo o mesmo código clichê para obtê-los renderizado.

UPDATE: hm, obviamente, isso não vai funcionar porque o modelo é passado por valor tão atributos não são preservadas; mas deixo essa resposta como uma idéia.

Outra solução, eu acho, seria para adicionar seu próprio TextBox / etc ajudantes, que irá verificar seus próprios atributos do modelo.

public class ViewModel
{
  [MyAddAttribute("class", "myclass")]
  public string StringValue { get; set; }
}

public class MyExtensions
{
  public static IDictionary<string, object> GetMyAttributes(object model)
  {
     // kind of prototype code...
     return model.GetType().GetCustomAttributes(typeof(MyAddAttribute)).OfType<MyAddAttribute>().ToDictionary(
          x => x.Name, x => x.Value);
  }
}

<!-- in the template -->
<%= Html.TextBox("Name", Model, MyExtensions.GetMyAttributes(Model)) %>

Este é mais fácil, mas não tão conveniente / flexível.

Esta é a maneira mais limpa e mais elegante / simples para obter uma solução aqui.

Brilliant post e nenhum exagero confuso por escrito métodos extensão personalizada / auxiliares como um professor louco.

http: // geekswithblogs.net/michelotti/archive/2010/02/05/mvc-2-editor-template-with-datetime.aspx

Eu realmente gostei @tjeerdans resposta que utiliza o EditorTemplate chamado String.ascx nos / views / EditorTemplates pasta Shared /. Parece ser a resposta mais direta a esta pergunta. No entanto, eu queria um modelo usando a sintaxe Navalha. Além disso, parece que MVC3 usa o modelo String como um " modelo de exibição MVC para cordas é usado para inteiros "), de modo que você precisa para definir o modelo de objeto em vez de corda . Meu modelo parece estar funcionando até agora:

@model object 

@{  int size = 10; int maxLength = 100; }

@if (ViewData["size"] != null) {
    Int32.TryParse((string)ViewData["size"], out size); 
} 

@if (ViewData["maxLength"] != null) {
    Int32.TryParse((string)ViewData["maxLength"], out maxLength); 
}

@Html.TextBox("", Model, new { Size = size, MaxLength = maxLength})

Eu resolvi !!
Para Navalha a sintaxe é:
@Html.TextAreaFor(m=>m.Address, new { style="Width:174px" }) Ajusta a largura da área de texto para a largura que i definido no parâmetro de estilo.
Para ASPx a sintaxe é:
<%=Html.TextAreaFor(m => m.Description, new { cols = "20", rows = "15", style="Width:174px" })%>
isso irá fazer o truque

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top