dcarneiro
dcarneiro

Reputation: 7150

Modal Form on an ASP.MVC 2 list item

I have the following list of Requests:

<% foreach (var item in Model) { %>
    <tr>
        <td><%: item.Name %></td>
        <td>
            <%: Html.ActionLink("Accept", "Accept", new { id = item.Id } %>
            <%: Html.ActionLink("Reject", "Reject", new { id = item.Id } %>
        </td>
   </tr>
<% } %>

And when someone reject a request I want to present a jQuery Modal Form so that they can enter the motive. So I replaced the reject line with:

<label id="<%: item.Id %>" class="falselink" title="<%: "Reject" %>">Reject</label>

And added the div for the form to the end of the html.

Now it's when things got messy... IMO the div containing the modal form should contain a PartialView. Something like:

<div id="modal-form" title="Reject Request">
    <% Html.RenderPartial("RejectMotive", itemId);
</div>

and I need to get and pass it the Id on the jquery part:

$('.falselink').click(function () {
    // get the item id and pass it to the modal-form
    $('#modal-form').dialog('open');
});

Is this the right way to deal with this situation and how can I pass to the jquery and then to the Partial View?

Upvotes: 0

Views: 186

Answers (1)

Darin Dimitrov
Darin Dimitrov

Reputation: 1038800

You could place a hidden field inside this form which will contain the item id and just before opening the dialog assign its value:

$('.falselink').click(function () {
    // you used the id of the label to store the item id
    // It would be better to use a HTML5 data-* attribute on the
    // label for this purpose such as data-id for example as ids 
    // cannot start with numbers. In this case you would simply
    // fetch it like this: var itemId = $(this).data('id');
    var itemId = this.id; 

    // set the value of the hidden field inside the form to contain the 
    // item id
    $('#hiddenItemId').val(itemId);

    // show the modal
    $('#modal-form').dialog('open');
});

Upvotes: 1

Related Questions