您的位置：首页 > 编程语言 > ASP

ASP.NET Core MVC 和 Visual Studio入门（三） 添加视图

2017-05-29 23:17 691 查看

ASP.NETCoreMVC和VisualStudio入门（三）  添加视图

本节将修改HelloWorldController类，从而使用Razor视图模板来干净利索地封装产生一个HTML回应给客户端的过程。

我们将使用Razor创建一个视图模板,基于Razor的视图模板有一个.cshtml文件扩展名，并能使用C#提供优美简练的方式创建HTML输出。

当前，控制器类中的Index方法返回一个硬编辑的消息字符串，在HelloWorldController类，用以下代码代替Index方法。

 publicIActionResultIndex()

{


   
return
View();


}


如上的Index方法返回一个View对象，它使用视图模板生成HTML回应给浏览器，控制器方法（或如所知的行为方法），诸如上面的Index方法，通常返回一个
IActionResult
（或一个继承于IActionResult的类）对象，而非单纯的像字符串的文字。


右击Views文件夹，然后是Add>NewFolder，命名这个文件夹为HelloWorld。

右击Views/HelloWorld文件夹,然后是Add>NewItem。

在AddNewItem-MvcMovie对话框内

在右上角的搜索框内，输入view

点击MVCViewPage

在Name框内，如有必要，改变其命名为Index.cshtml.

点击Add






将Razor视图文件Views/HelloWorld/Index.cshtml的内容替换为以下代码：

@{


   ViewData["Title"]="Index";


}


<h2>
Index
</h2>


<p>
HellofromourViewTemplate!
</p>


导航到
http://localhost:xxxx/HelloWorld
，HelloWorldController中的Index方法没有做太多的工作，它只是简单的运行了return View()语句，该语句说明了该方法应使用一个视图模板给浏览器渲染一个回应。由于没有显示地指定要使用的视图模板的名称，MVC缺省地使用/Views/HelloWorld文件夹内的Index.cshtml视图文件，下图显示了在视图中被硬编码的字符串“HellofromourViewTemplate!”。



 

如果你的浏览器窗口较小（比如在移动设备上），你可能需要切换（点击）右上方的Bootstrap导航钮来才能看到Home,
About,和Contact链接。

 



1     改变视图和布局页
点击菜单链接（MvcMovie,Home,About），每个页面都显示同样的菜单布局，该菜单布局是在Views/Shared/_Layout.cshtml文件中实现的，打开Views/Shared

/_Layout.cshtml文件。

布局模板允许在一个地方指定网站的HTML容器布局并可跨多网页在网站中应用它。在Views/Shared/_Layout.cshtml文件中找到@RenderBody()行，RenderBody是一个占位符，所有你创建的且包含在布局页面之内的具体视图都显示在该占位符所在的位置，比如，如果你选择About链接，则Views/Home/About.cshtml视图的内容被被渲染在RenderBody方法内。
2    在布局文件中改变标题和菜单链接。
改变标题元素的内容，在Views/Shared/_Layout.cshtml文件中,改变第七行,将锚文本修改为“MovieApp”，再改变第三十一行,将控制器由Home改为Movies,存盘,修改后的代码如下所示：


@injectMicrosoft.ApplicationInsights.AspNetCore.JavaScriptSnippetJavaScriptSnippet
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<metaname="viewport"content="width=device-width,initial-scale=1.0"/>
<title>@ViewData["Title"]-MovieApp</title>

<environmentnames="Development">
<linkrel="stylesheet"href="~/lib/bootstrap/dist/css/bootstrap.css"/>
<linkrel="stylesheet"href="~/css/site.css"/>
</environment>
<environmentnames="Staging,Production">
<linkrel="stylesheet"href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only"asp-fallback-test-property="position"asp-fallback-test-value="absolute"/>
<linkrel="stylesheet"href="~/css/site.min.css"asp-append-version="true"/>
</environment>
@Html.Raw(JavaScriptSnippet.FullScript)
</head>
<body>
<navclass="navbarnavbar-inversenavbar-fixed-top">
<divclass="container">
<divclass="navbar-header">
<buttontype="button"class="navbar-toggle"data-toggle="collapse"data-target=".navbar-collapse">
<spanclass="sr-only">Togglenavigation</span>
<spanclass="icon-bar"></span>
<spanclass="icon-bar"></span>
<spanclass="icon-bar"></span>
</button>
<aasp-area=""asp-controller="Movies"asp-action="Index"class="navbar-brand">MvcMovie</a>
</div>
<divclass="navbar-collapsecollapse">
<ulclass="navnavbar-nav">
<li><aasp-area=""asp-controller="Home"asp-action="Index">Home</a></li>
<li><aasp-area=""asp-controller="Home"asp-action="About">About</a></li>
<li><aasp-area=""asp-controller="Home"asp-action="Contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<divclass="containerbody-content">
@RenderBody()
<hr/>
<footer>
<p>©2017-MvcMovie</p>
</footer>
</div>

<environmentnames="Development">
<scriptsrc="~/lib/jquery/dist/jquery.js"></script>
<scriptsrc="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<scriptsrc="~/js/site.js"asp-append-version="true"></script>
</environment>
<environmentnames="Staging,Production">
<scriptsrc="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
</script>
<scriptsrc="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery&&window.jQuery.fn&&window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
</script>
<scriptsrc="~/js/site.min.js"asp-append-version="true"></script>
</environment>

@RenderSection("Scripts",required:false)
</body>
</html>
注意
我们还没有实现Movies控制器，所以如果单击该链接，将会得到一个404（未发现)错误。

保存改变并点击About链接，注意浏览器标签上的显示的标题如何由About-MvcMovie变为About-MovieApp，点击Contact链接，可发现标题仍显示为MovieApp。我们一旦在布局模板中作了改变，这个网站的所有页都映射新的链接文本和新的标题。

检查Views/_ViewStart.cshtml文件:

@{


   Layout="_Layout";


}


Views/_ViewStart.cshtml文件将Views/Shared/_Layout.cshtml文件的内容引入到每个视图中。你可使用该布局属性来设置一个不同的布局视图，或将它设为空值而不使用布局文件。

3    改变Index视图的标题
打开Views/HelloWorld/Index.cshtml文件，对两个地方进行修改：

出现在浏览器的标题的文本

二级标头（<h2>元素）

对它们作一些少量的修改，这样你能理解改变的是应用的哪个部分哪些代码。

@{


   ViewData["Title"]="MovieList";


}


<h2>
MyMovieList
</h2>


<p>
HellofromourViewTemplate!
</p>


上面代码中的ViewData["Title"]="MovieList";
将ViewData字典的标题属性设置为"MovieList"。该标题属性在布局页中用于
<title>
HTML元素:

<title>[code]@ViewData["Title"]-MovieApp
</title>[/code]
 

存盘并导航到http://localhost:xxxx/HelloWorld.注意浏览器标题、一级标头、二级标头已经变了。（如果在浏览器中没有看到改变，可能你看到的是缓存中的内容，在你的浏览器中按Ctrl+F5以强制来自服务器的回应被载入。）浏览器标题的由我们在Index.cshtml视图模板中设置的ViewData["Title"]和在布局文件中增加的附加内容"-MovieApp"组合而成。

同时注意Index.cshtml视图模板中的内容如何与Views/Shared/_Layout.cshtml视图模板合并，单一的HTML回应如何发送给浏览器。布局模板使在应用中所有页面上施加改变变得非常简单。更多见Layout.



我们仅有的一点“数据”（本例中的“HellofromourViewTemplate!”消息）是硬编码的，尽管这个MVC应用有了一个“V”（视图）和一个“C”（控制），但仍然还没有“M”（模型）。

4    从控制器传递数据到视图
在回应输入的URL请求中，控制器行为被调用，控制器类是编写处理进来的浏览器请求的代码的地方，控制器从数据源取回数据并决定向浏览器发回什么类型的回应，视图模板可被从控制器使用以生成和格式化HTML回应给浏览器。

控制器负责为视图模板渲染回应提供需要的数据。最好的做法是，视图模板不去执行业务逻辑，并且不直接读写数据库，相反，视图模板应该只与被控制器提供给它的数据一起工作，保持这种“关系分离”可使代码更干净且易于测试、易于维护。

现在，
HelloWorldController
类中的Welcome
方法获取了name和ID参数并直接输出其值给浏览器。与其让控制器以字符串渲染回应，不如改变控制器，用一个视图模板代替字符串，视图模板将产生动态的回应，这意味着为了产生回应，需要从控制器传递适当的数据比特给视图，这可以通过让控制将视图模板需要的动态数据（参数）放在视图模板可以访问的
ViewData
字典中来实现。


回到HelloWorldController.cs文件，改变
Welcome
方法，给ViewData字典增加Message
和
NumTimes
值，ViewData字典是一个动态的对象，你可以将任何你想放入的东西放入其中。在ViewData对象中放东西之前，ViewData对象中没有任何定义好的属性，MVC
模型绑定系统自动将被命名的参数从地址栏中的查询字符串映射到方法的参数中，完成的HelloWorldController.cs看起来像这样：

 using
Microsoft.AspNetCore.Mvc;


using
System.Text.Encodings.Web;


namespace
MvcMovie.Controllers


{


   
public
class
HelloWorldController
:
Controller


   {


       
publicIActionResultIndex()

             
{


           
return
View();


       }


       
publicIActionResultWelcome(stringname,intnumTimes=1)

              
{


           ViewData[
"Message"
]=
"Hello"
+name;


           ViewData[
"NumTimes"
]=numTimes;


           
return
View();


       }


   }


}


 
ViewData
字典对象包含了可被传递给视图的数据。


创建一个命名为Views/HelloWorld/Welcome.cshtml.的视图模板。

你将在Welcome.cshtml中创建一个显示“Hello”
NumTimes的循环，用下面的内容替换
Views/HelloWorld/Welcome.cshtml文件
的内容：


@{


   ViewData["Title"]="Welcome";


}


 


<h2>
Welcome
</h2>


 


<ul>


   @for(inti=0;i
<(int)ViewData["NumTimes"];i++)

   {

       <li>
@ViewData["Message"]
</li>


   }


</ul>


保存改变并浏览下面的URL：

http://localhost:xxxx/HelloWorld/Welcome?name=Rick&numtimes=4


MVC模型绑定系统从URL中取得数据并传递给控制器，控制器将数据打包到
ViewData
字典中并其传递给视图，视图接着以HTML方式渲染数据到浏览器。


 


在上面的这个范例中，我们使用了
ViewData
从控制器传递数据给视图，后面的教程中，我们将使用视图模型从控制器中传递数据到视图中，使用视图模型的方法的传递数据通常比使用ViewData字典的方法更值得优先选择。

原文链接
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                Visual Studio
                                                .net core mvc
                                                入门
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航