本文所例是基于.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 class="form-group mb-2"> <label class="control-label"> 输入任意文本作为参数传递,点击“调用Ajax”, 可以看到文本框中的内容不会变化, 说明实现了页面的局部更新。</label> <input id="inputValue" class="form-control w-auto" type="text" /> </div> <input type="button" class="btn-primary d-inline" id="btn-getResult" value="调用Ajax" /> </div> <div id="result"> 这里显示数据 </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 class="mt-5"> <div>你传入的参数为:@Model.InputValue</div> <table class="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 void OnGet(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.netcore版本查看(Asp.netCore笔记)(1)

当然,页面局部更新不是什么高深的技术,但ASP.NET Core Web应用中貌似没有提供原生的方法,初学C#,聊作笔记,仅供探讨!

,