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. — , Apr 15 '15 at 11:19
@StephenMuecke No problem in adding new row. I will change the code as you mentioned and let you know — mvm, Apr 15 '15 at 11:25
@StephenMuecke I changed the "giftlist" to "Gifts" as you said but it didn't worked. I receive Gifts as null — mvm, Apr 15 '15 at 11:42
Check the html your generating. You should see ` ` where `##` is a Guid — , Apr 15 '15 at 11:53
@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, Apr 15 '15 at 12:23

score 0 · Answer 1 · answered Apr 15 '15 at 12:01

The problem you're facing is the name of the rendered input isnt matching your model structure. There are a couple of ways out of this:

Make an editor template for the model type

your partial view:

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

and an EditorTemplate for the Gift model:

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

Manually create the inputs with the properly parsed name - "Gifts[x].Property"

Obviously the first option is far cleaner and imho preferred.

Hope this works, and helps :)

This does not generate the correct prefix (it would need to be `@Html.EditorFor(m => m.Gifts)` in the main view, does not add the `Gifts.Index` input necessary for deleting items and does not allow the user to dynamically add new items. — , Apr 15 '15 at 12:15

score 0 · Accepted Answer · answered Apr 15 '15 at 12:36

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 Answers2