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生成表單。

希望我能正確理解您的問題。