how to call a form tag design in asp.net mvc?
Question
In my asp.net Mvc Form when i use Html.BeginForm the value present in the <form id="example-form" action="#" class="form-wizard"> tag design is not working below i have attached the source code..
<section class="box-typical box-panel mb-4">
<header class="box-typical-header">
<div class="tbl-row">
<div class="tbl-cell tbl-cell-title">
<h3>Company Registration Form</h3>
</div>
</div>
</header>
@using (Html.BeginForm("AddCompany", "Company", FormMethod.Post))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<div class="box-typical-body">
<form id="example-form" action="#" class="form-wizard">
<div>
<h3>Company Registration</h3>
<section>
<div class="row">
<div class="col-lg-4">
<fieldset class="form-group">
@Html.LabelFor(model => model.CompanyName, new { @class = "form-label semibold" })
@Html.TextBoxFor(model => model.CompanyName, new { @class = "form-control", placeholder = "Enter the Company Name" })
@Html.ValidationMessageFor(model => model.CompanyName)
</fieldset>
</div>
<div class="col-lg-4">
<fieldset class="form-group">
@Html.LabelFor(model => model.ShortName, new { @class = "form-label semibold" })
@Html.TextBoxFor(model => model.ShortName, new { @class = "form-control", placeholder = "Enter the Short Name" })
@Html.ValidationMessageFor(model => model.ShortName)
</fieldset>
</div>
<div class="col-lg-4">
<fieldset class="form-group">
@Html.LabelFor(model => model.Division, new { @class = "form-label semibold" })
@Html.TextBoxFor(model => model.Division, new { @class = "form-control", placeholder = "Enter the Division" })
@Html.ValidationMessageFor(model => model.Division)
</fieldset>
</div>
</div><!--.row-->
<div class="row">
<div class="col-lg-4">
<fieldset class="form-group">
@Html.LabelFor(model => model.Email, new { @class = "form-label semibold" })
@Html.TextBoxFor(model => model.Email, new { @class = "form-control", placeholder = "Enter your Email" })
@Html.ValidationMessageFor(model => model.Email)
</fieldset>
</div>
<div class="col-lg-4">
<fieldset class="form-group">
@Html.LabelFor(model => model.ShortName, new { @class = "form-label semibold" })
@Html.TextBoxFor(model => model.ShortName, new { @class = "form-control", placeholder = "Enter the Short Name" })
@Html.ValidationMessageFor(model => model.ShortName)
</fieldset>
</div>
<div class="col-lg-4">
<fieldset class="form-group">
@Html.LabelFor(model => model.Division, new { @class = "form-label semibold" })
@Html.TextBoxFor(model => model.Division, new { @class = "form-control", placeholder = "Enter the Division" })
@Html.ValidationMessageFor(model => model.Division)
</fieldset>
</div>
<input type="submit" value="Create" class="btn btn-default" />
</div><!--.row-->
</section>
<h3>Company Reference</h3>
<section>
<div class="form-group">
<label for="exampleInputEmail1">Address</label>
<input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter text" required>
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
</section>
@*<h3>Company Social Network</h3>
<section>
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Foobar</li>
</ul>
</section*@>
<h3>Company Social Network</h3>
<section>
<div class="form-group">
<div class="checkbox">
<input type="checkbox" id="agree" class="required" required>
<label for="agree">Terms and Conditions</label>
</div>
</div>
</section>
</div>
</form>
</div><!--.box-typical-body-->
}
</section>
And CSS Code
.wizard .form-group.has-error .form-control{background-color:#fff6f6;border-color:#f84646}.wizard .form-group.has-error .error{margin-top:3px}.wizard .current-info{display:none}.wizard .steps li{display:inline-block;-webkit-border-radius:25rem;border-radius:25rem;margin-right:20px}.wizard .steps li a{font-size:20px;font-weight:600;padding:8px 20px;display:block;color:#818181}.wizard .steps li.done{background:#adb7bf}.wizard .steps li.done a{color:#fff}.wizard .steps li.current{background:#00a6ff}.wizard .steps li.current a{color:#fff}.wizard .steps li:last-child{margin-right:0}.wizard>.content{position:relative;margin-top:30px;border:2px solid #dbe4eb;-webkit-border-radius:6px;border-radius:6px;display:block;min-height:15em;overflow:hidden;width:auto}.tabcontrol>.content>.title,.wizard>.content>.title{position:absolute;left:-999em}.wizard>.content>.body{float:left;top:0;width:100%;height:100%;padding:22px}.wizard>.actions{position:relative;display:block;text-align:right;width:100%;margin-top:30px}.wizard>.actions li{display:inline-block;margin-left:20px}.wizard>.actions li a{display:block;color:#fff;background-color:#00a8ff;font-size:20px;font-weight:600;padding:8px 20px;-webkit-border-radius:25rem;border-radius:25rem}.wizard>.actions li:last-child{margin-right:0}.wizard>.actions li.disabled a{opacity:.5}.wizard .steps li.error{background:#f84646}.wizard .steps li.error a{color:#fff}.wizard .steps li.error a .number{color:#fff!important}.form-wizard .wizard>.content{border:none!important;min-height:17em}.form-wizard .wizard>.content>.body{padding:0}.wizard.vertical .steps{float:left;width:15%;margin-top:15px;padding-right:20px}.wizard.vertical .steps li{display:block!important;margin-bottom:20px}.wizard.vertical .steps li:last-child{margin-right:20px}.wizard.vertical .actions{margin-top:15px;float:right}.wizard.vertical .content{margin-top:15px;float:left;width:85%}.clearfix:after,.clearfix:before{display:table;content:"";line-height:0;clear:both}
3 answers
solution1
1 ACCPTED 2017-09-14 15:57:40
Html.BeginForm creates the <form> tags for you. So you don't have to add them manually. And since you want some attributes on the form element, you can assign them like this: (Make sure your <div class="box-typical-body"> is outside, because you want that div to wrap your form)
<header class="box-typical-header">
<div class="tbl-row">
<div class="tbl-cell tbl-cell-title">
<h3>Company Registration Form</h3>
</div>
</div>
</header>
<div class="box-typical-body">
@using (Html.BeginForm("AddCompany", "Company", FormMethod.Post, htmlAttributes: new { id = "example-form", @class = "form-wizard" }))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<div>
<h3>Company Registration</h3>
<section>
.....
.....
</div>
} // form end tag will be rendered here
</div>
solution2
0 2017-09-14 15:24:23
why adding the additional form tag inside the form tag already generated by Html.BeginForm() helper?
The Html.BeginForm() extension will generated the form tags for you. so you need not to add it manually again.
See this
@using (Html.BeginForm("AddCompany", "Company", FormMethod.Post, new {id="example-form", @class="class="form-wizard"}))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<div class="box-typical-body">
<div>
<h3>Company Registration</h3>
<section>
<div class="row">
<div class="col-lg-4">
<fieldset class="form-group">
@Html.LabelFor(model => model.CompanyName, new { @class = "form-label semibold" })
@Html.TextBoxFor(model => model.CompanyName, new { @class = "form-control", placeholder = "Enter the Company Name" })
@Html.ValidationMessageFor(model => model.CompanyName)
</fieldset>
</div>
<div class="col-lg-4">
<fieldset class="form-group">
@Html.LabelFor(model => model.ShortName, new { @class = "form-label semibold" })
@Html.TextBoxFor(model => model.ShortName, new { @class = "form-control", placeholder = "Enter the Short Name" })
@Html.ValidationMessageFor(model => model.ShortName)
</fieldset>
</div>
<div class="col-lg-4">
<fieldset class="form-group">
@Html.LabelFor(model => model.Division, new { @class = "form-label semibold" })
@Html.TextBoxFor(model => model.Division, new { @class = "form-control", placeholder = "Enter the Division" })
@Html.ValidationMessageFor(model => model.Division)
</fieldset>
</div>
</div><!--.row-->
<div class="row">
<div class="col-lg-4">
<fieldset class="form-group">
@Html.LabelFor(model => model.Email, new { @class = "form-label semibold" })
@Html.TextBoxFor(model => model.Email, new { @class = "form-control", placeholder = "Enter your Email" })
@Html.ValidationMessageFor(model => model.Email)
</fieldset>
</div>
<div class="col-lg-4">
<fieldset class="form-group">
@Html.LabelFor(model => model.ShortName, new { @class = "form-label semibold" })
@Html.TextBoxFor(model => model.ShortName, new { @class = "form-control", placeholder = "Enter the Short Name" })
@Html.ValidationMessageFor(model => model.ShortName)
</fieldset>
</div>
<div class="col-lg-4">
<fieldset class="form-group">
@Html.LabelFor(model => model.Division, new { @class = "form-label semibold" })
@Html.TextBoxFor(model => model.Division, new { @class = "form-control", placeholder = "Enter the Division" })
@Html.ValidationMessageFor(model => model.Division)
</fieldset>
</div>
<input type="submit" value="Create" class="btn btn-default" />
</div><!--.row-->
</section>
<h3>Company Reference</h3>
<section>
<div class="form-group">
<label for="exampleInputEmail1">Address</label>
<input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter text" required>
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
</section>
@*<h3>Company Social Network</h3>
<section>
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Foobar</li>
</ul>
</section*@>
<h3>Company Social Network</h3>
<section>
<div class="form-group">
<div class="checkbox">
<input type="checkbox" id="agree" class="required" required>
<label for="agree">Terms and Conditions</label>
</div>
</div>
</section>
</div>
</div><!--.box-typical-body-->
}
solution3
0 2017-09-14 15:24:54
So, you cannot nest form elements inside other form elements . For example, this is not allowed, and browsers will remove the nested form element:
<form id="outer-form">
<div id="first-div">
<form id="inner-form">
<div id="second-div">
</div>
</form>
</div>
</form>
Most browsers will instead only show you this:
<form id="outer-form">
<div id="first-div">
<div id="second-div">
</div>
</div>
</form>
Now, your above snippet is doing this:
@using (Html.BeginForm("AddCompany", "Company", FormMethod.Post))
{
. . .
<div class="box-typical-body">
<form id="example-form" action="#" class="form-wizard">
</form>
</div>
}
Html.BeginForm renders out a <form> tag. When disposed, it will also render out the </form> end tag, which is why it's wrapped in a using. Therefore, these are equivalent:
Razor:
@using (Html.BeginForm("AddCompany", "Company", FormMethod.Post))
{
}
Resulting HTML:
<form action="/Company/AddCompany" method="post">
</form>
As in, you don't need to create a <form> tag manually if your using Html.BeginForm and vice versa. That means, you should simplify your CSHTML to:
@using (Html.BeginForm("AddCompany", "Company", FormMethod.Post, new { id="example-form", @class="form-wizard" }))
{
. . .
<div class="box-typical-body">
<!-- Put rest of form contents here -->
</div>
}
This should fix the issue with the form tags not rendering properly.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
what is the best way to design a wizard form in ASP.NET MVC
How to call API in asp.net MVC
How to increase the width of ASP.NET MVC Select tag helper inside form
Call form OnFailure handler from controller, ASP.NET MVC
Call javascript function after form validation ASP.NET MVC
How to call asp.net mvc form submit event which use ajax after button click and validate?
How to call controller method from asp.net mvc Login Form using Ajax before submit
ASP.NET MVC Dynamic Design
Asp.net MVC membership design
ASP.NET MVC design issue
Related Tags