Edit and update rows in dynamic table in Asp.net mvc4 razor view

Question

I am new to asp.net MVC. I have a dynamic table in my project. Adding dynamic rows in table is achieved with the help of following link

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

I need to edit and update the dynamic table. I have tried following code

My sample model

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; }
}

My sample Controller

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");
    }
}

My sample Partial View

@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>
}

My sample main view

@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>

When I click 'Add Another' button a row is added to the table. After editing the values in the table When I click submit button I receive nothing in the controller. The IEnumerable Gifts variable is null. How to take the table values to the controller. Please help me to fix this is issue. Thanks in advance

Your model property is named Gifts so its needs to be Html.BeginCollectionItem("Gifts")) (not "giftlist"). And you have not shown the script that adds the new item. — user3559349
@StephenMuecke No problem in adding new row. I will change the code as you mentioned and let you know — mvm
@StephenMuecke I changed the "giftlist" to "Gifts" as you said but it didn't worked. I receive Gifts as null — mvm
Check the html your generating. You should see <input name="Gifts[##].Name" ...> <input type="hidden" name="Gifts.Index" value="##" > where ## is a Guid — user3559349
@StephenMuecke Thanks for your help now its working fine. The mistake is I used the same name 'gifts' in controller to receive values from view. After changing the name it worked. — mvm

Unknown Unknown · Accepted Answer · 2015-04-15T12:36:53

Your model's collection property is named Gifts so the partial needs to be

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

This will generate inputs with the correct name attributes for binding to a collection (where ## is a Guid)

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

Edit and update rows in dynamic table in Asp.net mvc4 razor view

2 Answers