如何在 ASP.Net Core Razor 的多个特定页面中重复使用相同的通用页面

How to re-use the same generic page in several specific pages in ASP.Net Core Razor

提问人:Douar Gwenn 提问时间:11/2/2023 最后编辑:Douar Gwenn 更新时间:11/9/2023 访问量:48

问:

我是设计和编码的初学者。我正在尝试实现一个简单的基于页面的页面,该页面处理存储在文件中的某些数据的显示和管理。该页面提供了一个用于执行“插入”操作的表单,并在表格中显示文件。表格的每一行都与一个“删除”按钮组合在一起,以删除指定的行。htmlrazorcshtmlcsvcsv

我想将这个通用页面模型和数据(id-name)模型重新使用到不同的专用页面中:每个页面都有自己的名称,并且基于不同的数据文件(如果基础数据存储在数据库中,则基于不同的表)。

这是我基于简化数据模型(id-name)的代码。

首先,Data.cs 文件中的(简单)模型:

using System.ComponentModel.DataAnnotations;

namespace WebApp.Models
{
    public class Data
    {
        [Key]
        public int Id { get; set; }
        [Required]
        public string? Name { get; set; }
    }
}

然后,Data.cshmtl.cs 文件:

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.AspNetCore.Mvc.Rendering;
using WebApp.Models;

namespace WebApp.Pages
{
    [BindProperties]
    public class DataModel : PageModel
    {
        private readonly IWebHostEnvironment _webHostEnvironment;
        private readonly char[] _delim = { ',' };
        private string DataFile => Path.Combine(_webHostEnvironment.WebRootPath, FileName);
        public List<Data> DataList { get; set; } = new List<Data>();
        public Data DataItem { get; set; } = new Data();
        public string TitleName { get; set; } = "Data Set";
        public string FileName { get; set; } = "FileName.csv";
        public string[] Headers = new string[]
        {
            "Id",
            "Name",
        };

        private void LoadFile()
        {
            <!-- Loading DataFile to DataList -->
        }

        public void InsertIntoFile(Data dataNew)
        {
            <!-- Inserting dataNew into DataList and DataFile -->
        }

        public void DeleteFromFile(Data dataOld)
        {
            <!-- Deleting dataOld from DataFile -->
        }

        public DataModel(IWebHostEnvironment webHostEnvironment)
        {
            _webHostEnvironment = webHostEnvironment;
        }

        public void OnGet()
        {
            LoadFile();
        }

        public IActionResult OnPostInsert()
        {
            InsertIntoFile(DataItem);
            LoadFile();
            return Page();
        }

        public IActionResult OnPostDelete()
        {
            DeleteFromFile(DataItem);
            LoadFile();
            return Page();
        }
    }
}

最后,Data.cshtml 文件:

@page
@using WebApp.Models;
@model WebApp.Pages.DataModel
@{
    ViewData["Title"] = @Model.TitleName;
}

<h2>@ViewData["Title"]</h2>

<form method="post" asp-page-handler="Insert">
    <div>
        <label>
            <text>Data id:&nbsp;</text>
            <input asp-for="DataItem.Id" required placeholder="Enter the data id">
            <text>Data name:&nbsp;</text>
            <input asp-for="DataItem.Name" required placeholder="Enter the data name">
        </label>
    </div>
    <br />
    <div>
        <button type="submit" class="btn btn-primary">
            Insert
        </button>
    </div>
</form>
<br />
<div style="overflow-y:scroll; height:400px;">
    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                @foreach (string header in Model.Headers)
                {
                    <th>@header</th>
                }
                <th>Delete</th>
            </tr>
        </thead>
        <tbody>
            @foreach (Data dataItem in Model.DataList)
            {
                <tr>
                    <td>@dataItem.Id</td>
                    <td>@dataItem.Name</td>
                    <td>
                        <form method="post" asp-page-handler="Delete">
                            <input type="hidden" asp-for="@dataItem.Id" required>
                            <input type="hidden" asp-for="@dataItem.Name" required>
                            <button type="submit" class="btn btn-danger">
                                Delete
                            </button>
                        </form>
                    </td>
                </tr>
            }
        }
        </tbody>
    </table>
</div>

我真的不知道如何从那里开始,以便重用这个框架来管理来自/到相应页面上的任何其他文件的数据:我想分解这段代码(我想在不同的页面上使用相同的插入/删除/表框架,而不必重写同样的东西),简单的区别是我需要为每个不同的页面定位不同的底层文件。csv

到目前为止,我所做的是将上述 Data.cshtml.cs 文件的构造函数修改为

public DataModel(IWebHostEnvironment webHostEnvironment, string titleName, string fileName)
{
    _webHostEnvironment = webHostEnvironment;
    TitleName = titleName;
    FileName = fileName;
}

并创建另一个视图,其中 Data1.cshtml.cs 文件如下所示:razor

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace WebApp.Pages
{
    [BindProperties]
    public class Data1Model : PageModel
    {
        private readonly IWebHostEnvironment _webHostEnvironment;
        public string TitleName = "Data Set 1";
        public string FileName = "File1Name.csv";

        public Data1Model(IWebHostEnvironment webHostEnvironment)
        {
            _webHostEnvironment = webHostEnvironment;
        }

        public void OnGet()
        {
            DataModel data = new DataModel(_webHostEnvironment, TitleName, FileName);
            data.OnGet();
        }
    }
}

和 Data1.cshtml 文件(带有一些参数冗余)如下所示:

@page
@using WebApp.Models;
@model WebApp.Pages.Data1Model
@{
    Layout = "Data";
}

<a asp-page="Data"
   asp-route-titleName="Data Set 1"
   asp-route-fileName="File1Name.csv"></a> 

它不适用于 Data1.cshtml.cs 的 OnGet()(它遍历代码但不呈现任何结果),我不知道如何实现操作 OnPostInsert() 和 OnPostDelete()。

C# asp.net Razor

评论

0赞 Poul Bak 11/9/2023
你有没有看过页面? Yo 可以传递 a 以不同的方式呈现每个部分。partial<partial name="...." />Model

答: 暂无答案