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

【问题标题】：AJAX returns variables null when updating data using Bootstrap Model in NET Core MVC在 NET Core MVC 中使用 Bootstrap 模型更新数据时，AJAX 返回变量 null
【发布时间】：2022-10-05 02:25:31
【问题描述】：

我有一个使用 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

更新 void 保存在 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();
    }
}

阿贾克斯函数

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 将被隐藏。

你可以在c#中发布客户的代码吗？
还发布存储过程 SP_UPDATE...
@DA 我刚刚在上面更新了它们。
您是否在使用 ajax 发送之前将 empObj 记录到控制台。我不明白发布后控制器上的字段在哪里或其他地方是空的？如果情况是控制器，我会提出一些建议。

标签： c# ajax .net-core model-view-controller bootstrap-modal

【解决方案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: {ctmupdate: 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);  
    }  
});

您还可以使用：

data: {ctmupdate: JSON.stringify(empObj)},

希望这可以帮助。

【讨论】：

感谢您的建议，但仍然无法正常工作。