jQuery和@Html.TextBoxfor()

Question

我目前有以下代码：

        [HttpPost]
        public ActionResult Index(IList<LocalPageModel> postPages,
          IEnumerable<HttpPostedFileBase> files)
        {
            if (ModelState.IsValid)
            {
                foreach (HttpPostedFileBase file in files)
                {
                    if ((file != null) && (file.ContentLength > 0))
                    {
                        var fileName = Path.GetFileName(file.FileName);
                        var path = Path.Combine(Server.MapPath("~/App_Data/"),
                          fileName);
                        file.SaveAs(path);
                    }
                }
            }
            else
            {
                ManagePagesModel mod = new ManagePagesModel
                {
                    PostPages = postPages
                };

                return View("Index", mod);
            }
            return RedirectToAction("Index");
        }

在我看来，我有一个JavaScript按钮，它将添加一个div，以便用户可以发布另一个页面，例如：

$("#add-page").click(function () {
    $("#page").append('<div id="page"> @Html.TextBoxFor(u => u.PostPages[0].Title) </div>');
});

如何使用户单击JavaScript按钮时，新文本将被附加到页面和 u.PostPages[x]中？

Answer 1

如果您想在客户端上完成所有操作(不使用AJAX)，则可能根本不使用MVC帮助程序，而是手动完成--您知道将呈现的HTML，所以只需这样做：

var i = 0;
$("#add-page").click(function () {
   $("#page").append('<input type="text" name="PostPages[' + (i++) + '].Title">');
});

也许把代码弄清楚一点，这样引号就不会太混乱了，但是你明白了.

Answer 2

要增加u.PostPagesx，可以使用以下代码：

<script>

var i = 0;

$("#add-page").click(function () {
    i++
    $("#page").append('<div id="page"> @Html.TextBoxFor(u => u.PostPages['+i+'].Title') </div>');
});

</script>

下面是一个小的工作示例：小提琴

Answer 3

你并没有超越你的视野，但我想你在顶部应该有以下几点：

@model = ManagePagesModel

如果是这样的话，那么您可以使用下面的@foreach遍历页面模型：

$("#add-page).click(function() {
@foreach(var pageModel in Model.PostPages){
 $("#page").append('<div id="page"> @Html.TextBoxFor(u => pageModel.Title) </div>');
});