在 Asp.net mvc4 razor 视图中编辑和更新动态表中的行

Question

我是 asp.net MVC 的新手。我的项目中有一个动态表。在表中添加动态行是通过以下链接实现的

Adding and deleting rows in dynamic table in Asp.net mvc razor view

我需要编辑和更新动态表。 我试过下面的代码

我的示例模型

public class Gift
{
    public string Name { get; set; }
    public double Price { get; set; }   
}

public class GiftViewModel
{
    public string Age { get; set; }
    public DateTime TheDate { get; set; }
    public IEnumerable<Gift> Gifts { get; set; }
}

我的示例控制器

public class HomeController : Controller
{
    [HttpGet]
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Index(GiftViewModel model)
    {               
        // do work here 
        return RedirectToAction("Index");
    }

    public ViewResult AddNew()
    {
        return View("_TimeSheetView");
    }
}

我的示例局部视图

@model HelloWorldMvcApp.Gift
@using (Html.BeginCollectionItem("giftList"))
{
    <div> 
        <span class="drop_medium">
            @Html.TextBoxFor(m => m.Name)
        </span>
        <span class = "drop_medium">
             @Html.TextBoxFor(m => m.Price)
        </span>
    </div>
}

我的示例主视图

@model HelloWorldMvcApp.GiftViewModel
@using (Html.BeginForm())
{
    @Html.TextBoxFor(m => m.Age)
    @foreach (var data in Model.Gifts)
    {
        { Html.RenderPartial("_TimeSheetView", data); }
    }
    @Html.ActionLink("Add another", "AddNew", null, new { id="addItem" })
    <input type="submit" value="Save"/>
}

<script type="text/javascript">
    $("#addItem").click(function () {
        $.ajax({
            url: this.href,
            cache: false,
            success: function (html) { $("#dynamic").append(html); }
        });
        return false;
    });
</script>

当我单击“添加另一个”按钮时，表格中会添加一行。编辑表中的值后，当我单击提交按钮时，控制器中什么也没有收到。 IEnumerable Gifts 变量为空。如何将表值带到控制器。请帮我解决这个问题。提前致谢

Answer 1

你的模型的集合属性被命名为Gifts，所以部分需要是

@model HelloWorldMvcApp.Gift
@using (Html.BeginCollectionItem("Gifts")) // not "giftlist"
{
  ...
}

这将生成具有正确名称属性的输入以绑定到集合（其中## 是Guid）

<input name="Gifts[##].Name" ... />
<input name="Gifts[##].Price" ... />
<input type="hidden" name="Gifts.Index" value="##" />

Answer 2

您面临的问题是渲染输入的名称与您的模型结构不匹配。有几种方法可以解决这个问题：

1. 为模型类型制作编辑器模板

你的部分观点：

@model IEnumerable<HelloWorldMvcApp.Gift>
@Html.EditorForModel("","Gifts")

以及礼物模型的 EditorTemplate：

@model HelloWorldMvcApp.Gift
<div> 
    <span class="drop_medium">
        @Html.TextBoxFor(m => m.Name)
    </span>
    <span class = "drop_medium">
         @Html.TextBoxFor(m => m.Price)
    </span>
</div>

1. 使用正确解析的名称手动创建输入 - “Gifts[x].Property”

显然，第一个选项更简洁，恕我直言。

希望这可行，并有所帮助:)