将 ID 传递给弹出窗口的 jQuery UI 对话框答案

【问题标题】：jQuery UI dialog passing ID to popup将 ID 传递给弹出窗口的 jQuery UI 对话框
【发布时间】：2012-06-26 01:11:05
【问题描述】：

我一直在使用 Visual Studio 在 MCV 3 中创建一个视频游戏网站，但无法弄清楚如何将我的页面中的 ID 传递到弹出对话框以显示我的数据库中的正确开发者。

我现在要放置的页面是我用来执行基本 CRUD 的 DeveloperManager 页面，我正在尝试执行的功能是当我单击删除链接以打开一个对话框，要求确认应删除该开发人员，然后删除它。

我已经有一个页面调用 DeveloperManager/Delete，如果我现在单击正在传递 item.DeveloperID 并且会显示正确的开发人员并在确认后将其删除。但只是为了方便，我想在对话框中打开该页面。

正如您将看到的那样，当我单击“创建新”按钮时，我已经设法打开了一个对话框，但它不使用参数只是打开页面创建一个开发人员并关闭它。

这是 DeveloperManager 页面的代码

@model IEnumerable<ReviewSite.Models.Developer>

@{
    ViewBag.Title = "Index";
}

<h2>Developers</h2>

<p>
    @Html.ActionLink("Games","Index","GameManager")
    @Html.ActionLink("Developers","Index","DeveloperManager")
    @Html.ActionLink("Publishers","Index","PublisherManager")
    @Html.ActionLink("Genres","Index","GenreManager")
</p>

<button id="createLink">Create New</button>

<table>
    <tr>
        <th>
            Developer Name
        </th>
        <th>
            Developer URL
        </th>
    </tr>

    @foreach (var item in Model) 
    {
        <tr>
            <td>
                <span class = "DeveloperName" >@Html.DisplayFor(modelItem => item.DeveloperName)</span>
            </td>
            <td>
                <span class = "DeveloperURL" >@Html.DisplayFor(modelItem => item.DeveloperURL)</span>
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id = item.DeveloperID }, new { id = "editLink" }) |
                @Html.ActionLink("Details", "Details", new { id=item.DeveloperID }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.DeveloperID}, new { @class = "deleteLink"})
            </td>
        </tr>
    }

    </table>


<script type="text/javascript">
    $(document).ready(function () {
        var $createDialog = $('<div></div>')
        .load('/DeveloperManager/Create')
        .dialog({
            autoOpen: false,
            title: 'Create Developer',
            modal: true
        });
        $('#createLink').click(function() {
            $createDialog.dialog('open');

            return false;
        });
    });
</script>

当我点击删除时，它会将此页面称为对话框

@model ReviewSite.Models.Developer

@{
ViewBag.Title = "Delete";
}

<h2>Delete</h2>

<p>
@Html.ActionLink("Games","Index","GameManager")
@Html.ActionLink("Developers","Index","DeveloperManager")
@Html.ActionLink("Publishers","Index","PublisherManager")
@Html.ActionLink("Genres","Index","GenreManager")
</p>

<h3>Are you sure you want to delete @Model.DeveloperName?</h3>
<fieldset>
<legend>Developer</legend>

<div class="display-label">Developer Name</div>
<div class="display-field">
    @Html.DisplayFor(model => model.DeveloperName)
</div>

<div class="display-label">DeveloperURL</div>
<div class="display-field">
    @Html.DisplayFor(model => model.DeveloperURL)
</div>

</fieldset>
@using (Html.BeginForm()) {
<p>
    <input type="submit" value="Delete" /> |
    @Html.ActionLink("Back to List", "Index")
</p>
}

【问题讨论】：

标签： jquery asp.net html dialog parameter-passing

【解决方案1】：

http://jsfiddle.net/umwMU/6/

将 item.DeveloperID 分配给链接上的属性。

@Html.ActionLink("Delete", "Delete", new { id = item.DeveloperID}, new { @class = "deleteLink", @devid = item.DeveloperID })

然后在为对话框加载 html 时在查询字符串上使用该 id。

$('.deleteLink').click(function(evt) {
    evt.preventDefault();

    var developerID = $(this).attr("devid");

    var url = '/DeveloperManager/Delete/' + developerID;
    var $deleteDialog = $('#deleteDialog').load(url, function() {
        $deleteDialog.dialog({
            autoOpen: true,
            title: 'Delete Developer',
            modal: true
        });
    });
});

【讨论】：