防止提交按钮出现在 'new line'
Prevent Submit button appearing on 'new line'
我有一组数据显示在 table 的行中。每行末尾是一个单元格,其中包含一组可对该行执行的操作(查看、打印、编辑、删除等)
目前我有那些简单的 link 操作,由控制器作为 GET 请求处理,但是我需要将它们更改为 POST 请求以满足最佳实践。
我的视图生成的当前 HTML 是这样的(为清楚起见缩短):
<table class="table table-hover">
<tr class="row">
<th>Date</th>
<th>Actions</th>
</tr>
<tr class="row">
<td>03/10/2014</td>
<td>
<a href="/Grid/Details?mainid=123">Details</a> |
<a href="/Grid/Print?mainid=123">View</a> |
<a href="/Grid/Delete?mainid=123">Delete</a>
</td>
</tr>
当我用表单、隐藏字段和按钮替换我的删除 link 时,无论页面宽度如何,按钮都放在 'new line' 上。视图使用此代码:
@using (Html.BeginForm("Delete", "Grid"))
{
@Html.Hidden("MainID", Model.MainID)
<button type="submit" class="btn-link" style="border-width: 0px; padding: 0px;">Delete</button>
}
产生这个 HTML:
<a href="/Grid/Details?mainid=123">Details</a> |
<a href="/Grid/Print?mainid=123">View</a> |
<form action="/Grid/Delete" method="post">
<input id="MainID" name="MainID" type="hidden" value="123" />
<button type="submit" class="btn-link" style="border-width: 0px; padding: 0px;">Delete</button>
看起来像这样:
我尝试用 <div class="form-group">
包裹表格,但这没有任何区别。有没有办法让 link 样式的按钮与 link 的其余部分保持相同的 'line'?
您需要将 display: inline
添加到表单样式中。 Forms
是块级元素。
注意:我不推荐内联样式,但这可以解决您的问题:
<a href="/Grid/Details?mainid=123">Details</a> |
<a href="/Grid/Print?mainid=123">View</a> |
<form action="/Grid/Delete" method="post" style="display:inline;">
<input id="MainID" name="MainID" type="hidden" value="123" />
<button type="submit" class="btn-link" style="border-width: 0px; padding: 0px;">Delete</button>
Codepen 示例:http://codepen.io/anon/pen/dPzyKY
您需要将 style = "display:inline;"
作为对象 htmlAttributes 添加到您的 Html.BeginForm()
。默认情况下,表单是块级元素。
@using (Html.BeginForm("Delete", "Grid"), FormMethod.Post, , new { style = "display:inline;" })
{
@Html.Hidden("MainID", Model.MainID)
<button type="submit" class="btn-link" style="border-width: 0px; padding: 0px;">Delete</button>
}
以上代码将内联所有表单元素。
我有一组数据显示在 table 的行中。每行末尾是一个单元格,其中包含一组可对该行执行的操作(查看、打印、编辑、删除等)
目前我有那些简单的 link 操作,由控制器作为 GET 请求处理,但是我需要将它们更改为 POST 请求以满足最佳实践。
我的视图生成的当前 HTML 是这样的(为清楚起见缩短):
<table class="table table-hover">
<tr class="row">
<th>Date</th>
<th>Actions</th>
</tr>
<tr class="row">
<td>03/10/2014</td>
<td>
<a href="/Grid/Details?mainid=123">Details</a> |
<a href="/Grid/Print?mainid=123">View</a> |
<a href="/Grid/Delete?mainid=123">Delete</a>
</td>
</tr>
当我用表单、隐藏字段和按钮替换我的删除 link 时,无论页面宽度如何,按钮都放在 'new line' 上。视图使用此代码:
@using (Html.BeginForm("Delete", "Grid"))
{
@Html.Hidden("MainID", Model.MainID)
<button type="submit" class="btn-link" style="border-width: 0px; padding: 0px;">Delete</button>
}
产生这个 HTML:
<a href="/Grid/Details?mainid=123">Details</a> |
<a href="/Grid/Print?mainid=123">View</a> |
<form action="/Grid/Delete" method="post">
<input id="MainID" name="MainID" type="hidden" value="123" />
<button type="submit" class="btn-link" style="border-width: 0px; padding: 0px;">Delete</button>
看起来像这样:
我尝试用 <div class="form-group">
包裹表格,但这没有任何区别。有没有办法让 link 样式的按钮与 link 的其余部分保持相同的 'line'?
您需要将 display: inline
添加到表单样式中。 Forms
是块级元素。
注意:我不推荐内联样式,但这可以解决您的问题:
<a href="/Grid/Details?mainid=123">Details</a> |
<a href="/Grid/Print?mainid=123">View</a> |
<form action="/Grid/Delete" method="post" style="display:inline;">
<input id="MainID" name="MainID" type="hidden" value="123" />
<button type="submit" class="btn-link" style="border-width: 0px; padding: 0px;">Delete</button>
Codepen 示例:http://codepen.io/anon/pen/dPzyKY
您需要将 style = "display:inline;"
作为对象 htmlAttributes 添加到您的 Html.BeginForm()
。默认情况下,表单是块级元素。
@using (Html.BeginForm("Delete", "Grid"), FormMethod.Post, , new { style = "display:inline;" })
{
@Html.Hidden("MainID", Model.MainID)
<button type="submit" class="btn-link" style="border-width: 0px; padding: 0px;">Delete</button>
}
以上代码将内联所有表单元素。