Razor MVC - When using @using (Html.Beginform()) the fields are not in front of each other

Question

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

Using the @using (Html.BeginForm()), this is my screen.

Without using the @using (Html.BeginForm()), this is my screen.

I can’t understand why this is affecting the visual part of the code.

@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")
}

Answer 1

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

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

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

Section B. "Element Prohibitions", says that:

 "form must not contain other form elements."

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

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