如何使用 AJAX 从布局中请求视图？答案

【问题标题】：How do I request views from a layout using AJAX?如何使用 AJAX 从布局中请求视图？
【发布时间】：2016-11-05 19:20:33
【问题描述】：

在我的 MVC 应用程序中，我不希望每次选择视图时都重新加载布局页面。如果可以使用 ajax 加载视图以保持良好和快速，并允许我保留某些在您四处移动时被清除的界面状态，那就太好了。

我最初的方法是向 _Layout.cshtml 添加一些 ajax，然后在请求视图时将该请求传递给将抓取该页面的控制器方法。然而，我最终所做的只是再次返回整个视图。

这是我到目前为止的代码，我是在正确的轨道上还是这完全错误？

布局 Ajax 脚本

<script>
    $(function () {

        var content = document.getElementById('content');

        //When a user selects a link, pass the data attribute and 
        //use it to construct the url
        $('#sidebar a').on("click", function () {

            var page = $(this).data('page');
            console.log("Data Attrib : " + page);

            $.ajax({
                type: 'GET',

                url: '@Url.Content("~/Home/")' + page,                    
                success: function (data) {
                    $('#content').html(data);
                    console.log("Success");
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    console.log("Error: " + thrownError);
                }
            })
        })
    });
</script>

正如我所说，这种工作方式，但它并不完美，因为它将整个页面返回到包括布局在内的内容区域，理想情况下我只想要核心视图数据。

【问题讨论】：

把它放在你不想包含布局的视图顶部：@{Layout = null;}
另一种选择是使用部分视图并检索它们 - 它们不使用布局模板，并且旨在插入到另一个页面中。

标签： ajax asp.net-mvc

【解决方案1】：

您可以创建具有 1 个布局的单页应用程序，并在主控制器和索引操作方法中创建菜单或用户设置或其他内容现在您可以使用没有布局文件的数据内容 html 通过 Ajax 调用加载其他操作并将其附加到容器中当用户单击另一个菜单时，清除旧内容并添加新内容，或者您可以创建标签条或窗口

【讨论】：

【解决方案2】：

Layout.cshtml

<script>
$(function () {

    //When a user selects a link, pass the data attribute and 
    //use it to construct the url
    $('#sidebar a').on("click", function () {

        var page = $(this).data('page');

        $.ajax({
            type: 'POST',
            url: '/Home/Pages',
            data: { pageValue: page },
            success: function (data) {
                $('#content').html(data);
                console.log("Success");
            },
            error: function (xhr, ajaxOptions, thrownError) {
                console.log("Error: " + thrownError);
            }
        })
    })
});

控制器

public class HomeController : Controller
{
    [HttpPost]
    public string Pages(string pageValue)
    {
        string result = //Whatever

        return result;
    }
}

【讨论】：

【解决方案3】：

控制器

public ActionResult SomeAction(String someparams)
    {
       //Make the model
        SomeModel someModel = new SomeModel();
        someModel.someparams = someparams;
        return PartialView("SomePartialView", someModel);
    }

在视图中

 $.ajax({
                url: "/Home/SomeAction",
                type: "POST",
                dataType : "html",
                data: json,
                contentType: 'application/json; charset=utf-8',
                success: function(data){ 

                    $('#SomeDivID').html(data);
                }
    });

【讨论】：