0

Estou começando a estudar MVC + Razor e em exemplo de CRUD básico, estou tentando colocar os campos em duas colunas, como se estivesse usando em HTML. Porém meu código só funciona se eu retiro o @using (Html.BeginForm()).

Utilizando o @using (Html.BeginForm()), fica assim minha tela. Utilizando o @using (Html.BeginForm()), fica assim minha tela.

Sem utilizar o @using (Html.BeginForm()), fica assim minha tela.

@using (Html.BeginForm())

Não estou conseguindo entender porque isto está afetando a parte visual do código.

@model Vecchi_Igreja.Models.ViewModel.CadUsuarioViewModel

@{
   ViewBag.Title = "Cadastro de Usuário";
}

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

<div class="form-horizontal" style="margin-left: 15px;">
    <h4>Cadastro de Usuário</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                @Html.LabelFor(model => model.Nome, htmlAttributes: new { @class = "control-label col-md-2" })
                @Html.TextBoxFor(model => model.Nome, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Nome, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                @Html.LabelFor(model => model.Senha, htmlAttributes: new { @class = "control-label col-md-2" })
                @Html.PasswordFor(model => model.Senha, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Senha, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>

    <form role="form" class="form-inline">
        <div class="form-group">
            @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-1" })
            <div class="col-md-7">
                @Html.TextBoxFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
            </div>
            @Html.LabelFor(model => model.Ativo, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-1">
                @Html.CheckBoxFor(model => model.Ativo, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Ativo, "", new { @class = "text-danger" })
            </div>
        </div>
    </form>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-default" />
        </div>
    </div>
</div>
@*}*@

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
   @Scripts.Render("~/bundles/jqueryval")
}

1 Resposta 1

1

Tente remover a tag abaixo. Você está aninhando form dentro de form, o que provoca efeitos colaterais:

<form role="form" class="form-inline"> 

Além disso, quando utilizamos o snippet BeginForm o Razor vai escrever a tag form no seu HTML, consequentemente não é necessário colocar o form novamente, veja documentação. Lembrando que form dentro de for é proibido dentro dos padrões HTML e XHTML.

Seção B. "Element Prohibitions", diz que:

 "form must not contain other form elements."

http://www.w3.org/TR/xhtml1/#prohibitions

Reforçando, o problema não está no Razor e sim na estrutura do HTML e nas classes CSS do Bootstrap. Veja no guia do bootstrap 4 ou Bootstrap 3 como deve ser a estrutura de um formulário

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 .