c# - 使用 MVC 动态添加到页面

Question

我有一个 Razor View ，其中有一个部分，用户可以在其中为特定日期的临时打开/关闭时间添加新行。它由三个控件组成——一个 DatePicker、两个选择列表和一个“删除行”按钮。现有保存的行通过 Razor 在页面加载时呈现，并且任何新行通过 OnClick 事件和 JavaScript 将大部分固定的 html 附加到 DOM 元素来添加。然后在 HTTPPost 上保存(或根据需要删除)所有行。

我有一个新要求，需要为这些临时的“用户生成”行实现更复杂的数据集。这些行中每一行的 HTML 都非常广泛。有没有一种比在 JavaScript 中附加硬编码 HTML 更优雅的方式来通过单击按钮在 View 中注入(inject) Razor？

Answer 1

这完全取决于您的用例，您没有在您的问题中提供任何代码，但是有一个叫做Partial View 的东西。您可以阅读基本介绍here .

对于你的情况，我会做这样的事情:

Controller

public IActionResult GetNewRow()
{
    return PartialView("_NewRow");
}

查看

<button id="btnAddRow" class="btn btn-primary">Add new row</button>

<script type="application/javascript">
    $(function() {
        $("#btnAddRow").on("click", function () {
            $.get("/GetNewRow", function success(data) {
                $("#WHEREVERYOUAREADDINGROWS").append(data);
            });
        });
    });
</script>

分部 View (_NewRow)

<tr>
    <td>Add whatever you need here</td>
<tr>

注意:我没有尝试过这个，所以 AJAX 语法可能有点不对。