Using Jquery to append rows in MVC

Question

I have a dynamically generated gridview which is made of table and textbox controls and an add and remove button.

The add button calls a jquery function which adds new row at the bottom of the grid and the remove button removes a particular row.

Problem:

Assuming I have 5 rows from the database and I add a new row and perform a count to check the number of textboxs I discover that it count only newly added textbox.

View:

@{

        for (var i = 0; i < Model.Image_Count; i++ )
        {


                                <tbody id="image-row">
                                    <tr>
                                        <td class="left">
                                            <table>
                                                <tr>
                                                    <td>
                                                        <img class="img-tag" id="img-row-tag" src="@Model.Product_ImageLink[i]" alt="no-image" />
                                                        @Html.HiddenFor(x => x.Product_ImageLink[i])
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <a id="lnk" onclick="_file_upload(this);" class="button">Upload File</a>
                                                        <input id="file_row" class="file-tag" onchange="readURL_(this, i);" type="file" name="file_row" />
                                                        <div class="validation-area">
                                                            @Html.ValidationMessageFor(x => x.Product_ImageLink[i])
                                                        </div>
                                                    </td>
                                                </tr>
                                            </table>

                                        </td>
                                        <td class="right">
                                            @Html.TextBoxFor(x => x.Product_SortOrder[i])
                                        </td>
                                        <td class="left"><a onclick="$('#image-row' + i).remove();" class="button">-</a></td>
                                    </tr>
                                </tbody>
        }

                            }

JQuery:

var attribute_row = 1; 
function addattribute(){
     html = '<tbody id="attribute-row' + attribute_row + '">';
     html += '  <tr>';
     html += '    <td class="left">@Html.TextBoxFor(x=>x.AttributeName)<div class="validation-area">@Html.ValidationMessageFor(x => x.AttributeName)</div></td>';
     html += '    <td class="right"><input type="text" name="Attribute_SortOrder" id="Attribute_SortOrder"></td>';
     html += '    <td class="left"><a onclick="$(\'#attribute-row' + attribute_row + '\').remove();" class="button">-</a></td>';html += '  </tr>';
     html += '</tbody>';$('#attribute tfoot').before(html);
     attribute_row++;$('#Attribute_Count').val(attribute_row);
 }

Model:

 public bool[] IsDefault { get; set; }
    public string Image_Link { get; set; }
    public string Image_Path { get; set; }
    public string[] Product_ImageLink { get; set; }
    public int[] Product_SortOrder { get; set; }
    public int Image_Count { get; set; }

    public int iCount { get; set; }

Controller:

    public ActionResult Products(int? id)
    {


        if (id == null)
        {





        }
        else
        {

            var y = _repository.GetProductImage(id);
            List<string> _Product_ImageLink = new List<string>();
            List<int> _Product_SortOrder = new List<int>();

             foreach (var z in y)
                {
                    _Product_ImageLink.Add(z.Product_ImageLink);
                    _Product_SortOrder.Add(z.Product_SortOrder);
                }


            model.Product_SortOrder = _Product_SortOrder.ToArray();
            model.Product_ImageLink = _Product_ImageLink.ToArray();



        }

        return View(model);
    }

[HttpPost]
    public ActionResult Products(ProductModel _model, int? id)
    {

        if (ModelState.IsValid)
        {

            if (_model.ProductId == 0)
            {



            }
            else
            {

                int jCount = _model.Product_ImageLink.Count();                
            }              
        }
        else
        {
            _Message("Error", "Please check the form carefully for errors!");

        }

        ViewBag.IsButtonClick = true;
        return View(_model);

    }

Answer 1

What you can do is maybe initialize your javascript variable with Razor:

  var attribute_row = @Model.Image.Count();

Hope it'll help you!

Sebastien