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

Question

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

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

我已经有一个页面调用 DeveloperManager/Delete，如果我现在单击它，它就会被传递 item.DeveloperID 并且会显示正确的 Developer 并在确认后将其删除。但出于方便，我想在对话框中打开该页面。

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

这是 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>
}

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