增加追加数据的方法和视图
现在我们将要在数据库中追加并保存一些数据。我们将要创建一个表单以及一些表单输入控件,用来输入数据信息。当用户提交表单时将把这些用户输入的信息保存在数据库中。我们可以通过在浏览器中输入“http://localhost:xx/Movies/Create”这个URL地址来访问这个表单。首先,我们需要在我们的MoviesController类中追加一个Create方法,该方法返回一个视图,该视图中包含了用户输入信息时所要用到的表单。
public ActionResult Create()
{
return View();
}
现在让我们来实现这个Create方法中所要返回的视图,我们将在这个视图中向用户显示追加数据时所需要用到的表单。在Create方法中点击鼠标右键,并点击上下文菜单中的“添加视图”。在“添加视图”对话框中选择“创建强类型视图”,将模型类指定为“Movie”,在支架模板中选择Create,如图:
点击添加按钮,Views文件夹下的Movies文件夹中将会自动添加一个名为“Create.cshtml”的视图模板文件。因为你在支架模板中选择了“Create”,所以支架模板会在该视图模板文件中自动生成一些默认代码。打开该文件进行查看,在该文件中已经自动创建了一个HTML表单,以及一段用来显示校验时错误信息的文字。Visual Web Developer检查Movies类,并自动创建与该类中每个属性相对应的<label>元素以及<input>元素。支架模板自动生成的创建数据所用视图中的代码如代码清单:
@model MvcMovie.Models.Movie
@{ ViewBag.Title = "Create"; }
<h2>Create</h2>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")"type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"type="text/javascript"></script>
@using (Html.BeginForm()) { @Html.ValidationSummary(true) <fieldset>
<legend>Movie</legend>
<div class="editor-label">
@Html.LabelFor(model => model.Title)</div>
<div class="editor-field">
@Html.EditorFor(model => model.Title)
@Html.ValidationMessageFor(model => model.Title)</div>
<div class="editor-label">
@Html.LabelFor(model => model.ReleaseDate)</div>
<div class="editor-field">
@Html.EditorFor(model => model.ReleaseDate)
@Html.ValidationMessageFor(model => model.ReleaseDate)</div>
<div class="editor-label">
@Html.LabelFor(model => model.Genre)</div>
<div class="editor-field">
@Html.EditorFor(model => model.Genre)
@Html.ValidationMessageFor(model => model.Genre)</div>
<div class="editor-label">
@Html.LabelFor(model => model.Price)</div>
<div class="editor-field">
@Html.EditorFor(model => model.Price)
@Html.ValidationMessageFor(model => model.Price)</div>
<p><input type="submit" value="Create" /></p>
</fieldset>
}
<div> @Html.ActionLink("Back to List", "Index")</div>
这段代码中使用了几个HTML帮助器的方法来帮助简化HTML标签的书写方法。Html.LabelFor帮助器用于显示字段名(”Title”,”ReleaseDate”,”Genre”或者”Price”)。Html.EditorFor帮助器用于显示一个提供给用户输入信息的HTML的<input>元素。Html.ValidationMessageFor帮助器用于显示一个针对属性的校验信息。请注意我们的视图模板的顶部有一个“@model MvcMovie.Models.Movie”的声明,该声明将我们的视图模板中的“模型”强类型化成一个Movie类。运行应用程序,在浏览器中输入“http://localhost:xx/Movies/Create”,浏览器中显示如图:
好,现在我们修改一下代码,使它成为我们的表单:
@model MvcMovie.Models.Movie
@{ ViewBag.Title = "追加电影信息";}
<h2>追加电影信息</h2>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")"type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"
type="text/javascript"></script>
@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
<legend>电影</legend>
<div class="editor-label">标题</div>
<div class="editor-field">
@Html.EditorFor(model => model.Title) @Html.ValidationMessageFor(model => model.Title)</div>
<div class="editor-label">发行日期</div>
<div class="editor-field">
@Html.EditorFor(model => model.ReleaseDate)
@Html.ValidationMessageFor(model => model.ReleaseDate)</div>
<div class="editor-label">种类</div>
<div class="editor-field">
@Html.EditorFor(model => model.Genre)
@Html.ValidationMessageFor(model => model.Genre)</div>
<div class="editor-label">票价</div>
<div class="editor-field">
@Html.EditorFor(model => model.Price)
@Html.ValidationMessageFor(model => model.Price)</div>
<p><input type="submit" value="追加" /></p>
</fieldset>
}
<div> @Html.ActionLink("返回电影列表", "Index")</div>
修改完毕后重新运行程序,然后访问“http://localhost:xx/Movies/Create”这个地址,浏览器中显示如图:
我们已经实现了显示追加数据所用表单的所需代码。我们的下一步是编写代码来进行表单提交到服务器后的处理。我们将要获取用户在数据库中输入的信息并且将它们作为一个新的Movie保存到数据库中。请关注下一节!