如何将自定义内容从 html 表加载到 jquery 对话框答案

【问题标题】：How to load custom content to jquery dialog from html table如何将自定义内容从 html 表加载到 jquery 对话框
【发布时间】：2014-01-23 23:43:01
【问题描述】：

我有一个以table 格式显示的图像列表，其中包含一个更新选项，用于编辑dialog box 中的图像/描述。

我已经实现了一个javascript函数loadDialog来动态地将id传递给dialog。

但是，小编抱怨id在下面一行中无法识别：

$(this).load("@Url.Action("UpdateProjectImageDetail", new { ProjectId = id})") ;

以下是脚本和 html 文件。

$(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');
}

这是我的 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>

如何将参数从 javascript 传递到 Url.Action？

或者有没有更好的方法来解决这个问题？

任何演示/参考/解决方案都会对我有所帮助。

提前致谢！

【问题讨论】：

标签： ajax asp.net-mvc jquery-ui jquery

【解决方案1】：

抱歉，我想我知道你在追求什么。在

$(this).load("@Url.Action("UpdateProjectImageDetail", new { ProjectId = id})") ;

@Url.Action("UpdateProjectImageDetail", new { ProjectId = id})

正在运行服务器端，您需要将 id 从客户端传递到服务器。这意味着它应该看起来像这样

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

【讨论】：

删除选项工作正常。我在使用 Html.ActionLink 将 id（动态）发送到 Edit 函数时遇到问题

【解决方案2】：

@Url.Action() 是服务器端代码，因此您不能将客户端 (js) 变量传递给它。

不用看得太仔细，你可能会做这样的事情：

$(this).load("@Url.Action(...)" + "?ProjectId=" + id);

可能有一个更优雅的解决方案，但这就是我现在所有的时间...... ;)

【讨论】：