3

我刚开始学习 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 对话框之外的另一种方式，我也愿意采用该选项。感谢所有帮助，因为我一直很沮丧。

4

1 回答 1

3

我假设您想将它们打开到模式对话框中。为此，您可以从控制器返回部分视图。

您可以像这样向您的操作链接添加一个类：

@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
});
于 2012-11-18T06:08:22.167 回答