Razor MVC - When using @using (Html.BeginForm ()) fields do not stand in front of each other

0

I'm starting to study MVC + Razor and in basic CRUD example, I'm trying to put the fields in two columns, as if they were using in HTML. But my code only works if I remove the @using (Html.BeginForm()) .

Using @using (Html.BeginForm()) , my screen looks like this.

Withoutusing@using(Html.BeginForm()),myscreenremains.

Icannotunderstandwhythisisaffectingthevisualpartofthecode.

@modelVecchi_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")
}
    
asked by anonymous 09.09.2018 / 16:46

1 answer

1

Try removing the tag below. You are nesting form within form, which causes side effects:

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

In addition, when we use the BeginForm snippet, Razor will write the form tag in its HTML, therefore it is not necessary to put the form again, see documentation . Remembering that form within for is prohibited within HTML and XHTML standards.

Section B. "Element Prohibitions," says that:

 "form must not contain other form elements."

link

Reinforcing, the problem is not in Razor but in the HTML framework and Bootstrap CSS classes. See the bootstrap 4 guide or Bootstrap 3 how should a form's structure be

    
11.09.2018 / 02:29