ASP.NET C＃MVC-在foreach中捕获项目的值并传递给模态

Question

这可能最终比我提出来的要简单得多，但是这里...

我有一个BookManager类和一个Book类。 BookManager有很多书-这是通过使用CodeFirst通过EntityFramework进行设置的。

在BookManager的“ 详细信息”页面中，我正在使用foreach语句来显示“ 书籍”列表以及“ 编辑特定书籍”的链接。

这是代码：

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

这是棘手的部分：

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

通常，我会这样做： href="@Url.Action("Edit", "Book", new { id = item.BookID})

但是，我使用href属性打开一个模式窗口，该窗口将使用Html.RenderAction来显示来自Book控制器的适当表单。

这是“书本管理器详细信息”页面底部包含的“模态”窗口：

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

由于我需要将id传递给RenderAction才能使Edit方法起作用，因此我需要在foreach中单击的项目的值-但这已不在范围内。

我尝试在BookManager的Details方法中创建ViewBag.SelectedBook，但不是将值作为所选书，而是使foreach语句循环通过，并且ViewBag.SelectedBook的值最终成为书数。 （例如，如果我在列表中有3本书，则ViewBag.SelectedBook等于3）。

我曾考虑过使用JQuery并在单击的项目上调用$（this） ，但随后我将不得不使用Javascript收集BookID并将其转换回C＃，以便将其收集到Html.RenderAction中-似乎对于我正在尝试做的。

我将如何收集被单击项的值并将其传递给模式中的Html.RenderAction ？

谢谢！

Answer 1

没有别的办法了。

我的意思是..您正在尝试使服务器端代码与客户端脚本进行交互。

由于您的模态对话框是在页面呈现时呈现的，因此您尝试执行的操作将不起作用。

我的建议是通过控制器动作加载整个模式对话框，也许像这样：

生成您的foreach链接，如下所示：

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

..将模态对话框div设为空白，如下所示：

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

创建一个采用整数作为模型的视图，例如，称为BookForm：

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

..然后，使用jQuery在每次点击时加载正确的表单：

$(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;
    });
});

然后，在BookForm视图中，可以使用ID生成表单。

希望我能正确理解您的问题。