如何在asp.net mvc 中调用表单标签设计？
how to call a form tag design in asp.net mvc?
在我的 asp.net Mvc 表单中，当我使用 Html.BeginForm 时，<form id="example-form" action="#" class="form-wizard"> 标签设计中存在的值在下面不起作用，我附上了源代码..
<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>
和CSS代码
.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}
为什么要在 Html.BeginForm() 助手已经生成的表单标签中添加额外的表单标签？
Html.BeginForm() 扩展将为您生成表单标签。因此您无需再次手动添加它。
看到这个
@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-->
}
所以，you cannot nest form elements inside other form elements。例如，这是不允许的，浏览器将移除嵌套的表单元素：
<form id="outer-form">
<div id="first-div">
<form id="inner-form">
<div id="second-div">
</div>
</form>
</div>
</form>
大多数浏览器只会向您显示：
<form id="outer-form">
<div id="first-div">
<div id="second-div">
</div>
</div>
</form>
现在，您上面的代码片段正在执行此操作：
@using (Html.BeginForm("AddCompany", "Company", FormMethod.Post))
{
. . .
<div class="box-typical-body">
<form id="example-form" action="#" class="form-wizard">
</form>
</div>
}
Html.BeginForm 渲染出一个 <form> 标签。处理后，它还会渲染出 </form> 结束标记，这就是它被包装在 using 中的原因。因此，这些是等价的：
剃须刀：
@using (Html.BeginForm("AddCompany", "Company", FormMethod.Post))
{
}
结果HTML：
<form action="/Company/AddCompany" method="post">
</form>
例如，如果您使用 Html.BeginForm，则无需手动创建 <form> 标签，反之亦然。这意味着，您应该将 CSHTML 简化为：
@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>
}
这应该可以解决表单标签未正确呈现的问题。
Html.BeginForm 为您创建 <form> 标签。因此您不必手动添加它们。因为你想要表单元素上的一些属性，你可以像这样分配它们：（确保你的 <div class="box-typical-body"> 在外面，因为你想要 div 来包装你的表单）
<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>
在我的 asp.net Mvc 表单中，当我使用 Html.BeginForm 时，<form id="example-form" action="#" class="form-wizard"> 标签设计中存在的值在下面不起作用，我附上了源代码..
<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>
和CSS代码
.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}
为什么要在 Html.BeginForm() 助手已经生成的表单标签中添加额外的表单标签？
Html.BeginForm() 扩展将为您生成表单标签。因此您无需再次手动添加它。
看到这个
@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-->
}
所以，you cannot nest form elements inside other form elements。例如，这是不允许的，浏览器将移除嵌套的表单元素：
<form id="outer-form">
<div id="first-div">
<form id="inner-form">
<div id="second-div">
</div>
</form>
</div>
</form>
大多数浏览器只会向您显示：
<form id="outer-form">
<div id="first-div">
<div id="second-div">
</div>
</div>
</form>
现在，您上面的代码片段正在执行此操作：
@using (Html.BeginForm("AddCompany", "Company", FormMethod.Post))
{
. . .
<div class="box-typical-body">
<form id="example-form" action="#" class="form-wizard">
</form>
</div>
}
Html.BeginForm 渲染出一个 <form> 标签。处理后，它还会渲染出 </form> 结束标记，这就是它被包装在 using 中的原因。因此，这些是等价的：
剃须刀：
@using (Html.BeginForm("AddCompany", "Company", FormMethod.Post))
{
}
结果HTML：
<form action="/Company/AddCompany" method="post">
</form>
例如，如果您使用 Html.BeginForm，则无需手动创建 <form> 标签，反之亦然。这意味着，您应该将 CSHTML 简化为：
@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>
}
这应该可以解决表单标签未正确呈现的问题。
Html.BeginForm 为您创建 <form> 标签。因此您不必手动添加它们。因为你想要表单元素上的一些属性，你可以像这样分配它们：（确保你的 <div class="box-typical-body"> 在外面，因为你想要 div 来包装你的表单）
<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>