MVC框架中的前端与后端数据传递及实例
一、MVC框架
MVC代表Model、View、Controller，即模型、视图、控制器。其中：
- View(视图):就是人机交互界面，可以给用户显示业务逻辑数据，同时也可以 接收用户输入的数据。
- Model(模型):程序的业务数据和业务逻辑处理部分，Model提供视图的显示数据，且一个Model能为多个视图提供业务数据，因此Model也增加了代码的复用性。
- Controlle(控制器):用来接收从视图输入的参数，同时调用对应的Model模型对数据进行业务逻辑处理，同时将处理好的数据传递到对应的视图来显示给用户。
MVC三部分分工明确，降低了应用程序的耦合性。典型的MVC模型如下图所示（此图来自网络）。首先，用户通过视图View，向控制器Controller传递指令及数据；控制器Controller根据来自视图的View的指令、数据，抉择相应的模型Model，并由Model完成对数据库的增删改查操作及业务处理；最后控制器把处理后的数据通过视图呈现给用户。在MVC框架中，数据贯穿整个过程，前端后端间数据传递，是Web应用程序的重要工作。
二、前端从后端取数据
以ASP.NET的MVC为例，前端从后端分别获取文本数据及数据库数据（建议刚接触同学重点看文本数据的获取，亲自做一遍，感受一下其中的方法）：
1.前端通过ajax从后端获取文本数据
1）建立一个空的MVC程序，删除原有的控制器与视图，新建一个Test控制器，并右击控制器的Index方法，在弹出的对话框里选择“添加视图”，将在Views文件下自动建一个Test文件夹，内部含有一个Index.cshtml页面。
2）在Content文件夹下放一个名为txtData.txt文件，在里面加任意内容，并保存Unicode格式（防止加载后数据乱码）。
3）在Index.cshtml页面中，代码如下：
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml"; //设置的布局页
}
从后台加载文本数据
这是一个demo
4）调试程序，点击button按钮后，h3元素显示文本文件中的内容，表面前端从后端加载到了数据。
2.前端通过ajax从后端获取数据库数据
1）利用SQL Server新建一个数据库，在库中建立一个数据表，并在表中添加记录若干。
2）在上述的MVC程序的Web.config文件里，根据数据库配置，向configuration节点添加connectionStrings属性：
3）在Models文件夹加入一个名为DbOperate的类，用于操作数据库
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
namespace DataExchange.Models
{
public class DbOperate
{
private string conString;
public DbOperate()
{
conString = ConfigurationManager.ConnectionStrings["SQLDatabase"].ConnectionString;
}
public DataSet GetTable()
{
DataSet table = new DataSet();
SqlConnection conn = new SqlConnection(conString);//实例连接对象
conn.Open();//打开数据库连接
string sqlString = "select * from Train_Coordinate";
SqlCommand command = conn.CreateCommand();//通过连接对象创建数据库命令对象
command.CommandText = sqlString; //确定文本对象执行的SQL语句
SqlDataAdapter sqlDataAdapter = new SqlDataAdapter(sqlString, conn);
//sqlDataAdapter.SelectCommand = command;
sqlDataAdapter.Fill(table);
return table;
}
}
}4）引用Newtonsoft，在Models文件夹中添加一个静态类Json，作用是将从数据库中取回的数据生成json字符串，代码如下：
using Newtonsoft.Json;
using Newtonsoft.Json.Converters;
namespace DataExchange.Models
{
public static class Json //将从数据库中取回的数据生成json字符串，返回给客户端
{
public static string ToJson(this object obj)
{
var timeConverter = new IsoDateTimeConverter { DateTimeFormat = "yyyy-MM-dd HH:mm:ss" };
return JsonConvert.SerializeObject(obj, timeConverter);
}
}
}5）想控Controllers文件夹添加一个GetDataController控制器，添加如下代码：
using DataExchange.Models;
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace DataExchange.Controllers
{
public class GetDataController : Controller
{
public ActionResult Index()
{
DbOperate dBOprate = new DbOperate();
DataSet dataSet = dBOprate.GetTable();
return Content(dataSet.Tables[0].ToJson());
}
}
}6）在Index.cshtml页面中，代码如下：
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml"; //设置的布局页
}
从后台加载文本数据
这是一个demo
7）运行调试结果如下：
二、后端接收前端数据
后端接收前端传递的数据有多种，本小节介绍两种方法
1.按属性名接收参数
1）在GetDataController中添加Accept1动作
//参数名要与前端传递数据的属性名相同，不同则无法赋值给Accept1方法的参数
//名字忽略大小写，例如age与AGE、Age是一样的
public ActionResult Accept1(string userName,string AGE)
{
string result = "1(通过属性名接收参数).我的名字叫：" + userName + ",今年" + AGE + "岁了！";
return Content(result);
}2.按类接收参数
1）在Models文件夹中增加一个Person类：
public class Person
{
public string UserName
{
get;set;
}
public int Age
{
get;set;
}
}2）在GetDataController中添加Accept1动作
//MVC框架自动将前端传递的数据封装到Person类对象中
public ActionResult Accept2(Person person)
{
string result = "2(通过类接收参数).我的名字叫：" + person.UserName + ",今年" + person.age + "岁了！";
return Content(result);
}3）Index.html代码
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml"; //设置的布局页
}
从后台加载文本数据
这是一个demo
4）测试结果
实例程序可在https://download.csdn.net/download/qq_38834384/11286852下载