本文所例是基于.NET6.0,工程类型是“ASP.NETCoreWeb应用”,不是MVC项目。测试环境为vs2022社区版。需要添加两个页面:主页面,结果页面包含动态数据。某个页面不需要布局页时,将Layout设成null即可。

本文所例是基于.NET 6.0,工程类型是“ASP.NET Core Web应用”,不是MVC项目。测试环境为vs2022社区版。
需要添加两个页面:
主页面(TestMain),结果页面(TestResult)包含动态数据。
核心方法:
主页面(TestMain)直接用Ajax的get方法(不是getJSON)请求结果页面,并在主页面显示出来,结果页面已在服务器端渲染好了,不需要再在客户端拼接啥的,这也符合微软一直想干掉js的目标。
关键点:结果页面(TestResult)不要引用布局页
@{Layout = null;}
在Pages/_ViewStart.cshtml中,默认统一指定了视图的布局页,不用每个视图再指定了,可减少代码量。某个页面不需要布局页时,将Layout设成null即可。
不这样干会怎样?只是Nav导航,footer啥的就会在结果中嵌套显示而已。
参数传递:本例中用了@page令,采用页面路由的方式传递
“...TestResult/xxx”,
也可在Ajax请求中用“?value=xxx”的方式。
主页面:(TestMain.cshtml)纯Html,本例中不用cs代码
@page@model RazorPagesMovie.Pages.Movies.TestMainModel@{}<div><h4>Ajax Test</h4><div ><label > 输入任意文本作为参数传递,点击“调用Ajax”,可以看到文本框中的内容不会变化,说明实现了页面的局部更新。</label><inputtype="text" /></div><input type="button"value="调用Ajax" /></div><div >这里显示数据</div><script>/*注意要把“_Layout.cshtml”中jquery.js的引用移动到head段中去,不然没有效果。*/$("#btn-getResult").on("click",function(){$.get(`/Movies/TestResult/${$("#inputValue").val()}`,function(x){$("#result").html(x);});});</script>
结果页面Html:TestResult.cshtml
@page "{inputvalue?}"@*若要指定页面路由、添加路由段或向路由添加参数,请使用页面的 @page 指令。*@@*?表示此参数可选*@@model RazorPagesMovie.Pages.Movies.TestResultModel@{Layout = null;}<div ><div>你传入的参数为:@Model.InputValue</div><table ><tr><th>Name</th><th>Value</th></tr>@foreach (var item in Model.Rets){<tr><td>@item.Name </td><td>@item.Value</td></tr>}</table></div>
结果页面cs:TestResult.cshtml.cs
using Microsoft.AspNetCore.Mvc.RazorPages;namespace RazorPagesMovie.Pages.Movies{public class TestResultModel : PageModel{//示例数据类public class _ret{public int Value { get; set; }public string? Name { get; set; }}//传入的参数public string InputValue = null;public List<_ret> Rets = new List<_ret>();public voidOnGet(string inputvalue){//产生一组随机数据for(int i = 0; i < 5; i){Rets.Add(new _ret {Value=Random.Shared.Next(1,100),/*产生一个随机数*/Name="Value" i });}InputValue= inputvalue;}}}
运行效果:
当然,页面局部更新不是什么高深的技术,但ASP.NET Core Web应用中貌似没有提供原生的方法,初学C#,聊作笔记,仅供探讨!
