欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

[Asp.net MVC]Asp.net MVC5系列——添加数据

程序员文章站 2022-04-14 10:48:55
上篇文章介绍了如何通过控制器访问模型中的数据,在本节中我们将要在数据库中追加并保存一些数据。我们将要创建一个表单以及一些表单输入控件,用来输入数据信息。当用户提交表单时将把这些用户...
上篇文章介绍了如何通过控制器访问模型中的数据,在本节中我们将要在数据库中追加并保存一些数据。我们将要创建一个表单以及一些表单输入控件,用来输入数据信息。当用户提交表单时将把这些用户输入的信息保存在数据库中。我们可以通过在浏览器中输入“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>