ASP.NET Core MVC jQuery UI

Question

我对 C# 中的 ASP.NET Core MVC 非常陌生。我在水平排列的窗口中有 2 个数据网格或数据表。我在两个网格之间排列了一些按钮。

如何创建如下所示的UI？请帮我。它位于 Razor

.cshtml

视图中。

类似这样的：

<div class="card-body">
    <table class="table display table-bordered" id="DATATABLE"> 
    </table>
</div>

Answer 1

你可以尝试这个代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>@ViewData["Title"]</title>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <style>
        .container {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin: 20px;
        }

        .datagrid {
            flex: 1;
            margin: 10px;
            border: 1px solid black;
        }

        .buttons {
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin: 10px;
        }

            .buttons button {
                margin: 5px 0;
            }

        .footer-buttons {
            display: flex;
            justify-content: space-between;
            margin: 10px;
        }

        .textbox {
            margin: 10px;
        }

            .textbox input {
                width: 100%;
            }
    </style>
</head>
<body>
    <div class="textbox">
        <input type="text" placeholder="Text box" />
    </div>
    <div class="container">
        <div class="datagrid" id="datagrid1">
            <table id="table1" class="display table-bordered" style="width:100%">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Tiger Nixon</td>
                        <td>System Architect</td>
                        <td>Edinburgh</td>
                        <td>61</td>
                        <td>2011/04/25</td>
                        <td>$320,800</td>
                    </tr>
                    <tr>
                        <td>Garrett Winters</td>
                        <td>Accountant</td>
                        <td>Tokyo</td>
                        <td>63</td>
                        <td>2011/07/25</td>
                        <td>$170,750</td>
                    </tr>
                    <!-- Add more rows as needed -->
                </tbody>
            </table>
        </div>
        <div class="buttons">
            <button id="button1">Button1</button>
            <button id="button2">Button2</button>
            <button id="button3">Button3</button>
        </div>
        <div class="datagrid" id="datagrid2">
            <table id="table2" class="display table-bordered" style="width:100%">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Ashton Cox</td>
                        <td>Junior Technical Author</td>
                        <td>San Francisco</td>
                        <td>66</td>
                        <td>2009/01/12</td>
                        <td>$86,000</td>
                    </tr>
                    <tr>
                        <td>Cedric Kelly</td>
                        <td>Senior Javascript Developer</td>
                        <td>Edinburgh</td>
                        <td>22</td>
                        <td>2012/03/29</td>
                        <td>$433,060</td>
                    </tr>
                    <!-- Add more rows as needed -->
                </tbody>
            </table>
        </div>
    </div>
    <div class="footer-buttons">
        <button id="buttonCancel">Button Cancel</button>
        <button id="buttonOK">Button OK</button>
    </div>

    <script>
        $(document).ready(function () {
            $('#table1').DataTable();
            $('#table2').DataTable();
        });
    </script>
</body>
</html>

ASP.NET Core MVC jQuery UI

问题描述投票：0回答：1

1个回答

最新问题

ASP.NET Core MVC jQuery UI

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1