【ASP.NET MVC4】实践练习-基于ASP.NET MVC 实现网页计算器,计算平均成绩

网页计算器案例效果图演示:

mvc项目练习-计算器

网页计算器案例知识点:

创建ASP.NET MVC 项目、创建控制器、创建视图、创建模型、理解 MVC 的原理

需要的前提知识储备:

【ASP.NET MVC4】第一课:初识ASP.NET MVC,创建第一个ASP.NET MVC项目

 

实现步骤:

第一步,新建MVC项目:在VS2012中,新建一个MVC项目,这里项目名称命名为“MvcCalculator”,项目模板选择为“空”,视图引擎选择为“ASPX”,然后单击【确定】按钮。

第二步,添加控制器:在“解决方案资源管理器中”,右键单击文件夹“Controllers”,在弹出的快捷菜单中,依次点击【添加】→【控制器】,在弹出的【添加控制器】窗体中,将控制器名称修改为“CalculatorController”,然后单击【添加】按钮。

添加后的效果:

【控制器基础理论理解】

控制器(Controller)本身是一个派生于 Controller 的类,这个类包含有多个方法,这些方法中声明为 public 的即被当做动作(Action),可以通过这些 Action 接收页面请求,并决定应用的视图(View)。

控制器约定:

  • 控制器的后缀名一定是Controller结尾。
  • 方法控制器中的方法会去查询,Views文件夹下的和控制器同名目录下的,和action同名的视图。
  • 控制器中的action方法一定是public,否则会抛出404异常。
  • return view("程序员可以自己指定视图名称")

代码解析:

  • using System.Web;System.WebASP.NET 核心命名空间。
  • using System.Web.Mvc;System.Web.Mvc 是 MVC 框架的最基本的命名空间。
  • public class CalculatorController : Controller  说明我们添加的控制器类CalculatorController,它继承自 Controller 类(控制器类),因此具有控制器的功能,(能够接受用户的请求,同时把请求处理的结果,返回给特定视图,这是他基本的作用。)
  • Controller类的命名规范,Controller是规定的结尾,前面的 Calculator 才是控制器的名称。
  • 控制器里的方法,叫做动作方法,用于响应客户端请求,并调用响应的视图,向浏览器输出信息。
  • public ActionResult Index()  方法的返回值类型,一般都是ActionResult,是一个高度的抽象类。
  • return View() ,View()方法默认调用Index视图(去当前Views文件夹下查找,与控制器名称相同的目录下的,与控制器方法Index()同名的视图)

控制器里,动作方法的主要任务:

  1. 获取数据:接收请求数据(比如,用户输入的账号密码)
  2. 业务处理:和Model交互……
  3. 返回视图或跳转到其他控制器

===================================

第三步,添加视图:在“解决方案资源管理器中”,右键单击文件夹“Views”,在弹出的快捷菜单中,依次点击【添加】→【新建文件夹】,然后将新建立的文件夹命名为“Calculator”。在右键单击文件夹“Calculator”,在弹出的快捷菜单中,依次点击【添加】→【视图】,在弹出的【添加视图】窗体中,将视图名称修改为“MyCal”,视图引擎选择为“ASPX”,取消勾选“使用布局或母版页“””然后单击【添加】按钮。

添加后的效果:

第四步,设计数据模型:这里的项目实践比较简单,暂时不用数据库,因此我们只新添加一个类即可。

1、在“解决方案资源管理器中”,右键单击文件夹“Models”,在弹出的快捷菜单中,依次点击【添加】→【类】,在弹出的【添加新项】窗体中,将类的名称修改为“MyCalculator.cs”,然后单击【添加】按钮。

添加后的效果:

2、在MyCalculator类中,编写一个方法,用来计算平均分。

思考一个问题:一般在控制器中有3个任务,接收数据→处理数据→返回数据(视图),接收之前,是不是必须先有数据?那么这个数据从哪里来?(视图里的数据)

 

第五步,设计视图页面:打开 “MyCal.aspx” 文件,在<body>里编写代码,设计页面内容。(此处涉及的知识内容参考:【ASP.NET 开发Web项目】

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <meta name="viewport" content="width=device-width" />
    <title>MVC计算器-王迪</title>
</head>
<body>
    <form method="post" action="#"><%--暂时不知道,将数据提交到哪里,因此action的值,先用#--%>
        计算我的平均成绩:<br />
        总成绩:<input type="text" name="sumScore" /><%--name属性必须要有,在提交数据时,后台是根据name值进行获取的--%>
        科目数:<input type="text" name="sumSubject" /><br />
        <input type="submit" value="开始计算" />        
    </form>
</body>
</html>

 

第六步,在控制器里接收并处理数据:打开“CalculatorController.cs”文件,声明一个方法,用来接收和处理数据。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcCalculator.Models;//手动引入命名空间

namespace MvcCalculator.Controllers
{
    public class CalculatorController : Controller
    {
        //
        // GET: /Calculator/

        public ActionResult Index()
        {
            return View();
        }

        //声明一个专门用来接收、处理数据的方法
        public ActionResult GetAvgScore()//控制器方法的返回值,一般都是ActionResult
        {
            //1、接收收据
            int sumScore = Convert.ToInt32(Request.Params["sumScore"]);//用户所提交的数据,全部会放在Request对象里,我们可以通过参数以键值对的方式去获取,获取之后将其转换成int类型,赋值给变量
            int sumSubject = Convert.ToInt32(Request.Params["sumSubject"]);//也可以这样获取数据:Request.Form["sumSubject"]
           //2、调用模型,处理数据(和后台做一个交互)
            MyCalculator objCal = new MyCalculator();//需要先引用命名空间Models
            int result = objCal.GetAvg(sumScore, sumSubject);//调用对象的方法
            //3、保存需要传递的数据(控制器处理好数据之后,需要将数据传递给视图)
            ViewData["avgScore"] = "您的平均成绩:" + result;//ViewData是基于键值对的形式,这里起一个键名,然后给他赋值
            //返回视图
            return View("MyCal");//如果不给参数,按照约定默认返回的是与动作方法同名的视图,也就是说会去Calculator文件夹中去找GetAvgScore页面,因此我们让它显示返回MyCal页面
        }

    }
}

代码解析:Request 对象提供对页面输入流的访问,用于获取用户输入的数据,常用成员如表所示。

详细内容,可以参照博文:【ASP.NET】第三课——ASP.NET 系统对象与状态管理

 

第七步,在视图里接收数据:打开 “MyCal.aspx” 文件,修改网页内容。

1、修改action属性的值:

2、在视图中,接收并显示数据

修改后的代码:

    <form method="post" action="/CalCulator/GetAvgScore"><%--将当前表单数据,提交给CalCulator控制器的GetAvgScore方法--%>
        计算我的平均成绩:<br />
        总成绩:<input type="text" name="sumScore" /><%--name属性必须要有,在提交数据时,后台是根据name值进行获取的--%>
        科目数:<input type="text" name="sumSubject" /><br />
        <input type="submit" value="开始计算" />   
        <%=ViewData["avgScore"] %> <%--使用表达式,在页面中输出数据--%>    
    </form>

第八步,修改路由:在“解决方案资源管理器中”,单击文件夹“App_Start”前面的三角形,然后单击文件“RouteConfig.cs”,这是打开后,默认的样子。

1、将控制器的名字,修改为我们创建的控制器名称“Calculator”

2、运行测试,发现程序报错,提示找不到视图

3、打开“CalculatorController.cs”文件,修改Index()方法里的内容。这里将return View("MyCal");

思考一下,为什么这样写?(提示:参照第六步的代码注释内容)

4、再次运行测试,正常运行。

 

实践思考:结合本实践的实现流程,思考MVC的原理,加深理解。提示:可以通过给程序打断点,印证程序运行的流程。

 

 

 

========这里是结束分割线=============

 

 

 

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付 19.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值