dialog - 在 MVC 4 应用程序中打开对话框的最佳方式

Question

我刚刚开始学习 MVC，所以请耐心等待。

我有一个表格，旁边有一些选项，您可以编辑、删除和显示其详细信息。

如果我现在单击“详细信息”按钮，它将带我到另一个页面(Details.cshtml)它与显示上面表格的 Index.cshtml 位于同一 Controller 中。

这是表(Index.cshtml)的代码

@model Collusus.Models.IndexModel

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<h2>Hello @Html.ActionLink(Model.userLoggedIN, "getProfile")</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>

<table id="myTable" class="tablesorter"> 
<thead> 
<tr> 
    <th>Change ID</th> 
    <th>Owner</th> 
    <th>Priority</th> 
    <th>Disposition Date</th> 
    <th>Completion Date</th> 
    <th>Do what?</th>
</tr> 
</thead> 
<tbody> 
@for(int i=0; i<Model.changes.Count(); i++)
{
<tr> 
    <td>@Model.changes[i].ID</td> 
    <td>@Model.changes[i].Owner</td> 
    <td>@Model.changes[i].Priority</td> 
    <td>@Model.changes[i].DispositionDate.ToShortDateString()</td> 
    <td>@Model.changes[i].ActualCompletionDate.ToShortDateString()</td> 
    <td>@if (Model.changes[i].Owner == Model.userLoggedIN)
        {
            @Html.ActionLink("Delete", "Delete", new { id=Model.changes[i].ID })
            @Html.ActionLink("Edit", "Edit", new { id=Model.changes[i].ID })
        }
        @Html.ActionLink("Details", "Details", new { id=Model.changes[i].ID })
    </td>
</tr> 
}
</tbody> 
</table> 

正如您所看到的，因为下面的代码，它只会将我带到另一个页面。

@Html.ActionLink("Details", "Details", new { id=Model.changes[i].ID })

我想做的事情:

• 在对话框而不是其他页面中打开“删除”、“编辑”或“详细信息” View 。
• 仍然能够拥有与刚刚打开另一个页面相同的功能。

我不知道这是否有太多意义。我试图尽我所能地解释它，但在 Google 搜索/尝试其他解决方案中的代码时感到沮丧，但无法让它工作。

如果您建议除了 JQUERY 对话框之外的其他方式，我也愿意采用该选项。感谢所有帮助，因为我非常沮丧。

Answer 1

我假设您想将它们打开到模式对话框中。要实现此目的，您可以从 Controller 返回部分 View 。

您可以向操作链接添加一个类，如下所示:

@Html.ActionLink("Details", "Details", new { id=Model.changes[i].ID }, new { @class = "details-modal" })

您的详细信息操作方法:

public ActionResult Details(int id)
{
    // Your code here
    return PartialView("_Details", myModel); // return the partial view with the model
}

jQuery(我的想法是这样的，所以可能不是 100% 正确):

$('#my-dialog').dialog({
    autoOpen: false,
    width: 400,
    resizable: false,
    modal: true
});

$('.details-modal').click(function() {
    var theURL = $(this).attr('href');

    $('#my-dialog').load(theURL, function() {
        $(this).dialog('open');
    });

    return false; // ensures the browser is not redirected to the link's URL
});