开发环境为Visio Studio 2015
选择“文件”-“新建”-“项目”
在“模板”中,选择“Visual C#”-“ASP.NET Web应用程序”,输入项目名称和保存位置
在“模板”中选择“MVC”
创建完毕后,会生成响应模板的文件,包括配置文件和示例页面,后台处理类等
(1)、在“_LoginPartial.cshtml”文件中添加超链接
- @Html.ActionLink("监控", "Center", "Monitor", routeValues: null, htmlAttributes: new { id = "monitorLink" })
- @Html.ActionLink("注册", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" })
- @Html.ActionLink("登录", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" })
其中,第一个超链接“监控”为新加内容,这个按钮在启动页的右上角
(2)、在“Views”目录下新建“Monitor”目录,在该目录下新建“Center.cshtml”文件,如下图:
(3)、在“Controllers”目录下新建“MonitorController.cs”类,内容如下:
using System;
using System.Collections.Generic;
using System.Web.Mvc;
using System.Reflection;
using System.Threading.Tasks;
using VideoMonitorPlatform.Models;
using Newtonsoft.Json;
using VideoMonitorPlatform.Utils;
namespace VideoMonitorPlatform.Controllers
{
public class MonitorController : Controller
{
// GET: /Monitor/Center
[AllowAnonymous]
public ActionResult Center()
{
return View();
}
}
}
再次运行程序,点击画面右上角的“监控”按钮,即可跳转到新建的“Center.cshtml”页面上
(1)在“Center.cshtml”文件中添加js代码,提交AJAX请求:
@{
Layout = null;
}
This is a test Monitor Center.
(2)在“MonitorController”类中添加响应POST请求的方法,如下:
// POST: /Monitor/Center
[HttpPost]
[AllowAnonymous]
public ActionResult Center(NvrModel nvrModel)
{
Object result = new
{
ip = nvrModel.ip,
port = nvrModel.port,
username = nvrModel.username,
password = nvrModel.password
};
string jsonstr = JsonConvert.SerializeObject(result);
return Content(jsonstr);
}
(3)接收参数需要写一个和前台传递过来参数相匹配的Model类,内容如下:
using System;
using System.Collections.Generic;
namespace VideoMonitorPlatform.Models
{
public class MonitorModels
{
}
public class NvrModel
{
public string ip { get; set; }
public string port { get; set; }
public string username { get; set; }
public string password { get; set; }
}
}
注:前台传递/接收参数,使用javascript方法JSON.stringify()
后台接收参数,使用和前台传递JSON对象相匹配的Model类
后台返回结果,使用JsonConvert.SerializeObject()和Content()方法,将对象转成JSON格式返回
下载地址