.Net RazorPages 初体验(页面动作如何请求后台)

都说 RazorPages 比 MVC 方便, 但是第一次接触坑可能会麻爪, 特别是使用过MVC后再来第一次使用 RazorPages. 当然, 这两是可以混用的,RazorPages基于MVC.

如果页面有个操作要请求后台,怎么搞?

有点麻...

一下以 `Index` 页面 (文件 "Pages\Index.html" 和 "Pages\Index.html.cs"), 和 删除动作`Del`为例说明

/// 请求时,需要路径`handler`参数来指定接收的方法(如:?handler=Del)
/// 
/// 表单不能添加`action`标签,否则不生成验证属性字段`__RequestVerificationToken` !
/// 没有这个验证字段,服务端无法验证提交的合法性,会直接返回`400`;
/// 
/// 只能使用如下方式才能使后端(OnPostXXXXX, 如:OnPostDel)正确接收请求(以下其一即可,第一个实际是生成`formaction`标签):
/// 1. 使用`asp-page`(如:asp-page="/Index")和`asp-page-handler`(如:asp-page-handler="Del")标签在表单提交按钮中, 验证提交的内容; 否则提交到默认地址(OnPost)
/// 2. 添加`formaction`标签指定路径(如:formaction="?handler=Del")到表单提交按钮中;否则提交到默认地址(OnPost)

代码示例:

 Pages\Index.html.cs

[BindProperty]
public Models.PicInfo? PicInfo { get; set; }

/// 默认 Post
public IActionResult OnPost() {
    if (!ModelState.IsValid) {
        return Content("{\"code\":4,\"msg\":\"参数错误\"}", "application/json");
    }

    return Content("{\"code\":0}", "application/json");
}
/// 删除动作 Post
public IActionResult OnPostDel() {
    if (!ModelState.IsValid) {
        return Content("{\"code\":4,\"msg\":\"参数错误\"}", "application/json");
    }

    return Content("{\"code\":0}", "application/json");
}

 

Pages\Index.html

<div class="row">
    <div class="col-md-4">
        <form method="post">
            <input asp-for="PicInfo!.Act" value="Del" hidden class="form-control" />
            <input asp-for="PicInfo!.Album" value="Del" hidden class="form-control" />
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="PicInfo!.Name" class="control-label"></label>
                <input asp-for="PicInfo!.Name" class="form-control" />
                <span asp-validation-for="PicInfo!.Name" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="PicInfo!.Path" class="control-label"></label>
                <input asp-for="PicInfo!.Path" class="form-control" />
                <span asp-validation-for="PicInfo!.Path" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="PicInfo!.Date" class="control-label"></label>
                <input asp-for="PicInfo!.Date" class="form-control" value="2022-10-16"/>
                <span asp-validation-for="PicInfo!.Date" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-default" formaction="?handler=Del" @*asp-page="/Index" asp-page-handler="Del"*@/>
            </div>
        </form>
    </div>
</div>

@section Scripts {
@*  自动验证填写  *@ 
   @{
        await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }
}

 

Models\PicInfo.cs

public class PicInfo {
    [Display(Name = "相册")]
    public string? Album { get; set; }

    [Display(Name = "图片名称")]
    [StringLength(10, MinimumLength = 3)]
    public string? Name { get; set; }

    [Display(Name = "图片地址")]
    public string? Path { get; set; }

    [Display(Name = "动作")]
    public string? Act { get; set; }

    [Display(Name = "时间")]
    [DataType(DataType.Date)]
    public DateTime Date { get; set; }
}

 

 

(PS:you cankao)