本文所例是基于.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.NET Core Web应用中貌似没有提供原生的方法,初学C#,聊作笔记,仅供探讨!
,