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

Posted 2023-04-12

【中文标题】使用 jscript 和控制器操作将数据添加到使用 MVC ASP.net 的数据库

【英文标题】：Use jscript and controller actions to add data to database using MVC ASP.net

【发布时间】：2021-10-08 02:35:17

【问题描述】：

我需要将数据从我的 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.) 使用控制器将其发送到我的数据库？

所有数据点都对应我数据库中的表 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();
    

【问题讨论】：

您可以使用 JS "ajax" 调用发布表单...无需构建字符串。您的控制器会将表单数据绑定到控制器中的模型/类。 （我返回 JSON 以告诉 JS 在数据库更新完成后将什么加载到 DOM 中......在我的情况下，它是一个剃须刀页面减去布局内容）

有趣。我对此很陌生，并没有意识到可以做到这一点。您有可以分享的示例 ajax 函数吗？

您在网络、控制器和 json 的基础知识方面存在一些问题，我建议您阅读控制器工作原理的基础知识，因为您可以在您的设备上发送具有相同架构的 Json 对象控制器，它将自动投射到服务器上，然后您可以通过 fetch、jquery 或通过 javascript 的 httprequest 发送对象

我对网络、控制器和 json 的工作方式有相当的了解。我意识到我可以让我的字符串格式更好地作为 json 处理。我也意识到我可以向控制器发送一个 json。我只是不知道如何在控制器内部处理它。是否有一个简单的操作可以将 json 处理到数据库中？

您可以序列化标准表单数据：jQuery 示例：formresult = $('#' + formID).serialize() +'&otherparam=' + otherparam; $.post(destURL, formresult, function (data) .... )... 如果您要上传文件，只需使用 formdata： var formData = new FormData(thisForm);和 jQuery.ajax( 类型: 'POST', url: destURL, data: formData, ... , error: function (jqXHR, textStatus, error) .... );

【参考方案1】：

试试这个

javasript

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");

【讨论】：

@Three33Steele 你应该添加另一个 - return ....... "WorkOrderNumber": WorkOrderNumber ; 或者如果您只想使用一个功能，请查看我更新的答案

那么我需要在提交按钮按下时调用该 ajax 函数吗？

请出示您的提交按钮。您可以将其分成 2 个功能或作为一个功能使用。这取决于你

@Three33Steele 你已经得到了第一个问题的答案。正如我之前告诉你的——一个问题，一个答案。如果您在将数据保存到数据库时遇到问题，则必须发布另一个问题，答案应该非常大。