防止提交按钮出现在“新行”上答案

【问题标题】：Prevent Submit button appearing on 'new line'防止提交按钮出现在“新行”上
【发布时间】：2015-01-27 09:51:51
【问题描述】：

我在表格的行中显示了一组数据。每行的末尾是一个单元格，其中包含一组可以对该行执行的操作（查看、打印、编辑、删除等）

目前，我将这些操作作为简单链接作为控制器处理为 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>

当我将删除链接替换为表单、隐藏字段和按钮时，无论页面宽度如何，按钮都会放置在“新行”上。视图使用此代码：

@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"> 包装表单，但这没有任何区别。有没有办法让链接样式的按钮与其他链接保持在同一“行”上？

【问题讨论】：

标签： asp.net-mvc twitter-bootstrap twitter-bootstrap-3 asp.net-mvc-5

【解决方案1】：

您需要将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

【讨论】：

确实可以解决这个问题，但我只是让其他人有机会想出一个不包含内联样式的解决方案，然后再将其设置为答案。
我使用内联样式只是为了说明。只需向您的表单添加一个类，然后更新您的样式表。 codepen 示例展示了如何在没有内联样式的情况下实现此目的。

【解决方案2】：

您需要将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>
}

以上代码将内联所有表单元素。

【讨论】：