Question

我有一个可以通过两种方式查看的报告：摘要或详细信息。该页面默认加载“摘要”部分视图。页面顶部有两个按钮，摘要和详细信息。我想要发生的是当我单击Detail按钮时，我希望Detail partial视图加载Summary部分，反之亦然。

有没有办法可以使用Javascript加载与点击的按钮对应的局部视图？

这是主视图上的div，默认加载：

       <div data-listen="start_date end_date" data-contentrequest="_Summary" data-requestonload="true">
       </div>

Answer 1

有几种方法可以完成您的任务。我假设在您的情况下进行服务器端呼叫是可以接受的。这种方法适用于简单的应用程序。随着应用程序变得复杂，您可以按照saj

的建议查看其他MVVM框架

<强> HTML

<div>
    <button data-url = '@Url.Action("Summary","SomeController")' >Summary</button>
    <button data-url = '@Url.Action("Details","SomeController")'>Detail</button>
</div>

<div id="divContent" data-listen="start_date end_date" data-contentrequest="_Summary" data-requestonload="true">
</div>

<强>的Javascript

   $(function () {
    $("button").on('click', function () {
        $.ajax({
            type: "get",
            cache: false,
            url: $(this).data('url'),
            success: function (data, xhr, settings) {
                $("#divContent").html(data);
            }

        });
    });
});

控制器方法

public class SomeController : Controller
    {
     public ActionResult Summary()
        {
            return PartialView();
        }

        public ActionResult Details()
        {
            return PartialView();
        }
}

如何使用JS / jQuery在一个页面上的两个部分视图之间切换？

1 个答案: