ASP.NET C# MVC - Capturing value of item in foreach & passing to modal

Question

This may end up being a much simpler problem than I'm making it out to be, but here goes...

I have a BookManager class and a Book class. BookManager has many Books - this is setup through EntityFramework using CodeFirst.

In the Details page of BookManager, I'm using a foreach statement to display a list of Books along with a link to Edit the specific book.

Here's that code:

@foreach (var item in Model.Books)
    {

        <tr>
           <td>
              @Html.DisplayFor(modelItem => item.BookName)
            </td>
            <td>
              @Html.DisplayFor(modelItem => item.BookNumber)
            </td>
            <td>                                   
              <a class="btn" data-toggle="modal" href="#BookEditModal" @{ViewBag.SelectedBook = item.BookID}>
              <i class="icon-edit"></i>
                 Edit       
              </a>                                

             </td>
         </tr>
      }

Here is the tricky part:

<a class="btn" data-toggle="modal" href="#BookEditModal" @{ViewBag.SelectedBook = item.BookID} >
    <i class="icon-edit"></i>
       Edit       
</a>  

Normally I would do something like this: href="@Url.Action("Edit", "Book", new { id = item.BookID})

However, I am using the href attribute to open a modal window which will use a Html.RenderAction to display the appropriate form coming from the Book controller.

Here is the Modal window that is contained at the bottom of the BookManager Details page:

 <div class="modal hide fade in" id="BookEditModal" )>
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h3>Edit Book</h3>
          </div>
          @using (Html.BeginForm("Edit", "Book", FormMethod.Post))
          {
             <div class="modal-body">
               @{ Html.RenderAction("Edit", "Book", new { id = ViewBag.SelectedBook}); }
             </div>

          }
        </div>

Since I need to pass the id into the RenderAction in order for the Edit method to work, I need the value of the item that was clicked in the foreach - but that is no longer in scope.

I tried creating a ViewBag.SelectedBook within the Details method of the BookManager, but instead of the value being the selected book, instead the foreach statement loops through and the value of ViewBag.SelectedBook ends up being the Count of Books. (eg. If I have 3 Books in the list, than ViewBag.SelectedBook equals 3).

I thought about using JQuery and calling $(this) on the clicked item, but then I would have to collect the BookID with Javascript and convert that back to C# in order to collect it in the Html.RenderAction - that just seems way overboard for what I'm trying to do.

How would I go about collecting the value of the item clicked and passing that along to the Html.RenderAction that is in the modal?

Thanks!

Answer 1

There is no other way.

What I mean by that is.. you're attempting to have server-side code interact with client side scripts.

Since your modal dialog is rendered at the time the page is rendered, what you're attempting won't work.

My suggestion, is to load the entire modal dialog, via a controller action, perhaps like this:

Generate your foreach links, like this:

<a class="btn edit-book-link" data-toggle="modal" href="/ControllerName/BookForm/@item.BookID">

..make your modal dialog div blank, like this:

<div class="modal hide fade in" id="BookEditModal" )>
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h3>Edit Book</h3>
    </div>
    <div id="modalContent"></div>
</div>

Create a view that takes an integer as it's model, called, for example, BookForm:

[HttpGet]
public ViewResult BookForm(int id) {
    return View(id);
}

..then, use jQuery to load the correct form on every click:

$(function () {
    $('.edit-book-link').click(function (e) {
        $('#modalContent').load($(this).attr('href'), function() {
            // show your modal dialog here using whatever method you use..
        });
        e.preventDefault();
        return false;
    });
});

Then in your BookForm view, you can generate your form using the ID.

Hopefully I understood your issue correctly.