我们已经可以从控制器的 Action 中返回一个字符串,这可以帮助我们更好地理解 Controller 是如何工作的。但是对于创建一个 Web 程序来说还是不够的。下面我们使用更好的方法来生成 HTML,主要是通过模板来生成需要的 HTML,这就是视图所要做的。
增加视图模板
为了使用视图模板,我们需要将HomeController 中的 Index 这个 Action 的返回类型秀冷为 ActionResult,然后,让它像下面一样返回一个视图。
public class HomeController : Controller{//// GET: /Home/public ActionResult Index(){return View();}}
上面的修改表示我们将使用视图来替换掉原来的字符串,以便生成返回的结果。
现在为我们的项目增加一个视图,为达到这个目的,我们将光标移到 Index 方法内,然后,点击鼠标的右键,在右键菜单中选择“添加视图(D)…”,这样将会弹出增加视图的对话框。
添加视图的对话框允许我们快速,简单地创建一个视图模板,默认情况下,视图的名称使用当前 Action 的名字。因为我们是在 Index 这个 Aciton 上添加模板,所以添加视图对话框中,视图的名字就是 Index,我们不需要修改这个名字,点击添加。
在点击添加之后,Visual Studio 将会创建一个名为 Index.cshtml的视图模板,放置在 \Views\Home 目录中,如果没有这个目录,将会自动创建它。
Index.cshtml 所在文件夹的名称和位置是很重要的,它是根据 MVC 的约定来指定的。目录名称 \Views\Home ,匹配控制器,就是 HomeController ,视图模板的名字 Index,匹配将要使用这个视图的 Action 方法的名字。
当使用默认的约定的时候, MVC 支持我们不需要显式设置这些名字和位置,当我们的代码如下所示的时候,将会默认寻找 \Views\Home\Index.cshtml。
public class HomeController : Controller{//// GET: /Home/public ActionResult Index(){return View();}}
Visutal Studio 创建并打开了Index.cshtml 视图模板,其中的内容如下:
@{ViewBag.Title = "Index";}<h2>Index</h2>
视图使用了 Razor 语法,这比 Web Form 视图引擎的语法更加简单。
前三行使用 ViewBag.Title 设置了页面的标题,我们马上就可以看到这样做的效果,但是,首先,我们我们替换一下网页的内容,将 <h1> 标记中的内容修改为 This is the Home Page 。
@{ViewBag.Title = "Index";}<h2>This is the Home Page</h2>
现在,我们的首页应该变成下面的样子。
为页面的公共内容使用布局
大多数的网站在页面之间有许多共享的内容:导航,页首,页脚,公司的 Logo,样式表等等。Razor 引擎使用名为 _Layout.cshtml 的布局来自动化管理,它保存在 /Views/Shared 文件夹中。
打开之后,可以看到下列内容:
<!DOCTYPE html>
如果觉得《ASP.NET MVC 音乐商店 - 3. 视图与模型》对你有帮助,请点赞、收藏,并留下你的观点哦!