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

时间:2012-06-24 14:14:36

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

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

我现在提出的页面是我的DeveloperManager页面,我用来做基本的CRUD,而我正在尝试做的功能就是当我点击删除链接打开一个对话框,要求确认所说的开发者应该被删除然后删除它。

我已经有一个页面调用DeveloperManager / Delete,如果我现在只是点击正在通过item.DeveloperID并且会启动正确的开发人员并在确认后删除它。但只是出于方便,我想在对话框中打开该页面。

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

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

1 个答案:

答案 0 :(得分:0)

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