在 asp.net MVC 中打印表格行答案

【问题标题】：Printing a table row in asp.net MVC在 asp.net MVC 中打印表格行
【发布时间】：2019-08-30 17:04:18
【问题描述】：

我正在设置一个包含交易的表格，并且希望能够通过单击按钮单独打印每笔交易（基本上打印每一行）。但似乎无法弄清楚如何。

我尝试在 google/stackoverflow 上搜索它，但到目前为止我找不到我要找的东西。

<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Clientnumber)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.LicensePlate)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.AccountNumber)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Amount)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Date)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Status)
        </th>
        <th>
            <a>Gegevens Ophalen</a>
        </th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Clientnumber)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.LicensePlate)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.AccountNumber)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Amount)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Date)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Status)
            </td>
            <td>
                <button id="idButton" class="btn btn-secondary">Print Transactions</button>
            </td>
        </tr>
    }
</table>

所以最后我希望能够按下一个按钮并获得按钮所在行的打印预览。

【问题讨论】：

您希望在何处以及如何进行打印预览？您的意思是在弹出窗口中显示该行的数据并允许打印？
是的，在允许打印的弹出窗口中显示该行。
这取决于很多因素。你想打开一个全新的弹出窗口吗？或者你只是想要一个弹出对话框（在当前窗口中）？第一个相对容易。您只需创建一个新的控制器方法和视图以仅显示一行并打开一个调用该方法的新窗口。第二个涉及更多，可以通过多种方式完成。
那么，您在点击按钮时启动弹出窗口的代码在哪里？请出示该代码并让我们知道问题所在。
@ErikFunkenbusch 第二个选项是我正在寻找的。span>

标签： javascript c# asp.net-mvc razor razor-pages

【解决方案1】：

我在 javascript/jquery 中创建了一个示例，可以应用于您的 cshtml 文件。

您需要复制到 HTML 文件才能运行此代码。

$('.idButton').on('click',function(){
     var printed = $(this).closest('tr').html();
     newWin= window.open("");
   newWin.document.write(printed);
   newWin.print();
   newWin.close();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<body>

<h2>HTML Table</h2>

<table id="yourtable">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
    <th>Print</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
 <td><button class="idButton" class="btn btn-secondary">Print Transactions</button></td>
  </tr>

  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
 <td><button class="idButton" class="btn btn-secondary">Print Transactions</button></td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
    <td><button class="idButton" class="btn btn-secondary">Print Transactions</button></td>
  </tr>
</table>

</body>
</html>

【讨论】：