zoukankan      html  css  js  c++  java
  • ASP.NET Core MVC+EF Core项目实战

    项目背景

    本项目参考于《Pro Entity Framework Core 2 for ASP.NET Core MVC》一书,项目内容为party邀请答复。

    新建项目

    本项目开发工具为VS2017,打开VS2017,新建项目,选择ASP.NETCore Web Application,项目名为PartyInvites,点击OK,选择模板为MVC(为了省事)。当然为了熟悉MVC流程也可以选择空模板自己来搭建项目结构。

    项目开发

    1.创建数据实体类以及数据库上下文类
    在Models文件夹下创建两个类,DataContext和GuestResponse类,类中具体内容如下:

    public class GuestResponse
        {
            public long Id { get; set; }
            public string Name { get; set; }
            public string Email { get; set; }
            public string Phone { get; set; }
            public bool? WillAttend { get; set; }
        }
        public class DataContext : DbContext
        {
            public DataContext(DbContextOptions<DataContext> options) : base(options)
            {
    
            }
            public DbSet<GuestResponse> Responses { get; set; }
        }

    2.编写Controller和View
    打开Controllers文件夹下的HomeController文件(选择空模板的同学自己创建文件夹和HomeController文件),HomeController具体代码如下:

    public class HomeController : Controller
        {
            private DataContext _dataContext;
            public HomeController(DataContext dataContext) => _dataContext = dataContext;
            public IActionResult Index() => View();
            public IActionResult Respond() => View();
            [HttpPost]
            public IActionResult Respond(GuestResponse response)
            {
                _dataContext.Responses.Add(response);
                _dataContext.SaveChanges();
                return RedirectToAction(nameof(Thanks),
                        new { Name = response.Name, WillAttend = response.WillAttend });
            }
            public IActionResult Thanks(GuestResponse response)
            {
                return View(response);
            }
            public IActionResult ListResponses() =>
                        View(_dataContext.Responses.OrderByDescending(r => r.WillAttend));
        }

    修改Views/Shared文件夹下的_Layout.cshtml文件,如下:

    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Party Invites</title>
        <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css" />
    </head>
    <body>
        <div>
            @RenderBody()
        </div>
    </body>
    
    </html>

    在Home文件夹下,修改Index.cshtml,内容如下:

    <div class="text-center m-4">
        <h3>We're going to have an exciting party!</h3>
        <h4>And you are invited</h4>
        <a class="btn btn-primary" asp-action="Respond">RSVP Now</a>
    </div>

    创建新的cshtml文件,ListResponses.cshtml,

    @model IEnumerable<GuestResponse>
    <h3 class="bg-primary p-2 text-white text-center">
        Here is the list of people who have
        responded
    </h3>
    <div class="table-responsive">
        <table class="table">
            <tr>
                <td>Name</td>
                <td>Email</td>
                <td>Phone</td>
                <td>Attending</td>
            </tr>
            @foreach (GuestResponse r in Model)
            {
                <tr>
                    <td>@r.Name</td>
                    <td>@r.Email</td>
                    <td>@r.Phone</td>
                    <td>@(r.WillAttend == true ? "Yes" : "No")</td>
                </tr>
    
            }
        </table>
    </div>

    Respond.cshtml,

    @model GuestResponse
    <div class="bg-primary p-2 text-white text-center">
        <h2>RSVP</h2>
    </div>
    <form asp-action="Respond" method="post" class="m-4">
        <div class="form-group">
            <label>Your Name</label>
            <input asp-for="Name" class="form-control" />
        </div>
        <div class="form-group">
            <label>Your Email</label>
            <input asp-for="Email" class="form-control" />
        </div>
        <div class="form-group">
            <label>Your Phone Number</label>
            <input asp-for="Phone" class="form-control" />
        </div>
        <div class="form-group">
            <label>Will You Attend?</label>
            <select asp-for="WillAttend" class="form-control">
                <option value="">Choose an option</option>
                <option value="true">Yes, I'll be there</option>
                <option value="false">No, I can't come</option>
            </select>
        </div>
        <div class="text-center">
            <button type="submit" class="btn btn-primary">Submit RSVP</button>
        </div>
    </form>

    Thanks.cshtml

    @model GuestResponse
    <div class="text-center mt-3">
        <h1>Thank you, @Model.Name!</h1>
        @if (Model.WillAttend == true)
        {
            <div>
                It's great that you're coming. The drinks are already in the fridge!
            </div>
        }
        else
        {
            <div>
                Sorry to hear that you can't make it, but thanks for letting us know.
            </div>
        }
        Click <a asp-action="ListResponses">here</a> to see who is coming.
    </div>

    配置EF Core

    配置数据库连接字符串,在appsettings.json文件中增加如下内容:

    "ConnectionStrings": {
          "DefaultConnection": "Server=(localdb)\MSSQLLocalDB;Database=PartyInvites;Trusted_Connection=True;MultipleActiveResultSets=true"
        }

    DefaultConnection的内容为你自己的数据库连接字符串。
    修改startup.cs内容,代码如图

    public class Startup
        {
            public Startup(IConfiguration configuration)
            {
                Configuration = configuration;
            }
    
            public IConfiguration Configuration { get; }
    
            // This method gets called by the runtime. Use this method to add services to the container.
            public void ConfigureServices(IServiceCollection services)
            {
                services.AddMvc();
                //config database connect string
                string conString = Configuration["ConnectionStrings:DefaultConnection"];
                services.AddDbContext<DataContext>(options =>
                options.UseSqlServer(conString));
            }
    
            // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
            public void Configure(IApplicationBuilder app, IHostingEnvironment env)
            {
                app.UseDeveloperExceptionPage();
                app.UseStatusCodePages();
                app.UseStaticFiles();
                //important
                app.UseMvcWithDefaultRoute();
            }
        }

    配置好后,根据新建的data Model,创建数据库,打开nuget 控制台,在控制台中输入add-migration加名字,如add-migration addData,执行,会自动建立migrations文件夹,并在文件夹中建立addData文件,意味创建迁移文件成功。然后输入:update-database,数据库就创建完成,可以去数据库检查下表建立是否成功。
    然后就可以运行项目了。
    需要注意的是,前段引用了bootstrap,需要注意bootstrap是否安装成功以及版本问题,否则页面可能显示不正确。

  • 相关阅读:
    如何垂直居中一个浮动元素?
    微信小程序vant-search获取不到输入的搜索内容踩坑
    关于微信小程序无法使用css3过度属性transition以及微信小程序如何利用api进行画面过度的展示
    Spring Shedule Task之注解实现 (两次启动Schedule Task 的解决方案)
    学习站点记录
    Spring 通过配置文件注入 properties文件
    Liunx下安装jdk
    Mybatis使用generator自动生成映射配置文件信息
    Tomcat容器虚拟路径设置
    Spring init-method和destroy-method 的使用
  • 原文地址:https://www.cnblogs.com/corebyfrank/p/11957167.html
Copyright © 2011-2022 走看看