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