设为首页 加入收藏

TOP

asp.net core系列 39 Web 应用Razor 介绍与详细示例(二)
2019-09-17 18:24:33 】 浏览:44
Tags:asp.net core 系列 Web 应用 Razor 介绍 详细 示例
sp;or  /Store/Index

 

二. 完整示例介绍

  

  2.1 安装EF数据提供程序

    这里使用内存数据库Microsoft.EntityFrameworkCore.InMemory,Entity Framework Core 和内存数据库一起使用, 这对测试非常有用。

    PM> Install-Package Microsoft.EntityFrameworkCore.InMemory

    

  2.2 新建数据模型类(POCO )和EF上下文类 

   public class Customer
    {
        public int Id { get; set; }

         //保存不能为空,字符长度小于100
        [Required, StringLength(100)]
        public string Name { get; set; }
    }

   public class AppDbContext : DbContext
    {
        public AppDbContext(DbContextOptions options)
            : base(options)
        {
        }

        public DbSet<Customer> Customers { get; set; }
    }

 

  2.3 启动类关键代码

    public class Startup
    {
        public IHostingEnvironment HostingEnvironment { get; }

        public void ConfigureServices(IServiceCollection services)
        {            
            // 使用内存数据库
            services.AddDbContext<AppDbContext>(options =>
                              options.UseInMemoryDatabase("name"));
            services.AddMvc();
        }

        public void Configure(IApplicationBuilder app)
        {
            app.UseMvc();
        }
    }

 

  2.4 新增页 Pages/Create

@page
@model StudyRazorDemo.Pages.CreateModel
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<html>
<body>
    <p>
        Enter your name.
    </p>
    <div asp-validation-summary="All"></div>
    <form method="POST">
        <!-- 这里的Customer对象来自后端-->
        <div>Name: <input asp-for="Customer.Name" /></div>
        <input type="submit" />
    </form>
</body>
</html>
    public class CreateModel : PageModel
    {
        private readonly AppDbContext _db;

        public CreateModel(AppDbContext db)
        {
            _db = db;
        }

        //模型绑定,通过绑定使用相同的属性显示窗体字段<input asp-for="Customer.Name" />来减少代码,并接受输入,是双向绑定。
        [BindProperty]
        public Customer Customer { get; set; }

        public async Task<IActionResult> OnPostAsync()
        {
            //验证Customer对象属性值
            if (!ModelState.IsValid)
            {
                return Page();
            }

            //添加到EF上下文,再保存到内存数据库
            _db.Customers.Add(Customer);
            await _db.SaveChangesAsync();

            // 重定向到index主页
            return RedirectToPage("/Index");
        }
    }

  点击提交后,cs后端的Customer对象将自动绑定来自前端转来的值,如下图所示:

  

  2.5 查询主页Pages/Index 关键代码

<form method="post">
    <table class="table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <!--Customers集合对象来自cs后端 -->
            @foreach (var contact in Model.Customers)
            {
                <tr>
                    <td>@contact.Id</td>
                    <td>@contact.Name</td>
                    <td>
                        <a asp-page="./Edit" asp-route-id="@contact.Id">edit</a>

                        <button type="submit" asp-page-handler="delete"
                                asp-route-id="@contact.Id">
                            delete
                        </button>
                    </td>
                </tr>
            }
        </tbody>
    </table>
    <a asp-page="./Create">Create</a>
</form>
        public IList<Customer> Customers { get; private set; }

        //代替OnGet方法
        public async Task OnGetAsync()
        {
            //异步获取数据,EF上下文不跟踪该集合对象
            Customers = await _db.Customers.AsNoTracking().ToListAsync();
        }

    所有asp- 开头的都是TagHelper内置标记,查询如下图所示:

 

  2.6 修改页Pages/Edit关键代码

    在主页中(<a asp-page="./E

首页 上一页 1 2 3 下一页 尾页 2/3/3
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇csharp: LocalDataCache.sync 下一篇记录.NET Core在CentOS上基于Jenk..

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目