Jquery json未将值解析到控制器
晚上好。。。 我尝试使用jquery创建可编辑的gridview。单击“编辑”按钮时，行将变为可编辑行。但我有个问题。当我尝试将值解析到控制器时，可以传递该值。。有人能帮我吗。。。 我使用视图模型从数据库中获取数据 我从构建器类中构建数据 这就是代码 我的视图模型Jquery json未将值解析到控制器,jquery,asp.net-mvc,asp.net-mvc-3,asp.net-mvc-4,Jquery,Asp.net Mvc,Asp.net Mvc 3,Asp.net Mvc 4,晚上好。。。 我尝试使用jquery创建可编辑的gridview。单击“编辑”按钮时，行将变为可编辑行。但我有个问题。当我尝试将值解析到控制器时，可以传递该值。。有人能帮我吗。。。 我使用视图模型从数据库中获取数据 我从构建器类中构建数据 这就是代码 我的视图模型 namespace test.Models { public class DataDiriItem { public int ID { get; set; } public string
namespace test.Models
{
public class DataDiriItem
{
public int ID { get; set; }
public string Nama { get; set; }
public int Umur { get; set; }
}
public class ListDataDiri
{
public List<DataDiriItem> DataDiriList { get; set; }
}
}
@model List<test.Models.DataDiriItem>
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
var grid = new WebGrid(Model);
}
<style type="text/css">
.edit-mode { }
.edit-user{}
.edit-user display-mode{}
.save-user edit-mode{}
.display-mode{}
.cancel-user{}
.webgrid-table
{
font-family: Arial,Helvetica,sans-serif;
font-size: 14px;
font-weight: normal;
width: 650px;
display: table;
border-collapse: collapse;
border: solid px #C5C5C5;
background-color: white;
}
.webgrid-table td, th
{
border: 1px solid #C5C5C5;
padding: 3px 7px 2px;
}
.webgrid-header, .webgrid-header a
{
background-color: #E3E3E3;
color: black;
text-align: left;
text-decoration:none;
}
.webgrid-footer
{
}
.webgrid-row-style
{
padding: 3px 7px 2px;
}
.webgrid-alternating-row
{
background-color: #F5F5F5;
padding: 3px 7px 2px;
}
.col1Width
{
width: 50px;
}
.col2Width
{
width: 200px;
}
</style>
<div id="gridContent" style=" padding:20px; " >
@grid.GetHtml(
tableStyle: "webgrid-table",
headerStyle: "webgrid-header",
footerStyle: "webgrid-footer",
alternatingRowStyle: "webgrid-alternating-row",
selectedRowStyle: "webgrid-selected-row",
rowStyle: "webgrid-row-style",
mode: WebGridPagerModes.All,
columns:
grid.Columns(
grid.Column("ID", format: @<text> <span class="display-mode">@item.ID </span> <label id="ID" class="edit-mode">@item.ID</label> </text>, style: "col1Width" ),
grid.Column("Nama", format: @<text> <span class="display-mode"> <label id="lblNama" >@item.Nama</label> </span> <input type="text" id="Nama" value="@item.Nama" class="edit-mode" /></text>, style: "col2Width"),
grid.Column("Umur", format: @<text> <span class="display-mode"> <label id="lblUmur">@item.Umur</label> </span> <input type="text" id="Umur" value="@item.Umur" class="edit-mode" /> </text>, style: "col2Width"),
grid.Column("Action", format: @<text>
<button class="edit-user display-mode" >Edit</button>
<button class="save-user edit-mode" >Save</button>
<button class="cancel-user edit-mode" >Cancel</button>
</text>, style: "col3Width" , canSort: false)
))
@section scripts
{
<script type="text/javascript" >
$(function () {
$('.edit-mode').hide();
$('.edit-user, .cancel-user').on('click', function () {
var tr = $(this).parents('tr:first');
tr.find('.edit-mode, .display-mode').toggle();
});
$('.save-user').on('click', function () {
var tr = $(this).parents('tr:first');
var Nama = tr.find("#Nama").val();
var Umur = tr.find("#Umur").val();
var ID = tr.find("#ID").html();
tr.find("#lblNama").text(FirstName);
tr.find("#lblUmur").text(LastName);
tr.find('.edit-mode, .display-mode').toggle();
**var DataDiriItem =
{
"ID" : ID,
"Nama" : Nama, *this the error come.. but I can't solve it*
"Umur" : Umur
};**
alert(DataDiriItem);
$.ajax({
url: '/Home/UpdateUser/',
data: JSON.stringify(DataDiriItem),
type: 'POST',
contentType: 'application/json; charset=utf-8',
success: function (data) {
alert(data);
}
});
});
})
</script>
}
@型号列表
@{
ViewBag.Title=“Index”；
Layout=“~/Views/Shared/_Layout.cshtml”；
var grid=新的WebGrid（模型）；
}
.编辑模式{}
.编辑用户{}
.编辑用户显示模式{}
.保存用户编辑模式{}
.显示模式{}
.取消用户{}
.webgrid表
{
字体系列：Arial、Helvetica、无衬线字体；
字体大小：14px；
字体大小：正常；
宽度：650px；
显示：表格；
边界塌陷：塌陷；
边框：实心px#C5C5；
背景色：白色；
}
.webgrid表td，th
{
边框：1px实心#C5C5；
填充：3px 7px 2px；
}
.webgrid标头、.webgrid标头a
{
背景色：#E3；
颜色：黑色；
文本对齐：左对齐；
文字装饰：无；
}
.webgrid页脚
{
}
.webgrid行样式
{
填充：3px 7px 2px；
}
.webgrid交替行
{
背景色：#F5；
填充：3px 7px 2px；
}
.col1Width
{
宽度：50px；
}
.col2Width
{
宽度：200px；
}
@grid.GetHtml(
表样式：“webgrid表”，
标题样式：“webgrid标题”，
页脚样式：“webgrid页脚”，
交替行样式：“webgrid交替行”，
selectedRowStyle：“webgrid选定行”，
行样式：“webgrid行样式”，
模式：WebGridPagerModes.All，
柱：
网格.列(
grid.Column（“ID”，格式：@@item.ID@item.ID，样式：“col1Width”），
grid.Column（“Nama”，格式：@@item.Nama，样式：“col2Width”），
grid.Column（“Umur”，格式：@@item.Umur，样式：“col2Width”），
网格.列（“操作”，格式：@
编辑
拯救
取消
，样式：“col3Width”，canSort:false）
))
@节脚本
{
$（函数（）{
$（'.edit mode'）.hide（）；
$（'.edit user、.cancel user'）。在（'单击'，函数（）上{
var tr=$（this.parents（'tr:first'）；
tr.find（'.edit mode，.display mode'）.toggle（）；
});
$（'.save user'）。在（'click'，函数（）{
var tr=$（this.parents（'tr:first'）；
var Nama=tr.find（#Nama”）.val（）；
var Umur=tr.find（“#Umur”）.val（）；
var ID=tr.find（“#ID”）.html（）；
tr.find（“lblNama”）.text（名字）；
tr.find（“#lblUmur”）.text（姓氏）；
tr.find（'.edit mode，.display mode'）.toggle（）；
**var数据目录=
{
“ID”：ID，
“娜玛”：娜玛，*这个错误来了……但我解决不了*
“Umur”：Umur
};**
警报（数据目录项）；
$.ajax({
url:“/Home/UpdateUser/”，
数据：JSON.stringify（DataDiriItem），
键入：“POST”，
contentType:'application/json；charset=utf-8'，
成功：功能（数据）{
警报（数据）；
}
});
});
})
}
$('.save-user').on('click', function () {
var tr = $(this).parent().parent();
var Nama = tr.find("#Nama").val();
var Umur = tr.find("#Umur").val();
var ID = tr.find("#ID").html();
$.ajax({
url: '@Url.Action("UpdateUser", "Home")',
data: {Id:ID,Name:Name,Umur:Umur},
type: 'Post',
success: function (data) {
alert(data);
}
});
});
<div id="mygrid">
</div>
<div>
@{
var grid = new WebGrid(ViewBag.RegisterItems, rowsPerPage: 15, canPage: true, canSort: true, ajaxUpdateContainerId: "gridContent");
@grid.GetHtml(
tableStyle: "row",
alternatingRowStyle: "alt",
columns: grid.Columns(
grid.Column("Name", header: "User Name"),
grid.Column("Address", header: "Address"),
grid.Column("PhoneNo", header: "Phone No"),
grid.Column("", header: "Actions", format: @<text>
<input type="text" id="name" />
</text>),
grid.Column("", header: "Actions", format: @<text>
@Html.ActionLink("Edit", "Index", new { Id = item.ID }, new { @class = "edit" })
<input type="button" value="Assign" id="btnad" />
@Html.ActionLink("Delete", "Index", new { Id = item.ID })
</text>)
));
}
</div>
这是完美的工作 您得到的实际错误是什么？像“无法传递”或“错误来了……但我无法解决”这样模糊的短语根本没有帮助。@novian kristianto:如果这对你有帮助，那就接受为ans。你能再帮我一次吗？
$('.save-user').on('click', function () {
var tr = $(this).parent().parent();
var Nama = tr.find("#Nama").val();
var Umur = tr.find("#Umur").val();
var ID = tr.find("#ID").html();
$.ajax({
url: '@Url.Action("UpdateUser", "Home")',
data: {Id:ID,Name:Name,Umur:Umur},
type: 'Post',
success: function (data) {
alert(data);
}
});
});
<div id="mygrid">
</div>
<div>
@{
var grid = new WebGrid(ViewBag.RegisterItems, rowsPerPage: 15, canPage: true, canSort: true, ajaxUpdateContainerId: "gridContent");
@grid.GetHtml(
tableStyle: "row",
alternatingRowStyle: "alt",
columns: grid.Columns(
grid.Column("Name", header: "User Name"),
grid.Column("Address", header: "Address"),
grid.Column("PhoneNo", header: "Phone No"),
grid.Column("", header: "Actions", format: @<text>
<input type="text" id="name" />
</text>),
grid.Column("", header: "Actions", format: @<text>
@Html.ActionLink("Edit", "Index", new { Id = item.ID }, new { @class = "edit" })
<input type="button" value="Assign" id="btnad" />
@Html.ActionLink("Delete", "Index", new { Id = item.ID })
</text>)
));
}
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#btnad").on("click", function () {
var tr = $(this).parent().parent();
var t = tr.find("#name").val();
$.ajax({
url: '@Url.Action("UpdateUser", "Content")',
type: "Post",
data: { CustomerNameId: t },
dataType: 'json',
success: function (result) {
$("#mygrid").html('');
$("#mygrid").html(result);
}
});
});
});
</script>
public JsonResult UpdateUser(string CustomerNameId)
{
string message = "Success";
return Json(message, JsonRequestBehavior.AllowGet);
}