razor page ajax,【译】Learn Razor Pages（17.2）使用AJAX进行部分页面更新 Partial Page Update with AJAX in Razor Page...

Partial Pages由HTML和服务器端代码片段组成，可包含在任意数量的页面或布局中。 partial pages可用于将复杂页面分解为更小的单元，从而降低复杂性并允许团队同时处理不同的单元。 它们还可用于向客户端脚本中通过AJAX更新部分呈现的网页提供内容。

partial pages是单个.cshtml文件。 它没有PageModel，顶部没有@page指令。 partial可以是强类型的 - 具有@model指令，或者它可以纯粹与ViewData一起使用。 出于本文的目的，我将使用强类型partial。

该示例Working with JSON in Razor Pages时使用的相同ICarService。 Car对象的集合将传递给partial进行显示，将通过客户端脚本调用：

首先是Car entity：

public class Car

{

public int Id { get; set; }

public string Make { get; set; }

public string Model { get; set; }

public int Year { get; set; }

public int Doors { get; set; }

public string Colour { get; set; }

public decimal Price { get; set; }

}

该服务实现了接口的方法，生成并返回cars列表：

public interface ICarService

{

List GetAll();

}

public class CarService : ICarService

{

public List GetAll()

{

List cars = new List{

new Car{Id = 1, Make="Audi",Model="R8",Year=2014,Doors=2,Colour="Red",Price=79995},

new Car{Id = 2, Make="Aston Martin",Model="Rapide",Year=2010,Doors=2,Colour="Black",Price=54995},

new Car{Id = 3, Make="Porsche",Model=" 911 991",Year=2016,Doors=2,Colour="White",Price=155000},

new Car{Id = 4, Make="Mercedes-Benz",Model="GLE 63S",Year=2017,Doors=5,Colour="Blue",Price=83995},

new Car{Id = 5, Make="BMW",Model="X6 M",Year=2016,Doors=5,Colour="Silver",Price=62995},

};

return cars;

}

}

此服务已在ASP.NET核心Dependency Injection系统中注册，以便可以在整个应用程序中使用它：

public void ConfigureServices(IServiceCollection services)

{

services.AddMvc();

services.AddTransient();

}

partial本身包含一个使用Bootstrap设计的HTML表。 它被命名为_CarPartial.cshtml并放置在Pages/Shared文件夹中 - 这是Razor Pages中partial内容的默认搜索位置之一。 部分期望的模型是List：

@model List

@foreach(var car in Model)

{

@car.Model@car.Make@car.Year$@car.Price

}

通常，提供partials的handler method将不会成为特定页面中的主要hander method。 取而代之的是使用named handler。 以下代码显示了一个基本的PageModel，其中包含一个返回PartialViewResult的named handler(OnGetCarPartial)：

public class AjaxPartialModel : PageModel

{

private ICarService _carService;

public AjaxPartialModel(ICarService carService)

{

_carService = carService;

}

public List Cars { get; set; }

public void OnGet()

{

}

public PartialViewResult OnGetCarPartial()

{

Cars = _carService.GetAll();

return Partial("_CarPartial", Cars);

}

}

Partial helper method被添加到ASP.NET Core 2.2中的PageModel类中。 在Razor Pages版本(包括2.1版本)中，您必须显式创建PartialViewResult的实例并从handler method返回该实例，传入当前的ViewData字典，还可以传递partia model(如果它需要的话)：

public PartialViewResult OnGetCarPartial()

{

Cars = _carService.GetAll();

return new PartialViewResult {

ViewName = "_CarPartial",

ViewData = new ViewDataDictionary>(ViewData, Cars)

};

}

这是内容页面，当单击按钮时，jQuery用于发出AJAX请求：

@page

@model RazorPagesTests.Pages.AjaxPartialModel

Ajax

Load

@section scripts{

$(function () {

$('#load').on('click', function () {

$('#grid').load('/ajaxpartial?handler=CarPartial');

});

});

}

特别注意传递给load方法的URL - named handler method的名称(没有OnGet部分)被传递给名为handler的query string值。 如果您不想拥有查询字符串，可以在Razor页面中创建一个路径模板，该模板将一个名为handler的可选项添加到路径值：

@page "{handler?}"

这使您可以将handler method的名称作为URL的一部分传递：

$('#grid').load('/ajaxpartial/carpartial');

下面是一个替代版本，它通过jQuery使用Fetch API而不是XMLHttpRequest对象：

@page

@model RazorPagesTests.Pages.AjaxPartialModel

Ajax

Load

@section scripts{

document.getElementById('load').addEventListener('click', () => {

fetch('/ajaxpartial?handler=CarPartial')

.then((response) => {

return response.text();

})

.then((result) => {

document.getElementById('grid').innerHTML = result;

});

});

}