新手求助：ASP.NET MVC5网站设计问题：怎么用JQuery Ajax的Post()方法从前台传递一个ViewModel对象至后台数据库

让我来敲 2017-11-27 09:27:21

最近初步接触了MVC5，想自行设计一个学生信息管理系统，但是遇到一个问题：通过网页输入一个ViewModel的全部属性之后，怎么将他通过JQuery Ajax的Post（）方法提交到数据库
下面是我的StudentViewModel：
public class Student
{
[Display(Name = "学号")]
public int StdId { get; set; }
[Display(Name = "姓名")]
public string StdName { get; set; }
[Display(Name = "性别")]
public string StdSex { get; set; }
[Display(Name = "年龄")]
public int StdAge { get; set; }
}
接着是StudentDataOperatin的Create方法：
public void Create(Student t)
{
IDbConnection con = new SqlConnection(this.Sqlcon);
IDbCommand cmd = new SqlCommand(@"Insert into Student (StdId,StdName,StdSex,StdAge)Values(@StdId,@StdName,@StdSex,@StdAge);");
cmd.Connection = con;
cmd.Parameters.Add(new SqlParameter("@StdId", t.StdId));
cmd.Parameters.Add(new SqlParameter("@StdName", t.StdName));
cmd.Parameters.Add(new SqlParameter("@StdSex", t.StdSex));
cmd.Parameters.Add(new SqlParameter("@StdAge", t.StdAge));
con.Open();
cmd.ExecuteNonQuery();
con.Close();
}
接着是Action：
public ActionResult Create2()
{
return View(new Student() { StdId = 1 });
}
[HttpPost]
public ActionResult Create2(Student t)
{
try
{
// TODO: Add insert logic here
studentDataOperation.Create(t);
return RedirectToAction("Index");
}
catch
{
return View();
}
}
然后就是View:
@model MVC2.Models.ViewModels.Student
@{
ViewBag.Title = "Create2";
}
<script>
$(document).ready(function () {
$("button").click(function () {
alert("嗯哼哼~");
var Id = $("#StdId").val();
var Name = $("#StdName").val();
var Sex = $("#StdSex").val();
var Age = $("#StdAge").val();
$.post("Student/Create2", {@Model.StdId=Id,@Model.StdName=Name,@Model.StdSex=Sex,@Model.StdAge=Age}, function (status) {
alert("添加" + status);
});
});
});
</script>
<h2>Create2</h2>
<label for="StdId" >学号：</label>
<input class="input-sm" id="StdId" /><br />

<label for="StdName">姓名：</label>
<input class="input-sm" id="StdName" /><br />

<label for="StdSex">性别：</label>
<input class="input-sm" id="StdSex" /><br />

<label for="StdAge">年龄：</label>
<input class="input-sm" id="StdAge" /><br />

<button id="submit">添加</button>

各位路过的神仙能帮忙解决下不？

【补充】：至于属性名Std*,是因为入门语言c++,写 using namespace std;习惯之后敲上去了，后来嫌麻烦就不改了。。。。。

...全文

370 14 打赏收藏转发到动态举报

写回复

用AI写文章

14 条回复

切换为时间正序

请发表友善的回复…

发表回复

让我来敲 2017-11-30

打赏
举报

引用 13 楼 insus的回复:

参考: http://zzk.cnblogs.com/my/s/blogpost-p?Keywords=post+model

谢谢，解决啦已经

insus 2017-11-29

打赏
举报

参考: http://zzk.cnblogs.com/my/s/blogpost-p?Keywords=post+model

让我来敲 2017-11-28

打赏
举报

引用 10 楼 by_封爱的回复:

mvc很高端了能识别格式. 所以你可以有2个选择 .


            $("#post").click(function () {
                var d = { "id": 54, "name": "产品1", "price": 11.11, "time": "2000-01-01T00:00:00" };
                $.post($("#uuu").val(), d, function (data) {
                   cw(data);
                });

上面这种其实传过去的是对象. 而下面这种其实是json的字符串.


$.ajax({
                    type: 'POST',
                    url:$("#uuu").val(),
                    data: JSON.stringify(d),
                    success: function (data) {
                             cw(data)
                   },
                   contentType: "application/json",
                   dataType: 'json'
               });

都可以.

选第一个，一会试试

by_封爱 2017-11-28

打赏
举报

mvc很高端了能识别格式. 所以你可以有2个选择 .


            $("#post").click(function () {
                var d = { "id": 54, "name": "产品1", "price": 11.11, "time": "2000-01-01T00:00:00" };
                $.post($("#uuu").val(), d, function (data) {
                   cw(data);
                });

上面这种其实传过去的是对象. 而下面这种其实是json的字符串.


$.ajax({
                    type: 'POST',
                    url:$("#uuu").val(),
                    data: JSON.stringify(d),
                    success: function (data) {
                             cw(data)
                   },
                   contentType: "application/json",
                   dataType: 'json'
               });

都可以.

让我来敲 2017-11-28

打赏
举报

引用 2 楼 EdsionWang的回复:

看看你的页面上有没有引用jquery. 看看这些基础教程，照着上面走一遍 https://www.cnblogs.com/powertoolsteam/p/MVC_one.html

JQuery的引用不是在创建MVC项目的时候自动引用的吗

让我来敲 2017-11-28

打赏
举报

引用 5 楼 exception1992的回复:

例如view中的stu定义：
var stu= {};
stu.Id = $("#StdId").val();
stu.Name = $("#StdName").val();
stu.Sex = $("#StdSex").val();
传递的Data 数据类似：'{s:' + JSON.stringify(stu) + '}' （自行查询 JSON.stringify），字符串中的s就是Action方法中的参数对象，这个名字必须一致。 MVC中自有“ModelBuilder”机制，它会将json格式的数据转换为相应的类，前提是类的属性定义名称不会有错。

嗯，变量名是没错的，应该是Json格式的问题

让我来敲 2017-11-28

打赏
举报

引用 3 楼娃都会打酱油了的回复:

json格式是{key:value,key:value} 不是 {key=value}

好，等下课回去试一下

江湖评谈 2017-11-28

打赏
举报

你可以直接用 asp.net mvc4自带的 jsonresult 来操控 json 他继承了actionresult 返回的视图雷同所有其它

exception92 2017-11-28

打赏
举报

例如view中的stu定义：
var stu= {};
stu.Id = $("#StdId").val();
stu.Name = $("#StdName").val();
stu.Sex = $("#StdSex").val();
传递的Data 数据类似：'{s:' + JSON.stringify(stu) + '}' （自行查询 JSON.stringify），字符串中的s就是Action方法中的参数对象，这个名字必须一致。 MVC中自有“ModelBuilder”机制，它会将json格式的数据转换为相应的类，前提是类的属性定义名称不会有错。

正怒月神版主 2017-11-28

打赏
举报

同3楼，先学习json格式吧。

娃都会打酱油了 2017-11-28

打赏
举报

json格式是{key:value,key:value} 不是 {key=value}

EdsionWang 2017-11-28

打赏
举报

看看你的页面上有没有引用jquery. 看看这些基础教程，照着上面走一遍 https://www.cnblogs.com/powertoolsteam/p/MVC_one.html

让我来敲 2017-11-28

打赏
举报

解决啦，JQuery没有引用(竟然不是默认引用)，同时，语法上也有一点小瑕疵，修改之后的代码：这是VIEW: @{ ViewBag.Title = "Create2"; } <h2>Create2</h2> <script src="~/Scripts/jquery-1.10.2.min.js"></script> <label for="StdId" >学号：</label> <input type="text" class="input-sm" id="StdId" /><br /> <label for="StdName">姓名：</label> <input type="text" class="input-sm" id="StdName" /><br /> <label for="StdSex">性别：</label> <input type="text" class="input-sm" id="StdSex" /><br /> <label for="StdAge">年龄：</label> <input type="text" class="input-sm" id="StdAge" /><br /> <button id="submit">添加</button> <script> $(document).ready(function () { $("button").click(function () { var StdId = $("#StdId").val(); var StdName = $("#StdName").val(); var StdSex = $("#StdSex").val(); var StdAge = $("#StdAge").val(); $.post("Create2", {StdId:StdId,StdName:StdName,StdSex:StdSex,StdAge:StdAge},function (data) { alert("添加" + data.status); }); }); }); </script> 然后action也改了一下： public ActionResult Create2() { return View(); } [HttpPost] public ActionResult Create2(Student t) { try { // TODO: Add insert logic here studentDataOperation.Create(t); return Json(new { status="成功"}); } catch { return Json(new { status = "失败" }); } } 谢谢各位大神的指点

让我来敲 2017-11-27