Asp.NetCore Razor 模式 Web 应用

ASP.NET Core Razor 页面教程
本文介绍如何使用ASP.NET Core的Razor页面功能快速构建Web UI。通过创建项目、设置数据模型、添加基本CRUD操作等步骤,展示了Razor页面在实际开发中的应用。

Razor 页面是 ASP.NET Core MVC 的一个新功能,它可以使基于页面的编码方式更简单高效。

Razor 页面是 ASP.NET Core 2.0 中的一个新选择,它是基于页面的编程模型,可以实现更简单、更高效地生成 Web UI

安装 .NET Core 2.0.0 或更高版本。

如果在使用 Visual Studio,请使用以下工作负载安装 Visual Studio 2017 版本 15.3 或更高版本:

 

一、 创建Razor项目

  1. 新建项目

 

2. 选择web应用程序,不是选择空,这样可以查看默认的代码结构。

 

3. 代码结构

 

 二、 项目文件和文件夹

   1. wwwroot :包含静态文件。 请参阅使用静态文件

   2. Pages: Razor Pages的文件夹。

   3. appsettings.json:配置文件

   4. Program.cs: 托管 ASP.NET Core 应用。

   5. Startup.cs:配置服务和请求管道。 请参阅启动

 三、 添加数据模型

   

  Movie类:

    public class Movie
    {
        public int ID { get; set; }

        [Display(Name = "标题")]
        [StringLength(10, MinimumLength = 3)]
        public string Title { get; set; }

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

        [Display(Name = "类型")]
        public string Genre { get; set; }
        [Display(Name = "价格")]
        public decimal Price { get; set; }
    }
}

MovieContext类:(EF MySql Core)

    public class MovieContext : DbContext
    {
        public MovieContext(DbContextOptions<MovieContext> options)
                : base(options)
        {
        }
        public DbSet<Movie> Movie { get; set; }
    }

  appsettings.json

{
  "Logging": {
    "IncludeScopes": false,
    "LogLevel": {
      "Default": "Warning"
    }
  },
  "ConnectionStrings": {
    "MovieContext": "Data Source=;Database=;uid=root;pwd=;port=3306;SslMode=none;Convert Zero Datetime=true;persist security info=true;charset=utf8;Pooling=true;"
  }
}

Startup类:(默认依赖注入)

这里需要在NuGet中下载mysql core 包 MySql.Data.EntityFrameworkCore

 

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddDbContext<MovieContext>(options =>
      options.UseMySQL(Configuration.GetConnectionString("MovieContext")));
            services.AddMvc();
        }

 

四、实现增,删,改,查

Razor 页面派生自 PageModel。 按照约定,PageModel 派生的类称为 <PageName>Model。 此构造函数使用 依赖关系注入将 MovieContext 添加到页。
Movie 属性使用 [BindProperty] 特性来选择加入 模型绑定。 当“创建”表单发布表单值时,ASP.NET Core 运行时将发布的值绑定到 Movie 模型。当页面发布表单数据时

     

 

  1. 对页面发出请求时,OnGetAsync 方法向 Razor 页面返回影片列表。 在 Razor 页面上调用 OnGetAsync 或 OnGet 以初始化页面状态。 在这种情况下,OnGetAsync 将获得影片列表并显示出来。

  2. 当 OnGet 返回 void 或 OnGetAsync 返回 Task 时,不使用任何返回方法。

 

  3.  当返回类型是 IActionResult 或 Task<IActionResult> 时,必须提供返回语句。

 

 

   cs:

    public class CreateModel : PageModel
    {
        private readonly MovieContext _context;
        public CreateModel(MovieContext context)
        {
            _context = context;
        }

        public IActionResult OnGet()
        {
            return Page();
        }

        [BindProperty]
        public WebApp_Razor.Models.Movie Movie { get; set; }
        public async Task<IActionResult> OnPostAsync()
        {
            if (!ModelState.IsValid)
            {
                return Page();
            }
            _context.Movie.Add(Movie);
            await _context.SaveChangesAsync();
            return RedirectToPage("./Index");
        }
    }

  html:

@page
@model CreateModel
@{
    ViewData["Title"] = "Create";
}

<h2>Create</h2>
<h4>Movie</h4>
<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="Movie.Title" class="control-label"></label>
                <input asp-for="Movie.Title" class="form-control" />
                <span asp-validation-for="Movie.Title" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Movie.ReleaseDate" class="control-label"></label>
                <input asp-for="Movie.ReleaseDate" class="form-control" />
                <span asp-validation-for="Movie.ReleaseDate" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Movie.Genre" class="control-label"></label>
                <input asp-for="Movie.Genre" class="form-control" />
                <span asp-validation-for="Movie.Genre" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Movie.Price" class="control-label"></label>
                <input asp-for="Movie.Price" class="form-control" />
                <span asp-validation-for="Movie.Price" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </form>
    </div>
</div>

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

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

 

   

 

  

 

转载于:https://www.cnblogs.com/dragon-L/p/8660590.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值