Author Image

admin

2周前 80

ASP.NET Core Razor Pages中查询字符串参数的使用

导航:

在此视频中,我们将讨论ASP.NET Core Razor Pages中的查询字符串参数。考虑以下显示学生列表的 Razor Pages。单击“详情”按钮时,必须将学生的ID传递到Details.cshtml 的 Razor Pages。

然后,Details页面会查询数据并显示各个学生的详细信息。

查看以下代码:

                <a asp-page="/Students/Details"   asp-route-id="@student.Id" class="btn btn-primary m-1">详情</a>
  • asp-page 标记助手指向Details.cshtml的 Razor Pages
  • asp-route-ID标记助手将 学生 ID传递到Details的 Razor Pages
  • 您可以根据需要添加尽可能多的 asp-route-* 标记助手。例如,除了学生ID外,如果要传递学生姓名,则可以使用 asp-route-name 的taghelper。

默认情况下,学生ID作为查询字符串参数传递到“Details.cshtml”页面

https://localhost44383/Students/Details?ID=1

ASP.NET Core 中的模型绑定会自动将ID查询字符串参数值映射到PageModel类中OnGet()方法上的ID参数。

Details.cshtml.cs

现在新建Details

using Microsoft.AspNetCore.Mvc.RazorPages;
using StudentManagement.RazorPage.Models;
using YoYoMooc.StudentManagement.Services;

namespace StudentManagement.RazorPage.Pages.Students
{
    public class DetailsModel : PageModel
    {
        private readonly IStudentRepository studentRepository;

        public DetailsModel(IStudentRepository studentRepository)
        {
            this.studentRepository = studentRepository;
        }

        public Student Student { get;  set; }
        /// <summary>
        /// //模型绑定自动映射查询字符串id的值,映射到OnGet()方法上的设置为id参数
        /// </summary>
        /// <param name="id"></param>
        public void OnGet(int id)
        {
            Student = studentRepository.GetStudent(id);
        }
    }
}

Details.cshtml

@page
@model YoYoMooc.StudentManagement.RazorPage.Pages.Students.DetailsModel
@{
    ViewData["Title"] = "学生详情页面";
    var photoPath = "~/Images/" + (Model.Student.PhotoPath ?? "noimage.png");
}

<div class="row justify-content-center m-3">
    <div class="col-sm-8">
        <div class="card">
            <div class="card-header">
                <h1>@Model.Student.Name</h1>
            </div>

            <div class="card-body text-center">
                <img class="card-img-top" src="@photoPath" asp-append-version="true" />

                <h4>Student ID : @Model.Student.Id</h4>
                <h4>邮箱地址 : @Model.Student.Email</h4>
                <h4>专业 : @Model.Student.Major</h4>

            </div>
            <div class="card-footer text-center">
                <a asp-page="index"
                   class="btn btn-primary">返回</a>
                <a href="#" class="btn btn-primary">编辑</a>
                <a href="#" class="btn btn-danger">删除</a>
            </div>
        </div>
    </div>
</div>

IStudentRepository.cs


using StudentManagement.RazorPage.Models;
using System.Collections.Generic;

namespace YoYoMooc.StudentManagement.Services
{
    public interface IStudentRepository
    {
        IEnumerable<Student> GetAllStudents();
        Student GetStudent(int id);
    }
}

MockStudentRepository.cs

using StudentManagement.RazorPage.Models;
using System.Collections.Generic;
using System.Linq;

namespace YoYoMooc.StudentManagement.Services
{
 public class MockStudentRepository : IStudentRepository
    {
        private List<Student> _studentList;

        public MockStudentRepository()
        {
            _studentList = new List<Student>()
            {
                 new Student() { Id = 1, Name = "张三", Major = MajorEnum.ComputerScience, Email = "Tony-zhang@52abp.com" },
            new Student() { Id = 2, Name = "李四", Major = MajorEnum.ElectronicCommerce, Email = "lisi@52abp.com" },
            new Student() { Id = 3, Name = "王二麻子", Major = MajorEnum.Mathematics, Email = "wang@52abp.com" },

            };
        }

        public IEnumerable<Student> GetAllStudents()
        {
            return _studentList;
        }

        public Student GetStudent(int id)
        {
            return _studentList.FirstOrDefault(e => e.Id == id);
        }
    }
}

当前的路由URL地址栏:

ASP.NET Core RouteOptions

RouteOptions对象允许我们定义查询字符串参数。例如,如果您希望URL中的查询字符串小写,请将LowercaseQueryStrings属性设置为true。为此,必须将LowercaseUrls属性设置为true。这两个属性的默认值为false。

顾名思义,AppendTrailingSlash属性在生成的URL后面附加一个斜杠。

 services.Configure<RouteOptions>(options =>
            {
                //如果你希望URL中的查询字符串为小写
                //就需要将LowercaseUrls为true,默认值为false
                options.LowercaseUrls = true;
                //LowercaseQueryStrings的值也需要设置为true,默认值为false
                options.LowercaseQueryStrings = true;
                //  在生成的URL后面附加一个斜杠
                options.AppendTrailingSlash = true;
            

            });