在asp.net MVC操作中单击弹出式打开视图

本文关键字：弹出式 视图 单击 asp net MVC 操作 | 更新日期: 2023-09-27 18:18:15

我在asp.net mvc脚手架的小POC工作。我有一个动作链接，它调用另一个控制器的动作方法反过来打开那个动作方法的视图。但我希望这个视图在弹出窗口中打开，而不是在新选项卡中。下面是动作link

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

在上面的代码中'View Clients'是链接名称，它调用'客户端控制器'的'Details'方法，该方法也传递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);
    }
  }

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

这里我要做的是在弹出框中打开那个特定的视图。有人有解决办法吗?

在asp.net MVC操作中单击弹出式打开视图

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

var url = '@Url.Action("Details", "Client")';
$('selector').load(url, { id: 1 });

将自定义属性添加到链接中，使用其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-1http://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

相关文章：