2

Eu já tenho um formulário que faz um cadastro, quero adicionar um campo a mais nele onde o usuário vai fazer o upload de uma foto, quero fazer tudo no mesmo submit.

Minha VM VMDominioCreate:

    public class VMDominioCreate
    {

        [Required]
        [StringLength(200)]
        [Display(Name = "URL")]
        public string url { get; set; }

        [Display(Name = "ID C")]
        [StringLength(100)]
        public string idC { get; set; } 

        [Display(Name = "ID S")]
        [StringLength(100)]
        public string idS { get; set; } 

    }

Meu metodo que recebe o create:

        public async Task<ActionResult> Create(VMDominioCreate d)
        {
            if (ModelState.IsValid)
            {
              ....
            }
          
          }

Meu formulário:

@using (Html.BeginForm())
            {
                    @Html.AntiForgeryToken()

                    <div class="row">
                        
                        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

                        <div class="form-group col-lg-4">
                            @Html.LabelFor(model => model.url)
                            @Html.EditorFor(model => model.url, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.url, "", new { @class = "text-danger" })
                        </div>

                        <div class="form-group col-lg-4">
                            @Html.LabelFor(model => model.idC)
                            @Html.EditorFor(model => model.idC, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.idC, "", new { @class = "text-danger" })
                        </div>

                        <div class="form-group col-lg-4">
                            @Html.LabelFor(model => model.idS)
                            @Html.EditorFor(model => model.idS, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.idS, "", new { @class = "text-danger" })
                        </div>

                        


                        <div class="clearfix"></div>
                        <div class="form-group col-lg-12">
                            <input type="submit" value=@Resources.Create class="btn btn-default" />
                        </div>
                    </div>
                }

Tudo isso funciona perfeitamente. Eu quero incluir o seguinte:

Um campo a mais na VM:

[Required]
public HttpPostedFileBase File { get; set; }

E a entrada a mais no formulário:

<div class="form-group col-lg-4">
                            @Html.LabelFor(model => model.File)
                            @Html.EditorFor(model => model.File, new { htmlAttributes = new { @class = "form-control" }})
                            @Html.ValidationMessageFor(model => model.File, "", new { @class = "text-danger" })
                        </div>

Aí vem o problema, em vez dele gerar um botão de localizar arquivo ele gera 3 texts boxs (ContentLength, ContentType e FileName). O que não me atende.

O que eu estou fazendo de errado?

Eu quero que ele crie um botão de localizar arquivo e quando eu fizer o submit do form ele jogue a imagem junto.

ATUALIZAÇÃO

Tentei o que foi sugerido no comentário (incluir @type="file") e obtive o seguinte resultado:

Agora em vez de três text boxs ele mostrou o botão de selecionar arquivo, mas ainda continua mostrando 3 botões, como antes mostrava 3 text boxs. Os botões vem com os mesmos labels (ContentLength, ContentType e FileName).

ATUALIZAÇÃO

Nova tentativa com:

@Html.TextBoxFor(model => model.File, new { htmlAttributes = new { @class = "form-control", @type="file" }})

Ele exibe um único text box, não é mais um botão de selecionar o arquivo, mas pelo menos não aparecem os 3 campos.

Coloquei um diretório de um arquivo no text box e mandei submeter, o campo continua nulo.

5
  • Informe no htmlAttributes = @type="file"
    – Rod
    2/11/2015 às 22:22
  • Tentei, coloquei o resultado na pergunta como atualização pois teve meio resultado.
    – Ricardo
    2/11/2015 às 22:27
  • Tente utilizar @TextBoxFor, também verifique o enctype do seu form
    – Rod
    2/11/2015 às 22:31
  • Coloquei o resultado na resposta, não sei o que seria o enctype, estou usando um @using (Html.BeginForm()) padrão.
    – Ricardo
    2/11/2015 às 22:38
  • @veja a resposta, é isso que precisa
    – Rod
    2/11/2015 às 22:52

1 Resposta 1

3

Utilize TextBoxFor para criar o input

@Html.TextBoxFor(model=>model.File, null, new { type="file", @class="form-control" })

Para o envio de qualquer tipo de arquivo, seu formulário deve conter também o atributo enctype

@using (Html.BeginForm("ACTION", "CONTROLLER", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    //inputs aqui
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .