控制器不会被 jquery ajax 击中:asp.net mvc 5
controller doesn't get hit by jquery ajax : asp.net mvc 5
我有下面的表格
<form class="regForm" id="frmRegistration" method="post">
<h3>Register Customer Patient</h3>
@Html.ValidationSummary(true)
@Html.LabelFor(m => m.LastName)
@Html.TextBoxFor(m => m.LastName, new { @class = "form-control cfield", required = "required", autofocus = "autofocus" })
@Html.LabelFor(m => m.FirstName)
@Html.TextBoxFor(m => m.FirstName, new { @class = "form-control cfield", required = "required" })
@Html.LabelFor(m => m.MiddleName)
@Html.TextBoxFor(m => m.MiddleName, new { @class = "form-control cfield", required = "required" })
@Html.LabelFor(m => m.BirthDate)
@Html.TextBoxFor(m => m.BirthDate, new { @class = "form-control cfield", required = "required" })
@Html.LabelFor(m => m.Address)
@Html.TextBoxFor(m => m.Address, new { @class = "form-control cfield", required = "required" })
<button type="submit" id="btnSave" class="btnreg btn btn-primary form-control">REGISTER</button>
<button type="button" onclick="clearTexts();" class="btnClear btn btn-danger form-control">CLEAR</button>
下面是我想要的控制器动作方法trigger/call
[HttpPost]
public ActionResult AddCustomerPatient(Customer _Customer)
{
using (var db = new DCDBEntities())
{
db.Customers.Add(_Customer);
db.SaveChanges();
}
return Json(new {registeredCustomer="ok"});
}
下面是我的 jquery ajax,它不起作用
$("#btnSave").click(function () {
e.preventDefault();
var PotentialCustomer = {
"LastName": 'A',
"FirstName": 'A',
"MiddleName": 'A',
"BirthDate": 'A',
"Address": 'A'
};
$.ajax({
type: 'POST',
url: '/Registration/AddCustomerPatient',
data: 'JSON.stringify(PotentialCustomer),',
contentType: "application/json; charset=utf-8",
dataType: 'json',
success: function (response) {
alert("Successfully Registered Customer/Patient!");
}
});
});
问题 1.) 控制器操作方法未命中(我放置了一个断点)
问题 2.) 如何将模型传递给控制器操作方法并通过 linq 将其保存到实体。
我一直在寻找并尝试了很多,但仍然无法完成。
下面是路由配置
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
我试图在我的控制器的 GET 或第一个方法中放置一个断点,每当我单击 "REGISTER" 按钮时它都会被击中,而不是 [HttpPost],这是为什么?
public ActionResult RegisterCustomerPatient()
{
return View();
}
[HttpPost]
public ActionResult AddCustomerPatient(Customer _Customer)
{
using (var db = new DCDBEntities())
{
db.Customers.Add(_Customer);
db.SaveChanges();
}
return Json(new {registeredCustomer="ok"});
}
我需要为 HTTPPOST 操作方法创建视图吗?
你的ajax请求应该是这样的
$("#btnSave").click(function (e) { //added e
e.preventDefault();
var _Customer= { //changed the name to name of parameter of action
"LastName": $("#LastName").val(),
"FirstName": $("#FirstName").val(),
"MiddleName": $("#MiddleName").val(),
"BirthDate": $("#BirthDate").val(),
"Address": $("#Address").val()
};
$.ajax({
type: 'POST',
url: '/Registration/AddCustomerPatient',
data: JSON.stringify(_Customer), //removed '' and corrected the format
contentType: "application/json; charset=utf-8",
dataType: 'json',
success: function (response) {
alert("Successfully Registered Customer/Patient!");
}
});
});
JSON.stringify
是一个函数,所以它不应该放在 ''
和 JSON.stringify(_Customer)
中,对象名称应该匹配 Action 的参数名称,即 Customer _Customer
您使用了 e.preventDefault();
而没有在参数
中添加 e
var formData = $('#frmRegistration').serialize();
$.ajax({
type: 'POST',
url: '@Url.Action("AddCustomerPatient", "Registration")',
data: formData,
success: function (response) {
alert("Successfully Registered Customer/Patient!");
}
});
最好序列化表单数据并将其发送到控制器操作方法
问题是行
data: 'JSON.stringify(PotentialCustomer),',
和
click(function () {
// e is undefined here. Add e as parameter in function.
e.preventDefault();
JSON.stringify 应该用作函数而不是字符串。在上面它被用作字符串。改成如下(假设模型中所有字段都是字符串)
$("#btnSave").click(function (e) {
e.preventDefault();
var PotentialCustomer = {
"LastName": 'A',
"FirstName": 'A',
"MiddleName": 'A',
"BirthDate": 'A',
"Address": 'A'
};
$.ajax({
type: 'POST',
url: '/Registration/AddCustomerPatient',
data: JSON.stringify(PotentialCustomer),
contentType: "application/json; charset=utf-8",
dataType: 'json',
success: function (response) {
alert("Successfully Registered Customer/Patient!");
}
});
数据:'JSON.stringify(PotentialCustomer),'
请删除单引号。
没事的
数据:JSON.stringify(潜在客户),
有一个,里面的数据
数据:'JSON.stringify(PotentialCustomer),',
下一个我不确定,但请尝试
数据:{'_客户':'PotentialCustomer'};
而不是 data.strinify
问题 1.) 控制器操作方法未被命中
我认为是ajaxpost的错误URL造成的。您可以尝试在浏览器上打开 Developer Tool 的 Network 选项卡以确认这一点。如果你 ajax post return HTTP 状态 404,你应该更新 ajax post.
的 URL
获得正确 URL 的一种方法是使用 @Url.Action 添加提交按钮的 URL 属性。
<button type='button' id='btnSave' data-url='@Url.Action("AddCustomerPatient", "Registration")' class='btnreg btn btn-primary form-control'>REGISTER</button>
然后你可以像这样在点击函数中获取这个值
$("#btnSave").data('url')
问题 2.) 如何将模型传递给控制器操作方法并通过 linq 将其保存到实体。
正确后URL,你应该更新你的点击函数
$("#btnSave").click(function () {
var formData = $('#frmRegistration').serialize();
$.ajax({
type: 'POST',
url: $("#btnSave").data('url'),
data: formData,
success: function (response) {
alert("Successfully Registered Customer/Patient!");
}
});
});
替代方法
我猜你想做一个 ajax post 而不是提交表单,所以你可以尝试下面的另一种简单方法。
剃须刀代码
@using (Html.BeginForm("AddCustomerPatient", "Registration", FormMethod.Post, new { id = "frmRegistration"))
{
...
<button type="submit" id="btnSave" class="btnreg btn btn-primary form-control">REGISTER</button>
<button type="button" onclick="clearTexts();" class="btnClear btn btn-danger form-control">CLEAR</button>
}
脚本
$(function () {
$("#frmRegistration").on('submit', function (e) {
e.preventDefault(); // prevent the form's normal submission
var $form = $(this);
var dataToPost = $form.serialize();
$.post($form.attr('action'), dataToPost)
.done(function(response, status, jqxhr){
// this is the "success" callback
})
.fail(function(jqxhr, status, error){
// this is the ""error"" callback
});
})
})
我有下面的表格
<form class="regForm" id="frmRegistration" method="post">
<h3>Register Customer Patient</h3>
@Html.ValidationSummary(true)
@Html.LabelFor(m => m.LastName)
@Html.TextBoxFor(m => m.LastName, new { @class = "form-control cfield", required = "required", autofocus = "autofocus" })
@Html.LabelFor(m => m.FirstName)
@Html.TextBoxFor(m => m.FirstName, new { @class = "form-control cfield", required = "required" })
@Html.LabelFor(m => m.MiddleName)
@Html.TextBoxFor(m => m.MiddleName, new { @class = "form-control cfield", required = "required" })
@Html.LabelFor(m => m.BirthDate)
@Html.TextBoxFor(m => m.BirthDate, new { @class = "form-control cfield", required = "required" })
@Html.LabelFor(m => m.Address)
@Html.TextBoxFor(m => m.Address, new { @class = "form-control cfield", required = "required" })
<button type="submit" id="btnSave" class="btnreg btn btn-primary form-control">REGISTER</button>
<button type="button" onclick="clearTexts();" class="btnClear btn btn-danger form-control">CLEAR</button>
下面是我想要的控制器动作方法trigger/call
[HttpPost]
public ActionResult AddCustomerPatient(Customer _Customer)
{
using (var db = new DCDBEntities())
{
db.Customers.Add(_Customer);
db.SaveChanges();
}
return Json(new {registeredCustomer="ok"});
}
下面是我的 jquery ajax,它不起作用
$("#btnSave").click(function () {
e.preventDefault();
var PotentialCustomer = {
"LastName": 'A',
"FirstName": 'A',
"MiddleName": 'A',
"BirthDate": 'A',
"Address": 'A'
};
$.ajax({
type: 'POST',
url: '/Registration/AddCustomerPatient',
data: 'JSON.stringify(PotentialCustomer),',
contentType: "application/json; charset=utf-8",
dataType: 'json',
success: function (response) {
alert("Successfully Registered Customer/Patient!");
}
});
});
问题 1.) 控制器操作方法未命中(我放置了一个断点)
问题 2.) 如何将模型传递给控制器操作方法并通过 linq 将其保存到实体。
我一直在寻找并尝试了很多,但仍然无法完成。
下面是路由配置
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
我试图在我的控制器的 GET 或第一个方法中放置一个断点,每当我单击 "REGISTER" 按钮时它都会被击中,而不是 [HttpPost],这是为什么?
public ActionResult RegisterCustomerPatient()
{
return View();
}
[HttpPost]
public ActionResult AddCustomerPatient(Customer _Customer)
{
using (var db = new DCDBEntities())
{
db.Customers.Add(_Customer);
db.SaveChanges();
}
return Json(new {registeredCustomer="ok"});
}
我需要为 HTTPPOST 操作方法创建视图吗?
你的ajax请求应该是这样的
$("#btnSave").click(function (e) { //added e
e.preventDefault();
var _Customer= { //changed the name to name of parameter of action
"LastName": $("#LastName").val(),
"FirstName": $("#FirstName").val(),
"MiddleName": $("#MiddleName").val(),
"BirthDate": $("#BirthDate").val(),
"Address": $("#Address").val()
};
$.ajax({
type: 'POST',
url: '/Registration/AddCustomerPatient',
data: JSON.stringify(_Customer), //removed '' and corrected the format
contentType: "application/json; charset=utf-8",
dataType: 'json',
success: function (response) {
alert("Successfully Registered Customer/Patient!");
}
});
});
JSON.stringify
是一个函数,所以它不应该放在 ''
和 JSON.stringify(_Customer)
中,对象名称应该匹配 Action 的参数名称,即 Customer _Customer
您使用了 e.preventDefault();
而没有在参数
e
var formData = $('#frmRegistration').serialize();
$.ajax({
type: 'POST',
url: '@Url.Action("AddCustomerPatient", "Registration")',
data: formData,
success: function (response) {
alert("Successfully Registered Customer/Patient!");
}
});
最好序列化表单数据并将其发送到控制器操作方法
问题是行
data: 'JSON.stringify(PotentialCustomer),',
和
click(function () {
// e is undefined here. Add e as parameter in function.
e.preventDefault();
JSON.stringify 应该用作函数而不是字符串。在上面它被用作字符串。改成如下(假设模型中所有字段都是字符串)
$("#btnSave").click(function (e) {
e.preventDefault();
var PotentialCustomer = {
"LastName": 'A',
"FirstName": 'A',
"MiddleName": 'A',
"BirthDate": 'A',
"Address": 'A'
};
$.ajax({
type: 'POST',
url: '/Registration/AddCustomerPatient',
data: JSON.stringify(PotentialCustomer),
contentType: "application/json; charset=utf-8",
dataType: 'json',
success: function (response) {
alert("Successfully Registered Customer/Patient!");
}
});
数据:'JSON.stringify(PotentialCustomer),'
请删除单引号。 没事的 数据:JSON.stringify(潜在客户),
有一个,里面的数据
数据:'JSON.stringify(PotentialCustomer),',
下一个我不确定,但请尝试
数据:{'_客户':'PotentialCustomer'}; 而不是 data.strinify
问题 1.) 控制器操作方法未被命中
我认为是ajaxpost的错误URL造成的。您可以尝试在浏览器上打开 Developer Tool 的 Network 选项卡以确认这一点。如果你 ajax post return HTTP 状态 404,你应该更新 ajax post.
的 URL
获得正确 URL 的一种方法是使用 @Url.Action 添加提交按钮的 URL 属性。
<button type='button' id='btnSave' data-url='@Url.Action("AddCustomerPatient", "Registration")' class='btnreg btn btn-primary form-control'>REGISTER</button>
然后你可以像这样在点击函数中获取这个值
$("#btnSave").data('url')
问题 2.) 如何将模型传递给控制器操作方法并通过 linq 将其保存到实体。
正确后URL,你应该更新你的点击函数
$("#btnSave").click(function () {
var formData = $('#frmRegistration').serialize();
$.ajax({
type: 'POST',
url: $("#btnSave").data('url'),
data: formData,
success: function (response) {
alert("Successfully Registered Customer/Patient!");
}
});
});
替代方法
我猜你想做一个 ajax post 而不是提交表单,所以你可以尝试下面的另一种简单方法。
剃须刀代码
@using (Html.BeginForm("AddCustomerPatient", "Registration", FormMethod.Post, new { id = "frmRegistration"))
{
...
<button type="submit" id="btnSave" class="btnreg btn btn-primary form-control">REGISTER</button>
<button type="button" onclick="clearTexts();" class="btnClear btn btn-danger form-control">CLEAR</button>
}
脚本
$(function () {
$("#frmRegistration").on('submit', function (e) {
e.preventDefault(); // prevent the form's normal submission
var $form = $(this);
var dataToPost = $form.serialize();
$.post($form.attr('action'), dataToPost)
.done(function(response, status, jqxhr){
// this is the "success" callback
})
.fail(function(jqxhr, status, error){
// this is the ""error"" callback
});
})
})