CODEWITHSUNDEEP
cssasp.net-mvc-5bootstrap-4
Ron
Ron

Reputation: 1931

Bootstrap display of Form

This is not making sense to me. I am trying to display a form on my MVC5 project with 4 input fields. When i am not using the @using (HTML.BeginForm(...){..}

@using (Html.BeginForm("Create", "HR", FormMethod.Post)) {

my display looks perfect enter image description here

but once i put in the @using (HTML.BeginForm(..) statement, then the display looks like this: enter image description here

Where am I going wrong in my html helper ?

Here are some sample html helper methods i am using..

<div class="panel-group">
<div class="panel panel-primary">
    <div class="panel-heading"><h4>Create New Employee</h4></div>
    <div class="panel-body"> 
        <form class="form-horizontal">
     <div class="form-group">
                    <label class="control-label col-sm-2">First Name</label>
                    <div class="col-sm-10"> 
                        @Html.TextBoxFor(m => m.FirstName, new { @class = "form-control", placeholder = "Enter First Name" })
                    </div>
             </div>
     <div class="form-group">
                    <label class="control-label col-sm-2" for="pwd">Middle Name</label>
                    <div class="col-sm-10"> 
                        @Html.TextBoxFor(m => m.MiddleName, new { @class = "form-control", placeholder = "Enter Middle Name" })
                    </div>
             </div>
     </form> 
  </div>
   </div>

Upvotes: 3

Views: 1261

Answers (1)

Matt Spinks
Matt Spinks

Reputation: 6698

Looks like you are losing your class attribute when using @Html.BeginForm. Add it back like so:

<div class="panel-group">
<div class="panel panel-primary">
    <div class="panel-heading"><h4>Create New Employee</h4></div>
    <div class="panel-body"> 
    @using (Html.BeginForm("ActionName", "ControllerName", FormMethod.Post, new { @class="form-horizontal" }))
    {
     <div class="form-group">
                    <label class="control-label col-sm-2">First Name</label>
                    <div class="col-sm-10"> 
                        @Html.TextBoxFor(m => m.FirstName, new { @class = "form-control", placeholder = "Enter First Name" })
                    </div>
             </div>
     <div class="form-group">
                    <label class="control-label col-sm-2" for="pwd">Middle Name</label>
                    <div class="col-sm-10"> 
                        @Html.TextBoxFor(m => m.MiddleName, new { @class = "form-control", placeholder = "Enter Middle Name" })
                    </div>
             </div>
     }
  </div>
</div>

Upvotes: 2

Related Questions