动态添加了新的元素块

Question

我已经很多次解决了这种情况，但还没有找到好的方法。 在mvc页面中我有：

    @for (int i = 1; i <= 2; i++)
    {
        <label>Label @i </label>
        @Html.TextBoxFor(m => m.SubSiteNames[i - 1])
        <br />
    }
    <input type="button" value="+"  />

然后在页面上我想点击“+”按钮并添加另一对标签和按钮。

最好的方法是什么？

注意：

绑定没有问题。

Answer 1

这是我对PartialViews的回答。还有很多其他方法可以解决这个问题，例如使用明显的客户端jquery（没有点击服务器操作）。我建议你也去研究这些解决方案。

模特 -

public class Site
{
    public List<SubSite> SubSiteNames { get; set; }
}
public class SubSite
{
    public string Name { get; set; }
}

控制器 -

public class TableController : Controller
{
    public ActionResult Index()
    {
        Site sn = new Site();
        sn.SubSiteNames = new List<SubSite>();
        sn.SubSiteNames.Add(new SubSite() { Name = "a.microsoft.com" });
        sn.SubSiteNames.Add(new SubSite() { Name = "b.microsoft.com" });
        return View(sn);
    }

    public ActionResult SubSite()
    {
        return PartialView("_SubSite");
    }
}

索引视图 -

@model MVC.Controllers.Site

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
    $(function () {
        $("#ClickMe").click(function () {
            $.ajax({
                url: "@Url.Action("SubSite")",
                type: "GET",
                error: function (response) {
                    if (!response.Success)
                        alert("Error");
                },
                success: function (response) {
                    $("#content").append(response);
                }
            });

        });
    })
</script>
<div id="content">
    @foreach (var item in Model.SubSiteNames)
    {
        @Html.Partial("_SubSite", item);
    }
</div>

<input type="button" value="+" id="ClickMe" />

_SubSite部分视图 -

@model MVC.Controllers.SubSite

<div>
    <dl class="dl-horizontal">
        <dt>
            @Html.DisplayNameFor(model => model.Name)
        </dt>

        <dd>
            @Html.TextBoxFor(model => model.Name)
        </dd>

    </dl>
</div>

输出，点击+ Sign -

Answer 2

JQuery非常适合这类事情。

http://learn.jquery.com/javascript-101/getting-started/