asp.net-mvc - 防止提交按钮出现在 'new line'

Question

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

目前，我将这些操作作为简单的链接，由 Controller 作为 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 是 block 级元素。

注意:我不推荐内联样式，但这可以解决您的问题:

<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