如何为 Razor Pages (.NET Core) 绑定视图模型？

Question

假设我有这个视图模型。请记住，这是一个视图模型。不是 domain/entity 模型。

public class Cart
{
    public string Name { get; set; }
    public int Qty { get; set; }
    public decimal Price { get; set; }
    public decimal TotalPrice { get; set; }

}

如何创建 CRUD Razor 页面的脚手架？

Answer 1

代码隐藏：

public class IndexModel : PageModel
    {

        private readonly ApplicationDbContext _db;
        public IndexModel(ApplicationDbContext db)
        {
            _db = db;

        }

        public IEnumerable<Cart> Carts { get; set; }

        public async Task OnGet()
        {
            Books = await _db.Carts.ToListAsync();
        }
    }

You need :

  public class ApplicationDbContext:DbContext
        {
            public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options):base(options)
            {

            }

            public DbSet<Cart> carts { get; set; }
        }

for the View :

@model CardList.IndexModel

Answer 2

这里有一个演示，您可以参考：

OrderItem实体模型和Cart视图模型，视图模型与我们应用程序的表现层有关。它们是根据数据呈现给用户的方式而不是数据的存储方式来定义的。

 public class OrderItem
{
    public int Id { get; set; }
    public int Qty { get; set; }
    public decimal Price { get; set; }
    public decimal TotalPrice { get; set; }

    public Product Product { get; set; }
}
public class Product
{
    public int Id { get; set; }
    public string ProductName { get; set; }
    public decimal Price { get; set; }
}
public class Cart
{
    public string Name { get; set; }
    public int Qty { get; set; }
    public decimal Price { get; set; }
    public decimal TotalPrice { get; set; }
}

 public class RazorPagesDbContext:DbContext
{
    public RazorPagesDbContext(DbContextOptions<RazorPagesDbContext> options):base(options)
    { }

    public DbSet<Product> Product { get; set; }
    public DbSet<OrderItem> OrderItem { get; set; }
}

CreateOrder Razor 页面

@page
@model RazorPages2_2.Pages.Carts.CreateOrderModel
@{
  ViewData["Title"] = "CreateOrder";
}
<h1>CreateOrder</h1>

<hr />
<div class="row">
  <div class="col-md-4">
    <form method="post">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <div class="form-group">
            <label asp-for="Cart.Name" class="control-label"></label>
            <input asp-for="Cart.Name" class="form-control" />
            <span asp-validation-for="Cart.Name" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="Cart.Price" class="control-label"></label>
            <input asp-for="Cart.Price" class="form-control" />
            <span asp-validation-for="Cart.Price" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="Cart.Qty" class="control-label"></label>
            <input asp-for="Cart.Qty" class="form-control" />
            <span asp-validation-for="Cart.Qty" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="Cart.TotalPrice" class="control-label"></label>
            <input asp-for="Cart.TotalPrice" class="form-control" />
            <span asp-validation-for="Cart.TotalPrice" class="text-danger"></span>
        </div>
        <div class="form-group">
            <input type="submit" value="Create" class="btn btn-primary" />
        </div>
    </form>
  </div>
</div>

<div>
  <a asp-page="Index">Back to List</a>
</div>

@section Scripts {
  @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

CreateOrder 页面模型，Cart属性使用 [BindProperty] 属性选择加入模型绑定。当创建表单发布表单值时，ASP.NET 核心运行时将发布的值绑定到 Cart 模型，然后将值放入实体模型。

public class CreateOrderModel : PageModel
{
    private readonly RazorPagesDbContext _context;

    public CreateOrderModel(RazorPagesDbContext context)
    {
        _context = context;
    }

    public IActionResult OnGet()
    {
        var product = _context.Product.FirstOrDefault();
        Cart = new Cart
        {
            Name = product.ProductName,
            Price = product.Price,
            Qty = 2,
            TotalPrice = product.Price * 2
        };
        return Page();
    }

    [BindProperty]
    public Cart Cart { get; set; }

    public async Task<IActionResult> OnPostAsync()
    {
        if (!ModelState.IsValid)
        {
            return Page();
        }
        var product = _context.Product.SingleOrDefault(p => p.ProductName == Cart.Name);
        OrderItem orderItem = new OrderItem
        {

            Price = Cart.Price,
            Qty = Cart.Qty,
            TotalPrice = Cart.TotalPrice,
            Product = product
        };
        _context.OrderItem.Add(orderItem);
        await _context.SaveChangesAsync();

        return RedirectToPage("../Index");
    }
}

结果：您可以参考 offocial doc 关于 Razor 页面的内容来创建您想要的页面。

如何为 Razor Pages (.NET Core) 绑定视图模型？

How to bind view model for Razor Pages (.NET Core)?

c#

asp.net-core

razor-pages