使用 jscript 和控制器操作使用 MVC ASP.net 将数据添加到数据库

Question

我需要在不刷新视图页面的情况下将数据从我的 MVC ASP.net 项目保存到数据库。为此，我计划创建一个字符串并将其发送到控制器，然后再发送到数据库。我已经创建了一个函数来创建字符串...

function CreateChain() {

        RecordID = document.getElementById("RecordIdTextBox").value
        RecordDate = document.getElementById("RecordDateEntry").value
        Employee = document.getElementById("EmployeeTextBox").value
        Department = document.getElementById("ddlDepartmentsOption").value
        SubDepartment = document.getElementById("ddlSubDepartments").value
        Machine = document.getElementById("ddlMachines").value
        Equipment = document.getElementById("ddlEquipment").value
        Problem = document.getElementById("InvisibleProblemsddl").value
        Grade = document.getElementById("Gradeddl").value
        GradeComment = document.getElementById("GradeComment").value
        WorkOrderStatus = document.getElementById("WorkOrderStatus").value
        WorkOrderNumber = document.getElementById("WorkOrderNumber").value

        chain = ("RecordID:" + RecordID + ',' +
            "RecordDate:"+ RecordDate + ',' +
            "Employee:"+ Employee + ',' +
            "DepartmentID:"+ Department + ',' +
            "SubDepartmentID:"+ SubDepartment + ',' +
            "MachineID:"+ Machine + ',' +
            "EquipmentID:"+ Equipment + ',' +
            "ProblemID:"+ Problem + ',' +
            "Grade:"+ Grade + ',' +
            "GradeComment:"+ GradeComment + ',' +
            "WorkOrderStatus:"+ WorkOrderStatus + ',' +
            "WorkOrderNumber:"+ WorkOrderNumber)
        console.log(chain);

    }

字符串的示例如下所示

RecordID:5,RecordDate:2021-08-02T13:50:46,Employee:Josh,DepartmentID:1,SubDepartmentID:1,MachineID:16,EquipmentID:141,ProblemID:59,Grade:A,GradeComment:the machine is working,WorkOrderStatus:true,WorkOrderNumber:123456

我如何才能 1.) 将此字符串发送到控制器以及 2.) 使用控制器将其发送到我的数据库？

所有数据点都对应于我数据库中的 table RecordEntry，并且与给定的名称相同。

编辑：这是我现在考虑的功能。当运行时，它不会进入警报（链）。你知道为什么吗？另一个被注释掉的警报确实命中了。

编辑：我意识到你在函数中没有 ajax 而我在那里做了。它应该在函数中以便在按下提交按钮时调用它吗？

    function CreateChain() {

        //alert("running function createchain");

        Record = document.getElementById("RecordIdTextBox").value
        RecordDate = document.getElementById("RecordDateEntry").value
        Employee = document.getElementById("EmployeeTextBox").value
        Department = document.getElementById("ddlDepartmentsOption").value
        SubDepartment = document.getElementById("ddlSubDepartments").value
        Machine = document.getElementById("ddlMachines").value
        Equipment = document.getElementById("ddlEquipment").value
        Problem = document.getElementById("InvisibleProblemsddl").value
        Grade = document.getElementById("Gradeddl").value
        GradeComment = document.getElementById("GradeComment").value
        WorkOrderStatus = document.getElementById("WorkOrderStatus").value
        WorkOrderNumber = document.getElementById("WorkOrderNumber").value

        return {
            "RecordID": Record,
            "RecordDate": RecordDate,
            "Employee": Employee,
            "DepartmentID": Department,
            "SubDepartmentID": SubDepartment,
            "MachineID": Machine,
            "EquipmentID": Equipment,
            "ProblemID": Problem,
            "Grade": Grade,
            "GradeComment": GradeComment,
            "WorkOrderStatus": WorkOrderStatus,
            "WorkOrderNumber": WorkOrderNumber
        };
    
        var chain = CreateChain();
        alert(chain);
        $.ajax({

            url: "/RecordEntries/AddtoDatabase",
            type: "POST",

            data: { model: chain },

            success: function (result) {
                alert("Success");
            },
            error: function (xhr, exception) {
                alert("Error");
            }
        });
    }

这是我的提交（下一步）按钮

<a class="btn btn-success btn-block btn-lg " onclick="NextButtonClick()" id="nextbutton"><font color="white">Next</font></a>

并且被调用的函数调用了多个其他函数。

    function NextButtonClick() {

        HideSelectionsBeforeNextSelection();
        ShowDropDownsAgain();
        //removefromList();
        ResetValues();
        IncreaseRecordIdByOne();
        CreateChain();
    }

Answer 1

试试这个

javascript

function CreateChain() {

        //alert("running function createchain");

      var  Record = document.getElementById("RecordIdTextBox").value;
       var  RecordDate = document.getElementById("RecordDateEntry").value;
        ........
var chain= {
            RecordID: Record,
            RecordDate: RecordDate,
           .....
        };
    

        alert( JSON.stringify( chain));
        $.ajax({

            url: "/mycontroller/myaction",
            type: "POST",

            data: { model: chain },

            success: function (result) {
                alert(result);
            },
            error: function (xhr, exception) {
                alert("Error");
            }
        });
    }

服务器端

您必须创建视图模型

public class ChainViewModel
{
 public int RecordID {get; set;}
  public string  RecordDate {get; set;}
   public string  Employee {get;set;}
....and so on
}

控制器

public class MyController :Controller
{

public ActionResult MyAction( ChainViewModel model)
{
    ....use model data to submit to db

    return Ok("Success");
}

}

使用 jscript 和控制器操作使用 MVC ASP.net 将数据添加到数据库

Use jscript and controller actions to add data to database using MVC ASP.net

javascript

c#

sql

asp.net

model-view-controller