Question

在我的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>

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

Answer 1

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

Answer 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;
    }
}

Answer 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);
                }
    });

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

3 个答案: