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

Question

我刚开始学习MVC所以试着忍受我。

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

如果我现在点击详细信息按钮它会转到另一页（Details.cshtml） 它与 Index.cshtml 位于同一控制器中，显示上表。

这是表（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 })

我想做什么：

• 在对话框而不是其他页面中打开“删除”，“编辑”或“详细信息”视图。
• 仍然可以像打开另一个页面一样拥有相同的功能。

我不知道这是否有意义。我试图尽我所能地解释它，并且在搜索谷歌/尝试其他解决方案的代码时感到沮丧，但无法让它发挥作用。

如果你建议除了JQUERY对话之外的其他方式，我也愿意选择那个选项。感谢所有的帮助，因为我一直很沮丧。

Answer 1

我假设您要将它们打开到模态对话框中。要完成此操作，您可以从控制器返回部分视图。

您可以在动作链接中添加一个类，如下所示：

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