2943,绿茶的作用,3u8844
上篇文章介绍了如何通过控制器访问模型中的数据，在本节中我们将要在数据库中追加并保存一些数据。我们将要创建一个表单以及一些表单输入控件，用来输入数据信息。当用户提交表单时将把这些用户输入的信息保存在数据库中。我们可以通过在浏览器中输入“https://localhost:xx/Student/Create”这个URL地址来访问这个表单。
显示添加数据时所用表单
首先，我们需要在我们的StudentController类中追加一个Create方法，该方法返回一个视图，该视图中包含了用户输入信息时所要用到的表单。
1 public ActionResult Create()
2 {
3 return View();
4 }
现在让我们来实现这个Create方法中所要返回的视图，我们将在这个视图中向用户显示追加数据时所需要用到的表单。在Create方法中点击鼠标右键，并点击上下文菜单中的“添加视图”。
在“添加视图”对话框中将模型类指定为“Student”，在支架模板中选择Create，如图所示。
点击添加按钮，Views文件夹下的Student文件夹中将会自动添加一个名为“Create.cshtml”的视图模板文件。因为你在支架模板中选择了“Create”,所以支架模板会在该视图模板文件中自动生成一些默认代码。打开该文件进行查看，在该文件中已经自动创建了一个HTML表单，以及一段用来显示校验时错误信息的文字。Visual Web Developer检查Student类，并自动创建与该类中每个属性相对应的<label>元素以及<input>元素。支架模板自动生成的创建数据所用视图中的代码。
复制代码
1 @model Wolfy.FirstMVCProject.Models.Student
2
3 @{
4 Layout = null;
5 }
6
7 <!DOCTYPE html>
8
9 <html>
10 <head>
11 <meta name="viewport" content="width=device-width" />
12 <title>Create</title>
13 </head>
14 <body>
15 @using (Html.BeginForm())
16 {
17 @Html.AntiForgeryToken()
18
19 <p class="form-horizontal">
20 <h4>Student</h4>
21 <hr />
22 @Html.ValidationSummary(true)
23
24 <p class="form-group">
25 @Html.LabelFor(model => model.stuName, new { @class = "control-label col-md-2" })
26 <p class="col-md-10">
27 @Html.EditorFor(model => model.stuName)
28 @Html.ValidationMessageFor(model => model.stuName)
29 </p>
30 </p>
31
32 <p class="form-group">
33 @Html.LabelFor(model => model.stuSex, new { @class = "control-label col-md-2" })
34 <p class="col-md-10">
35 @Html.EditorFor(model => model.stuSex)
36 @Html.ValidationMessageFor(model => model.stuSex)
37 </p>
38 </p>
39
40 <p class="form-group">
41 @Html.LabelFor(model => model.stuBirthdate, new { @class = "control-label col-md-2" })
42 <p class="col-md-10">
43 @Html.EditorFor(model => model.stuBirthdate)
44 @Html.ValidationMessageFor(model => model.stuBirthdate)
45 </p>
46 </p>
47
48 <p class="form-group">
49 @Html.LabelFor(model => model.stuStudydate, new { @class = "control-label col-md-2" })
50 <p class="col-md-10">
51 @Html.EditorFor(model => model.stuStudydate)
52 @Html.ValidationMessageFor(model => model.stuStudydate)
53 </p>
54 </p>
55
56 <p class="form-group">
57 @Html.LabelFor(model => model.stuAddress, new { @class = "control-label col-md-2" })
58 <p class="col-md-10">
59 @Html.EditorFor(model => model.stuAddress)
60 @Html.ValidationMessageFor(model => model.stuAddress)
61 </p>
62 </p>
63
64 <p class="form-group">
65 @Html.LabelFor(model => model.stuEmail, new { @class = "control-label col-md-2" })
66 <p class="col-md-10">
67 @Html.EditorFor(model => model.stuEmail)
68 @Html.ValidationMessageFor(model => model.stuEmail)
69 </p>
70 </p>
71
72 <p class="form-group">
73 @Html.LabelFor(model => model.stuPhone, new { @class = "control-label col-md-2" })
74 <p class="col-md-10">
75 @Html.EditorFor(model => model.stuPhone)
76 @Html.ValidationMessageFor(model => model.stuPhone)
77 </p>
78 </p>
79
80 <p class="form-group">
81 @Html.LabelFor(model => model.stuIsDel, new { @class = "control-label col-md-2" })
82 <p class="col-md-10">
83 @Html.EditorFor(model => model.stuIsDel)
84 @Html.ValidationMessageFor(model => model.stuIsDel)
85 </p>
86 </p>
87
88 <p class="form-group">
89 @Html.LabelFor(model => model.stuInputtime, new { @class = "control-label col-md-2" })
90 <p class="col-md-10">
91 @Html.EditorFor(model => model.stuInputtime)
92 @Html.ValidationMessageFor(model => model.stuInputtime)
93 </p>
94 </p>
95
96 <p class="form-group">
97 @Html.LabelFor(model => model.Course.classId, "stuClass", new { @class = "control-label col-md-2" })
98 <p class="col-md-10">
99 @Html.DropDownList("class", String.Empty)
100 @Html.ValidationMessageFor(model => model.classId)
101 </p>
102 </p>
103
104 <p class="form-group">
105 <p class="col-md-offset-2 col-md-10">
106 <input type="submit" value="Create" class="btn btn-default" />
107 </p>
108 </p>
109 </p>
110 }
111
112 <p>
113 @Html.ActionLink("Back to List", "Index")
114 </p>
115 </body>
116 </html>
复制代码
这段代码中使用了几个HTML辅助类的方法来帮助简化HTML标签的书写方法。
Html.LabelFor辅助器用于显示字段名（”Title”,”ReleaseDate”,”Genre”或者”Price”）。
Html.EditorFor辅助器用于显示一个提供给用户输入信息的HTML的<input>元素。
Html.ValidationMessageFor辅助器用于显示一个针对属性的校验信息。
请注意我们的视图模板的顶部有一个“@model Wolfy.FirstMVCProject.Models.Student”的声明，该声明将我们的视图模板中的“模型”强类型化成一个Student类。
然后我们右键在浏览器中查看Create.cshtml。
为什么会出现这个错误，因为学生表中存在班级id这个外键，在绑定下拉列表的时候没有指定数据源。从该错误信息，我们将学习ViewData的基本用法。
获取或设置一个字典，其中包含在控制器和视图之间传递的数据。
控制器可以向视图数据添加键/值对。 然后，这些数据将在呈现视图时传递给视图。 视图可以添加或更改数据，当视图作为请求的一部分发布时，这些数据将发送到控制器。
说的有点拗口，可以通过键值对的形式为ViewData赋值，然后在视图中可以使用ViewData.
那么我们修改上面的bug，作为实例代码：
复制代码
1 public ActionResult Create()
2 {
3 var courses = from s in entity.Course
4 select s;
5 List<SelectListItem> items = new List<SelectListItem>();
6 foreach (var item in courses)
7 {
8 SelectListItem selectListItem = new SelectListItem() { Text = item.className, Value = item.classId.ToString() };
9 items.Add(selectListItem);
10 }
11 ViewData["class"] = items;
12 return View();
13 }
复制代码
而下面的代码中的“class”为ViewData的键，下拉框根据键值取对应的值（简单了解，后面将详细讲解ViewData，ViewBag）。
@Html.DropDownList("class", String.Empty)
有兴趣的可以看看DropDownList代码：
View Code
修改后浏览
在页面上右键，查看源代码，感兴趣的朋友可以看看生成的html代码，也许从中会发现点什么！
1
2
3 <!DOCTYPE html>
4
5 <html>
6 <head>
7 <meta name="viewport" content="width=device-width" />
8 <title>Create</title>
9 </head>
10 <body>
11 <form action="/Student/Create" method="post"><input name="__RequestVerificationToken" type="hidden" value="-esm1DokcqNfvvHVCnonuFlC9CB0mqi4m7aiPipE6UJ03uuS35Z100j0t-aNx_84Uf4w80Ywe2an4ZWLLjErt2pPIVq-4B4WbMqcIsdHCA81" /> <p class="form-horizontal">
12 <h4>Student</h4>
13 <hr />
14
15
16 <p class="form-group">
17 <label class="control-label col-md-2" for="stuName">stuName</label>
18 <p class="col-md-10">
19 <input class="text-box single-line" id="stuName" name="stuName" type="text" value="" />
20 <span class="field-validation-valid" data-valmsg-for="stuName" data-valmsg-replace="true"></span>
21 </p>
22 </p>
23
24 <p class="form-group">
25 <label class="control-label col-md-2" for="stuSex">stuSex</label>
26 <p class="col-md-10">
27 <input class="text-box single-line" id="stuSex" name="stuSex" type="text" value="" />
28 <span class="field-validation-valid" data-valmsg-for="stuSex" data-valmsg-replace="true"></span>
29 </p>
30 </p>
31
32 <p class="form-group">
33 <label class="control-label col-md-2" for="stuBirthdate">stuBirthdate</label>
34 <p class="col-md-10">
35 <input class="text-box single-line" data-val="true" data-val-date="字段 stuBirthdate 必须是日期。" data-val-required="stuBirthdate 字段是必需的。" id="stuBirthdate" name="stuBirthdate" type="datetime" value="" />
36 <span class="field-validation-valid" data-valmsg-for="stuBirthdate" data-valmsg-replace="true"></span>
37 </p>
38 </p>
39
40 <p class="form-group">
41 <label class="control-label col-md-2" for="stuStudydate">stuStudydate</label>
42 <p class="col-md-10">
43 <input class="text-box single-line" data-val="true" data-val-date="字段 stuStudydate 必须是日期。" data-val-required="stuStudydate 字段是必需的。" id="stuStudydate" name="stuStudydate" type="datetime" value="" />
44 <span class="field-validation-valid" data-valmsg-for="stuStudydate" data-valmsg-replace="true"></span>
45 </p>
46 </p>
47
48 <p class="form-group">
49 <label class="control-label col-md-2" for="stuAddress">stuAddress</label>
50 <p class="col-md-10">
51 <input class="text-box single-line" id="stuAddress" name="stuAddress" type="text" value="" />
52 <span class="field-validation-valid" data-valmsg-for="stuAddress" data-valmsg-replace="true"></span>
53 </p>
54 </p>
55
56 <p class="form-group">
57 <label class="control-label col-md-2" for="stuEmail">stuEmail</label>
58 <p class="col-md-10">
59 <input class="text-box single-line" id="stuEmail" name="stuEmail" type="text" value="" />
60 <span class="field-validation-valid" data-valmsg-for="stuEmail" data-valmsg-replace="true"></span>
61 </p>
62 </p>
63
64 <p class="form-group">
65 <label class="control-label col-md-2" for="stuPhone">stuPhone</label>
66 <p class="col-md-10">
67 <input class="text-box single-line" id="stuPhone" name="stuPhone" type="text" value="" />
68 <span class="field-validation-valid" data-valmsg-for="stuPhone" data-valmsg-replace="true"></span>
69 </p>
70 </p>
71
72 <p class="form-group">
73 <label class="control-label col-md-2" for="stuIsDel">stuIsDel</label>
74 <p class="col-md-10">
75 <select class="list-box tri-state" id="stuIsDel" name="stuIsDel"><option selected="selected" value="">未设置</option>
76 <option value="true">True</option>
77 <option value="false">False</option>
78 </select>
79 <span class="field-validation-valid" data-valmsg-for="stuIsDel" data-valmsg-replace="true"></span>
80 </p>
81 </p>
82
83 <p class="form-group">
84 <label class="control-label col-md-2" for="stuInputtime">stuInputtime</label>
85 <p class="col-md-10">
86 <input class="text-box single-line" data-val="true" data-val-date="字段 stuInputtime 必须是日期。" id="stuInputtime" name="stuInputtime" type="datetime" value="" />
87 <span class="field-validation-valid" data-valmsg-for="stuInputtime" data-valmsg-replace="true"></span>
88 </p>
89 </p>
90
91 <p class="form-group">
92 <label class="control-label col-md-2" for="Course_classId">stuClass</label>
93 <p class="col-md-10">
94 <select id="class" name="class"><option value=""></option>
95 <option value="1">.Net</option>
96 <option value="2">PHP</option>
97 <option value="3">Designer</option>
98 <option value="4">Java</option>
99 <option value="5">C、C++</option>
100 </select>
101 <span class="field-validation-valid" data-valmsg-for="classId" data-valmsg-replace="true"></span>
102 </p>
103 </p>
104
105 <p class="form-group">
106 <p class="col-md-offset-2 col-md-10">
107 <input type="submit" value="Create" class="btn btn-default" />
108 </p>
109 </p>
110 </p>
111 </form>
112 <p>
113 <a href="/Student/Index">Back to List</a>
114 </p>
115
116 <!-- Visual Studio Browser Link -->
117 <script type="application/json" id="__browserLink_initializationData">
118 {"appName":"Internet Explorer","requestId":"8e85ac6e799b4435b80844366f60d8a7"}
119 </script>
120 <script type="text/javascript" src="https://localhost:1882/1a3cc807a82642e2a44b68b360bc37ee/browserLink" async="async"></script>
121 <!-- End Browser Link -->
122
123 </body>
124 </html>
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
Net Core Web Api项目与在NginX下发布的方法
asp.net core3.1 引用的元包dll版本兼容性问题解决方案
IdentityServer4实现.Net Core API接口权限认证(快速入门)
ASP.NET Core MVC通过IViewLocationExpander扩展视图搜索路径的实现
我要评论
网友评论