.net mvc——前端html(cshtml)页面利用ajax向后端controller传值的常用方式
这里前端html页面使用ajax向controller传递的主要是form表单的内容，且前端使用了layui框架。后端controller接收值可以有两种方法1.前端cshtml代码(layui模板自带的登录界面，使用时记得添加相关的引用和依赖，这里已经封装在BundleConfig.cs中)@{ViewBag.Title = "Login";}<!DOCTYPE ...
·
这里前端html页面使用ajax向controller传递的主要是form表单的内容，且前端使用了layui框架。后端controller接收值可以有两种方法
1.前端cshtml代码(layui模板自带的登录界面，使用时记得添加相关的引用和依赖，这里已经封装在BundleConfig.cs中)
@{
ViewBag.Title = "Login";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
@Styles.Render("~/Content/css")
<link href="~/Scripts/layui/src/css/login.css" rel="stylesheet" />
@*<link href="~/Scripts/src/css/login.css" rel="stylesheet" />*@
</head>
<body class="layui-layout-body" style="background-color:black;padding-top:70px !important">
<div class="layui-fluid" style="padding: 0px;">
<canvas id="particle"></canvas>
<br />
<div class="layui-form layui-form-pane layui-admin-login">
<div class="layui-admin-login-header">
<h1>登陆</h1>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><i class="layui-icon layui-icon-username"></i></label>
<div class="layui-input-block">
<input required lay-verify="required" name="userAcc" class="layui-input" type="text" placeholder="请输入账号" autocomplete="on" />
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><i class="layui-icon layui-icon-password"></i></label>
<div class="layui-input-block">
<input required lay-verify="required" name="userPassword" class="layui-input" type="password" placeholder="请输入密码" autocomplete="off" />
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">
<img id="verifycode" style="height: 36px;
width: 108px;
margin-left: -15px;
margin-top: -8px;
cursor: pointer;" src="@Url.Action("VerifyCode")" />
</label>
<div class="layui-input-block">
<input required lay-verify="required" name="VerifyCode" class="layui-input" type="text" placeholder="请输入验证码" autocomplete="off" />
</div>
</div>
<div class="layui-form-item">
<input id="rememberMeCb" type="checkbox" name="rememberMe" class="layui-input" title="记住密码" lay-skin="primary">
<a href="javascript:;" style="margin-top: 10px;float: right;color: #009688;">忘记密码?</a>
</div>
<div class="layui-form-item">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="login">
<i class="layui-icon layui-icon-ok-circle"></i>登陆
</button>
</div>
@*<div class="layui-btn-container">
<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="register">
<i class="layui-icon layui-icon-add-circle"></i>注册
</button>
</div>*@
</div>
<!--底部-->
<div class="layui-footer">@@捷普工夹具管理系统.All rights reserved.</div>
</div>
</div>
@Scripts.Render("~/bundles/layui")
@Scripts.Render("~/bundles/jquery")
<script>
window.onload = function () {
}
//登录 需要做表单提交给后台， 或者数据收集之后提交给后台
layui.use(['layer', 'form'], function () {
var layer = layui.layer,
form = layui.form,
$ = layui.jquery;
form.on("submit(login)", function (obj) {
var user = obj.field;
//这里checkbo的bool值需要用jquery手动获取再添加到user中
user.rememberMe = $('#rememberMeCb').prop("checked");
layer.load(3)
//使用ajax向controller发送表单数据
$.ajax({
type: "POST",
url: "@Url.Action("Login")",
data: user,
success: function (result) {
if (result.Success == true) { // 说明验证成功了，
alert("sucess");
}
else
{
layer.msg(result.Message, {icon:5});
}
layer.closeAll("loading");
},
error: function (data) {
alert("错误" + data);
}
})
})
$("#verifycode").on("click", function () {
$("#verifycode").attr("src", "@Url.Action("VerifyCode")?" + Math.random());
})
})
</script>
</body>
</html>
html实际显示的页面如下：
这里要传递用户名，密码，验证码。是否记住密码，一共四个数据，点击登录时执行ajax方法前封装的数据user如下：（可设置debugger在调试窗口Source中c查看）
2.后端controller接收值
这里可以使用两种方式
（1）先定义相关viewmodel类，再使用model进行接收值
1)在view文件夹下定义类LoginViewModel
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace FixureWebSite.Models
{
public class LoginViewModel
{
public string userAcc { get; set; }
public string userPassword { get; set; }
public string verifyCode { get; set; }
public bool rememberMe { get; set; }
}
}
注意类中定义的字段要与前端中传递的字段相同（如果是像例子中一样使用form直接传值，那么其name属性值需要一一对应）
2）其对对应的controller中的action方法：
public ActionResult Login(LoginViewModel model)
{
if (model.userAcc == "123" && model.userPassword == "123")
{
return Json(new
{
Sucess = true,
Message = "登录成功"
});
}
return Json(new
{
Sucess = false,
Message = "登录失败"
});
}
对该action进行调试，可以看到model已经得到了user对象的值
同时该方法返回一个json字符串。。。
（2）直接在controller的接收参数中指明要接收的值(注意参数名与name一一对应)
此时对应的action方法：
public ActionResult Login(string userAcc, string userPassword, bool rememberMe)
{
if (userAcc == "123" && userPassword == "123")
{
return Json(new
{
Sucess = true,
Message = "登录成功"
});
}
return Json(new
{
Sucess = false,
Message = "登录失败"
});
}
通过设置断点调试，可以看到该方法已经获取了前端传来的值
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
1
0- 0
已为社区贡献7条内容
所有评论(0)