项目背景
本项目参考于《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是否安装成功以及版本问题,否则页面可能显示不正确。