在 asp.net MVC 操作中的弹出窗口中打开视图单击答案

【问题标题】：Open the view in popup in asp.net MVC action click在 asp.net MVC 操作中的弹出窗口中打开视图单击
【发布时间】：2015-10-18 11:50:55
【问题描述】：

我正在研究 asp.net mvc 脚手架的小型 POC。我有一个动作链接，它调用另一个控制器的动作方法，从而打开该动作方法的视图。但我希望该视图在弹出窗口中而不是在新选项卡中打开。以下是动作链接代码

@Html.ActionLink("View Clients", "Details", "Client", new { id=item.Id})

在上面的代码中，“查看客户端”是链接名称，它调用“客户端控制器”的“详细信息”方法，该方法也将 ID 作为参数传递。以下是客户端控制器：

 public class ClientController : Controller
{
  public ActionResult Details(long id = 0)
    {
        Client client = db.Clients.Find(id);
        if (client == null)
        {
            return HttpNotFound();
        }
        return View(client);
    }
  }

以上控制器方法返回客户端控制器的详细信息视图。

所以我在这里要做的是在弹出窗口中打开该特定视图。有人对此有解决方案吗？

【问题讨论】：

您需要使用 jquery 和 ajax 将您的部分视图返回到同一页面并将其添加到 DOM。
Open a view as a pop up的可能重复

标签： c# jquery asp.net-mvc asp.net-mvc-4

【解决方案1】：

使用 ajax 调用返回局部视图并将其添加到 DOM。

var url = '@Url.Action("Details", "Client")';

$('selector').load(url, { id: 1 });

【讨论】：

您可以增强您的答案并向该操作链接添加一个 id/class 并将其用作选择器，这将使答案更有用:)
由于没有 HTML 标记，因此不清楚您如何管理主页上的 ID。 “选择器”是您要填充部分视图数据的元素。传递您要加载到该选择器的 Client 的 id（例如通过点击事件）。

【解决方案2】：

将自定义属性添加到链接，使用其URL以模态形式从控制器加载PartialView。

查看：

@Html.ActionLink("View Clients", "Details", "Client", new { id = item.Id }, new { data_modal = "" })

<!-- modal placeholder-->
<div id='myModal' class='modal fade in'>
    <div class="modal-dialog">
        <div class="modal-content">
            <div id='myModalContent'></div>
        </div>
    </div>
</div>

Javascript：

$(function () {
    $.ajaxSetup({ cache: false });
    $("a[data-modal]").on("click", function (e) {        
        $('#myModalContent').load(this.href, function () {
            $('#myModal').modal({
                keyboard: true
            }, 'show');
        });
        return false;
    });
});

控制器：

public class ClientController : Controller
{
  public ActionResult Details(long id = 0)
    {
        Client client = db.Clients.Find(id);
        if (client == null)
        {
            return HttpNotFound();
        }
        return PartialView(client);
    }
}

参考： http://www.advancesharp.com/blog/1125/search-sort-paging-insert-update-and-delete-with-asp-net-mvc-and-bootstrap-modal-popup-part-1 http://www.advancesharp.com/blog/1126/search-sort-paging-insert-update-and-delete-with-asp-net-mvc-and-bootstrap-modal-popup-part-2

注意：ASP MVC 会自动将 html 属性属性中的下划线转换为破折号。 https://stackoverflow.com/a/4515095/3387187

【讨论】：