Question

我有一个MVC应用程序。有些元素相当复杂，所以我为它们创建了一个模板。我用它们来调用@Html.EditorFor()。问题是我需要动态创建这样的元素，我的意思是在点击“创建新”按钮后我想生成一个空模板并让用户填充它。我可以像这样使用胡子模板引擎或smth，但在这种情况下我需要复制我的html - 在剃刀模板和html中。我不想重复自己，实现这个目标的最佳途径是什么？

另一个问题是当我为IEnumerable＆lt;＆gt;生成视图时 - razor为具有适当索引的元素创建了专有名称。在我想要创建新元素的情况下 - 我应该如何设置这些索引以让binder在POST上正常工作？有没有比使用jQuery更好的解决方案呢？

提前完成。

更新

这是一个编辑器模板：

@model FakeViewModel
<li>
    <div>
        <h3><span>@Model.Title</span><span class="icon-remove"></span><span class="icon-move"></span></h3>
        <div>
            @Html.HiddenFor(m => m.Id)
            @Html.HiddenFor(mp => mp.Category)
            <div>
                <span class="font-small">Title</span>
            </div>
            <div>@Html.TextBoxFor(m => m.Title, new { @maxlength = FakeViewModel.MaxTitleLength, @class = "title-textbox" })</div>
            <div>
                @Html.TextAreaFor(m => m.Description, new { @placeholder = "short description", @data_max_length = "90" })
            </div>
        </div>
    </div>
</li>

这是我呈现它的方式，“Special”是IEnumerable<FakeViewModel>

的一种类型

<ul class="container" id="special">
    @Html.EditorFor(m => m.Special)
</ul>

因此，在渲染后我得到了一个名称正确的布局，我的意思是Special[0].Id，Speacial[0].Category等。

现在，我想创建一个空模板。现在我使用的是胡子模板，它应该与编辑器模板具有相同的布局：

<script type="text/template">
    <input name="Special[{{itemIndex}}].Category"
</script>

问题是，我在两个不同的地方使用相同的布局 - 在胡子模板和剃刀编辑器模板中。如果我需要更改此布局 - 我需要在两个地方更改它。我想避免这种情况。另一个问题是我需要硬编码名称（本例中为“Speacial”）并手动输入索引，类别等。

Answer 1

无论您使用何种解决方案，都需要使用JavaScript。 jQuery只是一个JavaScript框架，所以如果你愿意，你可以用别的东西把它换掉，但是你应该坚持使用某种或JavaScript框架，因为执行XMLHttpRequest跨浏览器的代码很繁琐。并容易出错。

对于HTML，您可以选择在页面加载时将其作为模板包含在内，或者通过AJAX请求将其作为新鲜请求。就个人而言，我会使用模板，因为在这种情况下，AJAX并没有真正为你买任何东西，而且这只是一个额外的请求。

无论哪种方式，你很遗憾不能够使用Razor HtmlHelper方法，至少不会在之后通过JavaScript破坏HTML;它们根本不会生成在for循环之外绑定列表对象所需的正确命名约定。模型绑定约定很容易手动复制，但它只是：

YourCollection[N].FieldName

因此，如果您的模型上有Cars的列表，并且您想要一个字段来编辑第3辆汽车的Color，那么您可以使用：

Cars[2].Color

任何好的JavaScript模板解决方案都应该能够根据对象在其他对象列表中的位置自动插入N值。

Answer 2

Partialview是解决方案：您可以创建局部视图，并在每次要使用它或将其注入视图时添加它。您可以在该局部视图上运行for或foreach外观，并根据需要重复多次。

1：创建一个partialview。 2：在局部视图中将您想要渲染的所有内容放置2次。 3：用局部视图替换视图代码。像：

@html.Partial("~/views/partials/_samplename.cshtml")

您可以在项目的任何位置重复此部分视图，并通过更改部分视图中的任何内容来改变它。

Answer 3

您可以使用字符串构建器在控制器的get方法中动态创建html，然后将其发布到视图中。另一种方法是创建自己的htmlhelper。

MVC：从模板动态创建新元素

3 个答案: