使用 MVC 动态添加到页面

【问题标题】：Dynamically adding to a page with MVC使用 MVC 动态添加到页面
【发布时间】：2017-11-24 10:24:47
【问题描述】：

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

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

【问题讨论】：

使用BeginCollectionItem() 助手 - 例如参考this Q/A

标签： c# asp.net-mvc razor

【解决方案1】：

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

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

控制器

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>

部分视图 (_NewRow)

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

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

【讨论】：