控制器里的方法叫EditTbMenuInfo,调用成功后,执行return Content("ok");返回调用OnSuccess。
但是实际上,没有调用OnSuccess,而是跳转到另外一个页面https://localhost:44342/TbMenu/EditTbMenuInfo,见下图
你的js脚本有问题,看下控制台是不是报错了,导致直接跳转到EditTbMenuInfo去了。或者用的表单提交,没有阻止表单提交导致直接跑action去了。有帮助麻烦点个采纳【本回答右上角】,谢谢~~有其他问题可以继续交流~
.Net mvc ajax要结合客户端类库,jquery,jquery.validate.min.js,jquery.validate.unobtrusive.min.js,jquery.unobtrusive-ajax.min.js这4个类库都需要导入。
jquery是必须要导入的,而且在第一位置导入
jquery.validate.min.js,jquery.validate.unobtrusive.min.js是验证数据有效性的,根据System.ComponentModel.DataAnnotations定义的进行验证,如果不需要验证数据这2个库可以不导入,导入的话顺序要对,先jquery.validate.min.js再到jquery.validate.unobtrusive.min.js,要不出错也会无法验证
jquery.unobtrusive-ajax.min.js,这个是ajax操作要用到的,用到ajax功能要导入
顺序反了
我这里测试没有问题的,你的类库应该没导入正确,jquery也要导入,而且顺序不能反了。
test.cshtml
@{
Layout = null;
}
<div id="editDiv">
@using (Ajax.BeginForm("Test", "Home", new { }, new AjaxOptions() { HttpMethod = "post", OnSuccess = "afterEdit",OnFailure= "OnFailure" }, new { id = "editForm" }))
{
<input type="hidden" name="CreateTime" id="txtCreateTime" />
<input type="hidden" name="CreateBy" id="txtCreateBy" />
<table>
<tr><td>序号</td><td><input type="text" name="Id" id="txtId" /></td></tr>
<tr><td>编号</td><td><input type="text" name="Code" id="txtCode" /></td></tr>
<tr><td>姓名</td><td><input type="text" name="Name" id="txtName" /></td></tr>
<tr><td>链接地址</td><td><input type="text" name="LinkAddress" id="txtLinkAddress" /></td></tr>
</table>
<input type="submit" />
}
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script>
function afterEdit() { console.log(arguments) }
function OnFailure() { console.log('error',arguments) }
</script>
public ActionResult test()
{
return View();
}
[HttpPost]
public ActionResult test(string id,string code)
{
return Content(DateTime.Now.ToString());
}
控制器方法上需要加个注解@ResponseBody
将结果以json格式返回
mvc中需要return json才能给ajax得到json.否则是返回的视图。
在控制器里面使用@ResponseBody注解,返回一个Map对象,前端接收就可以了。
首先你的返回数据可能有问题,数据不是json格式的,如果你使用resutful风格的内置转换数据格式,但是如果只是SpringMVC的话,你需要在发送数据的方法上面添加这个注解才可以 @ResponseBody, 比如返回类型为对象类型,那么方法里return 对象;就可以了,还有ajax是异步通知,局部刷新,他的作用就是接受和发送后端的数据,接受后端的json数据后进行下一步操作,刷新跳转都是需要自己使用js进行操作
ajax是不会跳转的,你贴下你的代码看下那里写的有问题
cshtml代码
<div id="editDiv">
@using (Ajax.BeginForm("EditTbMenuInfo", "TbMenu", new { }, new AjaxOptions()
{ HttpMethod = "post", OnSuccess = "afterEdit" }, new { id = "editForm" }))
{
<input type="hidden" name="CreateTime" id="txtCreateTime" />
<input type="hidden" name="CreateBy" id="txtCreateBy" />
<table>
<tr><td>序号</td><td><input type="text" name="Id" id="txtId"/></td></tr>
<tr><td>编号</td><td><input type="text" name="Code" id="txtCode"/></td></tr>
<tr><td>姓名</td><td><input type="text" name="Name" id="txtName"/></td></tr>
<tr><td>链接地址</td><td><input type="text" name="LinkAddress" id="txtLinkAddress"/></td></tr>
</table>
}
</div>
控制器代码
#region 编辑数据
public ActionResult EditTbMenuInfo(tbMenu tb)
{
tb.UpdateBy = "吴晓明";
tb.UpdateTime = DateTime.Now;
if (tbMenuService.EditEntiry(tb))
{
return Content("ok");
}
else
{
return Content("no");
}
}
#endregion
前端代码贴出来看看,估计是自动提交了表单之类的
https://www.cnblogs.com/chao2014/p/4504025.html
尽量手写ajax请求吧,这个自带的ajax提交 不是很好用.
//编辑数据
function editRow() {
var rows = $('#tb').datagrid('getSelections');
if (rows.length != 1) {
$.messager.alert("提醒", "请选择要编辑的记录!", "error");
return;
}
$.post("/TbMenu/GetTbMenuInfoModel", { "id": rows[0].Id }, function (data) {
if (data.msg == "ok") {
$("#txtId").val(data.result.Id);
$("#txtName").val(data.result.Name);
$("#txtCode").val(data.result.Code);
$("#txtLinkAddress").val(data.result.LinkAddress);
$("#txtCreateTime").val(ChangeDateTimeFormat(data.result.CreateTime));
$("#txtCreateBy").val(data.result.CreateBy);
$('#editDiv').dialog({
title: "编辑",
width: 300,
height: 200,
resizable: true,
modal: true,
iconCls: 'icon-edit',
collapsible: true,
buttons: [{
text: '确定',
iconCls: 'icon-ok',
handler: function () {
// 提交表单
$("#editForm").submit();
}
}, {
text: '取消',
handler: function () {
$('#editDiv').dialog('close');
}
}]
});
} else {
$.messager.alert("提醒", "编辑数据失败!", "error");
}
});
}