ASP.NET MVC快速入门之创建表格

  • ASP.NET MVC快速入门之创建表格已关闭评论
  • 40 views
  • A+
所属分类:C#.NET 编程技术

ASP.NET MVC快速入门之创建表格

表格页面对应于Students控制器下的Index操作方法:

public class StudentsController : Controller
{
       private StudentDbContext db = new StudentDbContext();
 
       // GET: Students
       public ActionResult Index()
       {
              return View(db.Students.ToList());
       }
      
}

首先,我们看到控制器内部定义了一个私有变量db,并进行初始化。这是数据库操作上下文实例,所有的CRUD操作都讲依赖于这个实例。

 

在Index方法中,通过向View方法传递学生列表的方式,把模型数据传递到了视图,在Views/Students/Index.cshtml视图文件中,我们声明了传入模型的类型:

@model IEnumerable<AspNetMvc.QuickStart.Models.Student>

 

在视图中,Model属性的类型就确定为强类型IEnumrable<Student>,配合VS提供的智能感知,不仅可以快速编写代码,并且在编译时还检查代码的有效性。

完整的Index.cshtml代码:

@model IEnumerable<AspNetMvc.QuickStart.Models.Student>
 
@{
    ViewBag.Title = "Index";
}
 
<h2>Index</h2>
 
<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Gender)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Major)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.EntranceDate)
        </th>
        <th></th>
    </tr>
 
@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Gender)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Major)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.EntranceDate)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.ID }) |
            @Html.ActionLink("Details", "Details", new { id=item.ID }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.ID })
        </td>
    </tr>
}
 
</table>

 

看着很有古老的ASP的感觉吧,不过这里的Model属性是强类型的,因此在foreach循环中,VS明确知道item类型是Student,从而方便代码编写:

ASP.NET MVC快速入门之创建表格

 

@Html里面都是MVC提供的辅助方法,用来辅助生成HTML代码:

  1. ActionLink:用来生成超链接,链接到本控制器内的某个操作方法(也可以是其他控制器的方法,有重载函数),可以指定路由参数,通过对象初始化语法来创建,比如new {id=item.ID}。
  2. DisplayNameFor:显示模型属性的名称。强类型辅助方法,允许我们使用一个lambda表达式来指定某个模型属性,而不用写字符串。好处不仅有智能感知,编译时检查,而且也方便代码重构,比如我们在更改模型的属性名称时,视图中的相应代码也会改变。
  3. DisplayFor:显示模型属性的值。

新增页面

ASP.NET MVC快速入门之创建表格

 

新增页面对应于Students控制器下的Create操作方法:

// GET: Students/Create
public ActionResult Create()
{
       return View();
}

对应的视图文件:

@model AspNetMvc.QuickStart.Models.Student
 
@{
    ViewBag.Title = "Create";
}
 
<h2>Create</h2>
 
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
   
    <div class="form-horizontal">
        <h4>Student</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
            </div>
        </div>
             
              @* 省略 Gender Major EntranceDate *@
       
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}
 
<div>
    @Html.ActionLink("Back to List", "Index")
</div>
 
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

 

首先定义了视图中使用的模型类型是Student,这样LabelFor强类型辅助方法就可以从模型元数据中获取需要显示的文本。

 

页面打开时,由于并未传入任何模型对象,所以Model为空对象,如下所示:

ASP.NET MVC快速入门之创建表格

 

所以页面上默认的输入框都是空的,截图中是作者输入值后的效果。

 

Html.BeginForm()会在页面上生成一个form标签,默认的提交地址还是当前页面(action=/Students/Create),默认的请求方法是post,如下所示:

ASP.NET MVC快速入门之创建表格

 

因此,点击[Create]按钮时,会发出一个POST请求到后台,对应于Students控制器的Create方法。

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
助力产业智慧升级,云服务器首年88元起,更有千元代金券礼包免费领!