一、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”; //设置的布局页

}

<h2>从后台加载文本数据</h2>

<h3 id=”demo”>这是一个demo</h3>

<button id=”loadData”>加载数据</button>

<script>

$(document).ready(function () {

$(“#loadData”).click(function () { //这里用到jQuery,需要在布局页中引用jQuery

htmlobj = jQuery.ajax({url: “/Content/txtData.txt”,async: false});

$(“#demo”).text(htmlobj.responseText); //将从后台获取的数据展现在h3元素上

})

});

</script>

4)调试程序,点击button按钮后,h3元素显示文本文件中的内容,表面前端从后端加载到了数据。

2.前端通过ajax从后端获取数据库数据

1)利用SQL Server新建一个数据库,在库中建立一个数据表,并在表中添加记录若干。

2)在上述的MVC程序的Web.config文件里,根据数据库配置,向configuration节点添加connectionStrings属性:

<connectionStrings>

<add name=”SQLDatabase” connectionString=”Data Source=.;Initial Catalog=DB;User ID=sa;Password=123456″/>

</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”; //设置的布局页

}

<h2>从后台加载文本数据</h2>

<h3 id=”demo”>这是一个demo</h3>

<button id=”loadData”>加载数据</button>

<button id=”loadDataFromDb”>加载数据</button>

<script>

$(document).ready(function () {

$(“#loadData”).click(function () { //这里用到jQuery,需要在布局页中引用jQuery

htmlobj = jQuery.ajax({url: “/Content/txtData.txt”,async: false});

$(“#demo”).text(htmlobj.responseText); //将从后台获取的数据展现在h3元素上

})

$(“#loadDataFromDb”).click(function () { //这里用到jQuery,需要在布局页中引用jQuery

htmlobj = jQuery.ajax({

url: “/GetData/Index”, async: false });

$(“#demo”).text(htmlobj.responseText); //将从后台获取的数据展现在h3元素上

})

});

</script>

7)运行调试结果如下:

发表评论

电子邮件地址不会被公开。 必填项已用*标注