如何動態地將一個foreach循環中的值傳遞給div中的一個變量？

Question

我們有一個視圖，其中列出了當前用戶列出的應用程序。該列表由foreach循環填充，幷包含應用程序名稱和狀態以及操作鏈接。

鏈接打開一個JQuery彈出窗體來請求在狀態爲N/A時更改訪問。

這很好用，但是，我們希望自動將應用程序名稱輸入到彈出式窗體中，但由於使用了foreach循環，因此無法將應用程序名稱傳遞給JavaScript使用的div。

有沒有人能做到這一點，可以指引我們走向正確的方向？

查看：

@{ 
    ViewBag.Title = "User Details"; 
} 

<h2>User Details</h2> 

<p><b>@ViewBag.UserName</b></p> 

    <table class="table"> 
     <tr> 
      <th> 
       Application Name 
      </th> 
      <th> 
       Status 
      </th> 
      <th> 

      </th> 
      <th> 

      </th> 

     </tr> 

      @if (ViewBag.ApplicationStatuses.Count > 0) 
      { 
       @*Iterating Amadeus model using ViewBag *@ 
       foreach (var item in ViewBag.ApplicationStatuses) 
       { 
       <tr> 
        <td> 
         @item.Key 
        </td> 
        <td> 
         @item.Value 
        </td> 
        <td> 
         @Html.ActionLink("Contact IT", "ContactITServices", "User", new { userName = ViewBag.userName, applicationName = item.Key }, new { @class = "contactIT" }) 
        </td>             
       </tr> 
       } 
      } 

<div id="contact-it" title="Contact IT"> 
    @*change message to something less verbose?*@ 
    @ViewBag.UserName does not exist in this system. Would you like to send a request to IT services to add this user to the application? 
    <hr/> 
    <p> 
     All form fields are required. 
    </p> 
    <form> 
     <fieldset> 
      <p> 
       <label for="userName">User Name: </label> 
       <input type="text" name="name" id="name" value="@ViewBag.UserName" class="text ui-widget-content ui-corner-all" readonly> 
      </p> 
      <p> 
       <label for="Application">Application: </label> 
       <input type="text" name="name" id="name" value="Amadeus" class="text ui-widget-content ui-corner-all" readonly> 
      </p> 
      <p> 
       <label for="Comments">Comments: </label> 
       <textarea id="comments" rows="8" cols="60" class="text ui-widget-content ui-corner-all">Write message here.</textarea> 
      </p> 

       <!-- Allow form submission with keyboard without duplicating the dialog button --> 
       <input type="submit" tabindex="-1" style="position:absolute; top:-1000px"> 
     </fieldset> 
    </form> 
</div> 

@section Scripts { 
    <link href="~/Content/jquery-ui-1.11.1.css" rel="stylesheet" /> 
    <script src="~/Scripts/jquery-ui-1.11.1.js"></script> 
    <script src="~/Scripts/Dialog.js"></script> 
    <script src="~/Scripts/contactIT.js"></script> 
} 

JQuery的彈出窗口：

$("#contact-it").hide(); 
$(function() { 
    $(".contactIT").click(function (e) { 
     e.preventDefault(); 
     $("#contact-it").dialog({ 
      resizable: false, 
      //height: 220, 
      width: 425, 
      modal: true, 
      buttons: { 
       "OK": function() { 
        $(this).dialog("close"); 
       }, 
       "Cancel": function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 
     $("#contact-it").dialog("open"); // <------- open dialog this way. 
    }); 
}); 

感謝您對解決這個問題的任何援助。

Answer 1

您可以添加JavaScript函數的ActionLink的

@Html.ActionLink("Contact IT", "ContactITServices", "User", new { userName = ViewBag.userName, applicationName = item.Key }, new { @class = "contactIT",@onclick="func("+item.Key+")" }) 

然後修改您的jQuery彈出像

function func(key) 
    { 
    $("#contact-it").dialog({ 
     resizable: false, 
     //height: 220, 
     width: 425, 
     modal: true, 
     buttons: { 
      "OK": function() { 
       $(this).dialog("close"); 
      }, 
      "Cancel": function() { 
       $(this).dialog("close"); 
      } 
     } 
    }); 
    }