Question

I am using @Darin Dimitrov’s method explained in Loading a partial view in jquery.dialog to allow users to click on one of their Private Messages and view it inside a modal box. I am using ASP.NET MVC3 and Razor as my view engine. But I’m having some trouble getting this to work… Below is what I’ve attempted so far:

The messages are displayed in a table:

<tr id="@item.Id" class="openConversationLink">
    <td class="newMessageStatus">@MessageStatus(item)</td>
    <td class="msgSenderName">@item.Sender</td>
    <td class="msgSubject">@item.Subject</td>
    <td class="msgLastUpdated">@item.LastUpdated</td>
    <td class="modalItemActions"></td>
</tr> 

And inside the same partial view, I got the following script block:

<script type="text/javascript">
    $(function () {
        $("#conversationModal").dialog({
            autoOpen: false,
            width: 850,
            height: 600,
            resizable: false,
            draggable: false,
            modal: true,
            open: function (event, ui) {
                var convId = ui.attr('id');
                alert(convId);
                $(this).load('@Url.Action("Conversation", "Message", new { conversationId = convId})');

            }
        });

        $(".openConversationLink").click(function () {
            $("#conversationModal").dialog('open');
        });
    });
</script>

Basically, I’m not sure what the event and ui parameters inside the open handler refer to. So a little explanation on both would be appreciated. But anyway, even the messages do not get displayed now, I keep getting those error:

Compiler Error Message: CS0103: The
name “convId” does not exist in the
current context. Source:
$(this).load(‘@Url.Action(“Conversation”,
“Message”, new { conversationId =
convId})’);

Basically, I do not want that line to get triggered until I actually click on one of the rows (to open the conversation dialog), but it seems like it’s actually getting triggered when the Messages page opens.

UPDATE:

Here’s my jQuery code now:

$(function () {
    $("#conversationModal").dialog({
        autoOpen: false,
        width: 850,
        height: 600,
        resizable: false,
        draggable: false,
        modal: true,
        open: function (event, ui) {
            var convId = event.target.attr('id');
            alert(convId);
            $(this).load('Message/Conversation/' + convId);

        }
    });

    $(".openConversationLink").click(function () {
        $("#conversationModal").dialog('open');
    });
});

Anything that can be done about that? 🙂

Answer 1

Before you go any further, you need to understand the key thing here >

Url.Action() method is working on the server side. Whatever is passed on to it has to be decided on the server side. Any variables declared in Javascript at the client-side are totally oblivious to the server-side code hence the compiler is trying to find the convId at the server-side code and obviously can’t find it. So it gives the error.

Now saying that, we need to find a way to pass the convId to the server. For that you would need to do some manual string concatenation at the client-side. you can do something like this >

'@Url.Action("Conversation", "Message")' + '?conversationId='+convId

You see we used the server side code to generate /Message/Conversation and then concatenated it at client side to make it /Message/Conversation/?conversationId=valueOfconvId

I hope it makes sense 🙂

EDIT:

<script type="text/javascript">
var clickedId;
   $(function () {
        $("#conversationModal").dialog({
            autoOpen: false,
            width: 850,
            height: 600,
            resizable: false,
            draggable: false,
            modal: true,
            open: function (event, ui) {

                $(this).load('Message/Conversation/' + clickedId);

            }
        });

        $(".openConversationLink").click(function () {
            clickedId = $(this).attr("id");
            $("#conversationModal").dialog('open');
        });
    });
</script>

makes sense now? we are saving the id of the clicked tr in a global variable