How to dynamically pass a value from a foreach loop to a variable in a div?

Question

We have a view that has a list of applications listed for a current user. The list is populated by a foreach loop and contains an application name and a status, along with an action link.

The link opens a JQuery popup form to request the access is changed if the status is N/A.

This works nicely, however, we want to automatically enter the application name to the form in the popup but because a the foreach loop is used we can't pass the application name across to the div being used by the JavaScript.

Has anyone done this that can point us in the right direction?

View:

@{
    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 Popup:

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

Thank you for any assistance in solving this problem.

Answer 1

You can add a javascript function to your actionlink

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

Then modify your jQuery popup like

   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");
            }
        }
    });
    }