《MS Web开发框架技术一》实验教学指导书1V2.docx
《《MS Web开发框架技术一》实验教学指导书1V2.docx》由会员分享，可在线阅读，更多相关《《MS Web开发框架技术一》实验教学指导书1V2.docx（11页珍藏版）》请在冰豆网上搜索。
《MSWeb开发框架技术一》实验教学指导书1V2
天津理工大学
《MSWeb开发框架技术
（一）》实验教学指导书1
第二版V2
课程代码：
1969303
课程名称：
MSWeb开发框架技术
（一）
MSWebDevelopingFrameworkTechnical
（1）
开课院（系）、实验室：
华信软件学院、C408机房
适用专业：
软件工程
实验指导书名称：
《MSWeb开发框架技术
（一）》实验教学指导书（自编）
指导教师：
张一鸣
实验一MVC开发环境与编程入门
1.实验目的
（1）熟悉ASP.NETMVC技术概念，掌握自己创建和使用ASP.NETMVC应用程序的方法。
（2）掌握创建ASP.NETMVC的控制器（controller）与视图（view）以及编写其中的方法的技巧。
2.实验任务
（1）（必做，20分）创建一个ASP.NETMVC默认应用程序并运行。
（2）（必做，40分）在上题建立的ASP.NETMVC默认应用程序的基础上，新增一个名为“HelloWorldController”控制器，并在其中添加两个方法，分别命名为Index方法和Welcome方法，
（3）（必做，40分）在完成上面地2题的基础上，在“HelloWorldController”控制器中的Index方法中添加使用一个视图。
在修改前的Index方法中是返回一个字符串，我们修改这个方法来使它返回一个视图（即returnView（）），再在Index方法中点击鼠标右键从而“添加视图”。
3.实验步骤
（1）如果要创建一个ASP.NETMVC的工程时，首先运行VisualWebDeveloper2010Express,并且在起始页（startpage）中选择“新建项目”。
VisualWebDeveloper是一个集成开发环境，你可以使用它来进行各种应用程序的开发。
在VisualWebDeveloper的菜单的下面有一个工具条，可以直接点击工具条中的各个工具按钮来进行各种操作，也可以直接点击菜单中的各个菜单项来进行各种操作，此处我们点击“文件”菜单中的“新建项目”菜单项。
图1-1 VisualWebDeveloper2010Express中的起始页
1.3创建你的第一个应用程序
你可以使用VisualBasic或VisualC#作为开发语言来创建应用程序。
在实验中，选择C#来作为开发语言。
点击“新建项目”菜单项后，在打开的“新建项目”对话框中，双击左边的“VisualC#”使其成为展开状态，然后点击“Web”，点击右边的“ASP.NETMVCWeb应用程序”，然后在下方的名称文本框中填入应用程序的名称，如“MvcMovie”,然后点击确定按钮。
图1-2 在新建项目对话框中选择ASP.NETMVC应用程序并为应用程序命名
在接下来打开的“新ASP.NETMVC项目”对话框中，点击选中“Internet应用程序”，在“视图引擎”下拉框中保持默认的“Razor”选项不作修改。
图1-3 选择项目模板与视图引擎
点击确定按钮，VisualWebDeveloper会为你所创建的ASP.NETMVC项目提供一个默认模板，这样的话你就拥有了一个可以立刻运行的应用程序。
默认的模板中提供的是一个很简单的显示“欢迎使用ASP.NETMVC!
”文字的应用程序，你可以以此作为你的开发起点。
图1-4 VisualWebDeveloper提供了一个默认的应用程序模板
点击“调试”菜单中的“启动调试”菜单项（该菜单项的快捷键为F5），VisualWebDeveloper将启动一个内置的服务器，并且在该服务器中打开当前Web应用程序的主页，如图1-5所示。
图1-5ASP.NETMVC3的默认应用程序模板的调试画面
请注意该页面在浏览器中的地址为“http:
//localhost:
4423/”。
其中“localhost”代表了本机上你刚刚创建的Web应用程序的临时网站地址，4423代表了VisualWebDeveloper使用的一个随机端口，每次调试的时候，VisualWebDeveloper都会使用这个端口来作为内置服务器的端口号。
在各计算机上，该端口号都是不相同的，因为该端口号是VisualWebDeveloper随机选择的。
在这个模板应用程序的页面的右上角，提供了两个按钮与一个“登录”链接，点击“登录”链接，页面跳转到登录页面，点击“主页”按钮，页面返回到主页，点击“关于”按钮，页面跳转到“关于”页面。
（2）在第1题的基础上，让我们来创建一个控制器（controller）类。
在解决方案资源管理器中，鼠标右击Controllers文件夹，并且点击添加->控制器，如图2-1所示。
图2-1添加控制器
在弹出的“添加控制器”对话框中,将控制器命名为“HelloWorldController”,然后点击添加按钮，如图2-2所示。
图2-2命名控制器
观察解决方案资源管理器中新增加了一个文件，名字为HelloWorldController.cs，并且该文件呈打开状态，如图2-3所示。
图2-3控制器代码
修改打开的HelloWorldController.cs文件，在HelloWorldController类中，创建如代码清单2-1中所示的两个方法，控制器将返回一个HTML格式的字符串。
代码2-1控制器中创建方法
publicclassHelloWorldController:
Controller
{
//
//GET:
/HelloWorld/
publicstringIndex（）
{
return"这是我的默认action...";
}
//
//GET:
/HelloWorld/Welcome/
publicstringWelCome（）
{
return"这是我的Welcome方法...";
}
}
在这个修改后的HelloWorldController控制器中，第一个方法名为Index。
现在让我们从浏览器中调用该方法。
运行应用程序（按F5键或Ctrl+F5键）,在打开的浏览器中的地址栏后面，添加“HelloWorld”路径（譬如，在我的计算机上，浏览器中地址为http:
//localhost:
4423/HelloWorld），画面显示如图2-4所示。
由于在Index方法中，直接返回了一个HTML格式的字符串，所以在浏览器中将该字符串显示出来。
图2-4HelloWorldController控制器中Index方法的运行结果
在ASP.NETMVC中，可以根据浏览器中的输入地址来调用不同的控制器或控制七种不同的方法。
ASP.NETMVC的默认的映射逻辑使用如下所示的格式来决定应该调用什么控制器或控制器中的什么方法。
/[Controller]/[ActionName]/[Parameters]
URL地址的第一部分决定调用哪个控制器类，所以“/HelloWorld”映射到HelloWorldController控制器类。
第二部分决定调用控制器中的哪个方法。
所以“/HelloWorld/Index”将会调用HelloWorldController控制器类的Index方法。
由于Index方法是控制器类的默认方法（可以另外指定控制器类的默认方法），所以也可只输入“/HelloWorld”来调用该方法。
在浏览器的地址栏中，输入“http:
//localhost:
xxxx/HelloWorld/Welcome”，将会调用HelloWorldController控制器类的Welcome方法，该方法返回“这是我的Welcome方法...”文字，所以浏览器中显示该文字，如图2-5所示。
图2-5HelloWorldController控制器中Welcome方法的运行结果
接下来，让我们修改Welcome方法，以便在URL地址栏中可以传递一些参数给该方法（例如：
/HelloWorld/Welcome?
name=Scott&numtimes=4）。
修改后的代码如下所示。
注意这里我们使用了C#的可选参数，当URL地址中没有使用numtimes参数时，该参数被默认设定为1。
publicstringWelcome（stringname,intnumTimes=1）
{
returnHttpUtility.HtmlEncode（"Hello"+name+",NumTimesis:
"+numTimes）;
}
运行该应用程序，在浏览器中输入“http:
//localhost:
xxxx/HelloWorld/Welcome?
name=Scott&numtimes=4”，运行结果显示如图2-6所示。
浏览器自动将URL地址栏中的参数映射成Welcome方法中的传入参数。
图2-6 在Welcome方法中使用参数
到现在为止，我们展示了MVC中的“VC”（视图与控制器）部分的工作机制，控制器返回HTML字符串。
很显然大多数情况下你不想让控制器直接返回HTML字符串，因为那样的话编码起来就太麻烦了。
所以我们需要使用不同的视图模板文件来帮助生成HTML格式的页面文件，在下一题中让我们来看一下如何在ASP.NETMVC中使用视图。
（3）添加一个视图
在本题我们修改HelloWorldController类，以便使用视图来向客户端展示HTML格式的响应结果。
我们使用ASP.NETMVC中新增的Razor视图引擎来创建视图。
Razor视图模板文件的后缀名为.cshtml,它提供了一种简洁的方式来创建HTML输出流。
Razor视图大大减少了在书写视图模板文件时所需要输入的字符，提供了一个最快捷，最简便的编码方式。
这里，我们在HelloWorldController类的Index方法中添加使用一个视图。
在修改前的Index方法中返回一个字符串，我们修改这个方法来使它返回一个视图，代码如下所示。
publicActionResultIndex（）
{
returnView（）;
}
这段代码表示Index方法使用一个视图模板来在浏览器中生成HTML格式的页面文件。
接着，让我们来添加一个Index方法所使用的视图模板。
在Index方法中点击鼠标右键，然后点击“添加视图”，将会弹出一个“添加视图”对话框。
图3-1添加视图
图3-2 添加视图对话框
在该对话框中，不做任何修改，直接点击添加按钮，观察解决方案资源管理器中，在MvcMovie项目下的Views文件夹下创建了一个HelloWorld文件夹，并且在该文件夹中创建了一个Index.cshtml文件，同时该文件呈打开状态，如图3-3所示。
图3-3 视图模板文件被创建并呈打开状态
在该文件中添加一些文字，代码如代码清单3-1所示。
代码3-1Index.cshtml视图模板文件
@{
ViewBag.Title="首页";
}
首页
这是我的第一个视图模板
运行应用程序，输入地址“http:
//localhost:
xxxx/HelloWorld”。
由于在Index方法中并没有做任何事情，只是简单地一行代码“returnView（）”,该行代码表示我们使用一个视图模板文件来在浏览器中展示响应结果。
因为我们并没有显式指定使用哪个视图模板文件，所以使用了默认的Views文件夹下的HelloWorld文件夹下的Index.cshtml视图模板文件。
该视图模板文件中只有简单的两行文字，在浏览器中的显示结果如图3-4所示。
图3-4 在浏览器中显示视图
（4）分别在VisualStudio2010ASP.NETMVC应用程序开发环境下建立三个项目。
依次分别保存、编译、运行，保留结果。
在本周内根据实验的代码和运行结果编写好本次实验报告并上交。
升级会员 