How to load custom content to jquery dialog from html table - ajax

Question

I have a list of images presented in a table format with an update option to edit the image/description in a dialog box.
I have implemented a javascript function loadDialog to dynamically pass the id to the dialog.
However, the editor complains that id is not recognized in the line below:
$(this).load("#Url.Action("UpdateProjectImageDetail", new { ProjectId = id})") ;
Following are the script and html files.
$(function(){
$('#OpenImgDialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
title: 'Add/Update Image',
modal: true,
buttons: {
"Cancel": function () {
$(this).dialog("close");
}
}
});
});
function loadDialog(id) {
var Pid = id;
$("#OpenImgDialog").dialog({
open: function (event, ui) {
var Pid = id;
$(this).load("#Url.Action("UpdateProjectImageDetail", new { ProjectId = id})") ;
}
});
$('#OpenImgDialog').dialog('open');
}
Here is my HTML
<table>
<tr>
<th>
Image
</th>
<th>
Description
</th>
<th></th>
</tr>
#foreach (var item in Model.Images) {
<tr>
<td>
<img src ="#item.ImageString" width="200" height="100" />
</td>
<td>
#Html.DisplayFor(modelItem => item.Description)
</td>
<td>
<a class="UpdateImage" href="#" onclick="loadDialog(#item.Id)">Edit</a>
#Html.ActionLink("Delete", "Delete", new { id=item.Id })
</td>
</tr>
}
</table>
How can I pass arguments from javascript to Url.Action?
Or is there a better approach to solving this problem?
Any demo/reference/solution will be helpful for me.
Thanks in advance!

Answer 1

Appologies I think I know what you are after.
in the
$(this).load("#Url.Action("UpdateProjectImageDetail", new { ProjectId = id})") ;
the
#Url.Action("UpdateProjectImageDetail", new { ProjectId = id})
is running server side you need to pass in the id from the client to the server. which meands it should look something like this
function loadDialog(id) {
var Pid = id;
$("#OpenImgDialog").dialog({
open: function (event, ui) {
var Pid = id;
var url = '#Url.Action("UpdateProjectImageDetail")?ProjectId=' + id;
$(this).load(url) ;
}
});
$('#OpenImgDialog').dialog('open');
}

Answer 2

#Url.Action() is server side code, so you can't pass a client side (js) variable to it.
Without looking too closely, you could probably do something like:
$(this).load("#Url.Action(...)" + "?ProjectId=" + id);
There's probably a more elegant solution, but that's all I have time for right now... ;)