阻止出现在“新行”上的“提交”按钮

Question

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

目前我将这些操作视为由控制器作为GET请求处理的简单链接，但是我需要将它们更改为POST请求以满足最佳实践。

我的View生成的当前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>

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

@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">包装表单，但这没有任何区别。有没有办法让链接样式按钮保持在相同的线路上？作为其余的链接？

Answer 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

Answer 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>
}

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