Question

I have grid like this.
How to change index for each element, i.e.
to have images[0], images[1], images[2]?

<div class="grid">

<div class="gridItem">
  <div><img src="image1.jpg"  class="gridThumb" /></div>
  <input type="hidden" name="images[0]" value="image1.jpg" />
</div>

<div class="gridItem">
  <div><img src="image2.jpg"  class="gridThumb" /></div>
  <input type="hidden" name="images[2]" value="image2.jpg" />
</div>

<div class="gridItem">
  <div><img src="image3.jpg"  class="gridThumb" /></div>
  <input type="hidden" name="images[3]" value="image3.jpg" />
</div>

</div>

This is a part of Create view in MVC3 site.
User creates model and uploads files, then he can delete some of them.. and then click Create.
I need to add image names to the model and save this list in db.

    [HttpPost, ActionName("Create")]
    public ActionResult Create(MyModel m, string[] images)

But if user deleted some of items I need to reindex images[i] elements because MVC binding cannot pass array with absent elements.

Answer 1

You could try:

$(function(){
  var gridCnt = 0
  $('.grid').find('.gridItem').each(function(){
    $(this).attr('name','images[' + gridCnt + ']')
    gridCnt++
  })
})