AJAX在NET Core MVC中使用Bootstrap模型更新数据时返回变量null

Question

我有一个使用ajax更新客户数据的引导程序模型。但是，即使文本框中有信息，所有变量都返回null。

客户.cs

public class Customer
{
[Display(Name = "ID")]
public int ID { get; set; }
[Display(Name = "Customer ID")]
public string? CID { get; set; }
[Display(Name = "Last Name")]
public string? LastName { get; set; }
[Display(Name = "First Name")]
public string? FirstName { get; set; }
}

存储过程更新

SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE PROCEDURE SP_UPDATE (@ID INTEGER, @CID NVARCHAR(100), @LastName NVARCHAR(100), @FirstName NVARCHAR(100))
AS
BEGIN
UPDATE CUSTOMERDB SET CID = @CID, LastName = @LastName, FirstName = @FirstName WHERE ID = @ID
END
GO

更新无效保存在文件夹Models 中的CustomerDB.cs中

public void UpdateCustomer(Customer ctm)
{
using (SqlConnection con = new SqlConnection(DBcon))
{
SqlCommand cmd = new SqlCommand("SP_UPDATE", con);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@ID", ctm.ID);
cmd.Parameters.AddWithValue("@CID", ctm.CID);
cmd.Parameters.AddWithValue("@LastName", ctm.LastName);
cmd.Parameters.AddWithValue("@FirstName", ctm.FirstName);
con.Open();
cmd.ExecuteNonQuery();
con.Close();
}
}

控制器

public class CustomerController : Controller
{
CustomerDB objCustomer = new CustomerDB();
public IActionResult Index()
{
List<Customer> lstctm = new List<Customer>();
lstctm = objCustomer.GetAllCustomers().ToList();
return View(lstctm);
}
public IActionResult Update(Customer ctmupdate)
{
objCustomer.UpdateCustomer(ctmupdate);
return View();
}
}

Ajax函数

function Update() {  
var res = validate();  
if (res == false) {  
return false;  
}  
var empObj = {  
ID: $('#txtID').val(),
CID: $('#txtCID').val(),
LastName: $('#txtLastName').val(),
FirstName: $('#txtFirstName').val(),
};  
$.ajax({  
url: "/Customer/Update",  
data: JSON.stringify(empObj),  
type: "POST",  
contentType: "application/json;charset=utf-8",  
dataType: "json",  
success: function (result) { 
$('#txtCID').val("");  
$('#txtLastName').val("");  
$('#txtFirstName').val("");  
},  
error: function (errormessage) {  
alert(errormessage.responseText);  
}  
});
}
function validate() {
var isValid = true;
if ($('#txtCID').val().trim() == "") {
$('#txtCID').css('border-color', 'Red');
isValid = false;
}
else {
$('#txtCID').css('border-color', 'lightgrey');
}
if ($('#txtLastName').val().trim() == "") {
$('#txtLastName').css('border-color', 'Red');
isValid = false;
}
else {
$('#txtLastName').css('border-color', 'lightgrey');
}
if ($('#txtFirstName').val().trim() == "") {
$('#txtFirstName').css('border-color', 'Red');
isValid = false;
}
else {
$('#txtFirstName').css('border-color', 'lightgrey');
}
return isValid;
}

引导模式

<div class="modal fade" id="EditModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="model-header">
<h5 class="modal-title" id="editModalLable">Edit Customer</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="txtID">ID</label>
<input type="text" class="form-control" id="txtID" name="ID" />
</div>
<div class="form-group">
<label for="txtCID">Customer ID</label>
<input type="text" class="form-control" id="txtCID" name="Customer ID" />
</div>
<div class="form-group">
<label for="txtLastName">Last Name</label>
<input type="text" class="form-control" id="txtLastName" name="Last Name" />
</div>
<div class="form-group">
<label for="txtFirstName">First Name</label>
<input type="text" class="form-control" id="txtFirstName" name="First Name" />
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" onclick="Update();">Update</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>    
</div>

ID是由SQL Server自动递增的自动递增主键。列ID将被隐藏。

Answer 1

首先尝试这个：

[HttpPost]
public IActionResult Update(Customer ctmupdate)
{
objCustomer.UpdateCustomer(ctmupdate);
//return View(); dont return view on ajax calls if you expect json or the another data!
return Json(""); // or some data
}

第二，如果这不起作用，试试这个，而不推翻我的第一个建议：

$.ajax({  
url: "/Customer/Update",  
data: empObj,  // i changed this line
type: "POST",  
//contentType: "application/json;charset=utf-8",  
//dataType: "json",  
success: function (result) { 
$('#txtCID').val("");  
$('#txtLastName').val("");  
$('#txtFirstName').val("");  
},  
error: function (errormessage) {  
alert(errormessage.responseText);  
}  
});

希望这能有所帮助。

编辑：我更改并测试了您共享的代码，我意识到您发送的是数据类型json，实际上您不需要它，因为.net在不使用json类型的情况下自动检测它和绑定属性。

另一点是，如果您使用ajax发送数据，那么您的代码中可能不需要表单标记，除非您序列化它并防止默认事件。

它现在必须与我的变化一起工作，我在我的本地测试了它。