asp.net mvc 项目进行画面跳转,响应ajax请求,传递参数

asp.net 专栏收录该内容
6 篇文章 0 订阅

1、创建asp.net mvc项目

开发环境为Visio Studio 2015
选择“文件”-“新建”-“项目”
在这里插入图片描述
在“模板”中,选择“Visual C#”-“ASP.NET Web应用程序”,输入项目名称和保存位置
在这里插入图片描述
在“模板”中选择“MVC”
在这里插入图片描述
创建完毕后,会生成响应模板的文件,包括配置文件和示例页面,后台处理类等

2、画面跳转

(1)、在“_LoginPartial.cshtml”文件中添加超链接

    <ul class="nav navbar-nav navbar-right">
        <li>@Html.ActionLink("监控", "Center", "Monitor", routeValues: null, htmlAttributes: new { id = "monitorLink" })</li>
        <li>@Html.ActionLink("注册", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" })</li>
        <li>@Html.ActionLink("登录", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" })</li>
    </ul>

其中,第一个超链接“监控”为新加内容,这个按钮在启动页的右上角

(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”页面上

3、发送AJAX请求

(1)在“Center.cshtml”文件中添加js代码,提交AJAX请求:

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <script type="text/javascript" src="~/Scripts/jquery-1.10.2.min.js"></script>
    <title></title>
    <script type="text/javascript">
        function testClick() {
            let loginParam = { "ip": "192.168.1.100", "port": "37777", "username": "admin", "password": "admin123" };
            $.ajax({
                type: 'post',
                url: '/Monitor/Center',
                dataType: 'json',
                contentType: 'application/json',
                async: false,
                data: JSON.stringify(loginParam),
                success: function (result) {
                    alert(JSON.stringify(result));
                },
                error: function () {
                    console.log("error");
                }
            });
        }
    </script>
</head>
<body>
    <div>
        This is a test Monitor Center.
    </div>
    <div>
        <button id="btn_test" onclick="testClick()">测试</button>
    </div>
</body>
</html>

(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格式返回

4、DEMO实例下载

下载地址

  • 0
    点赞
  • 0
    评论
  • 6
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 黑客帝国 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值