javascript - 如何使用JS/jQuery在一个页面的两个局部 View 之间切换？

Question

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

有没有一种方法可以使用 Javascript 加载与单击的按钮对应的局部 View ？

这是默认加载的主视图上的 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);
            }

        });
    });
});

Controller 方法

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

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