Leverage jscript and controller actions in MVC ASP.net to effectively insert new data into the database

Question

Leverage jscript and controller actions in MVC ASP.net to effectively insert new data into the database

I am looking to store data in a database from my MVC ASP.net project without the need to refresh the view page. My approach involves creating a string, sending it to the controller, and then pushing it to the database. I have already developed a function for string creation...

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

    }

An example of the resulting string is as follows:

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

To accomplish this task, I would like to know how to 1.) Transfer this string to the controller and 2.) Utilize the controller to integrate this into my database?

All the data points align with the table "RecordEntry" in my database and have been named accordingly.

EDIT: I have incorporated this function in the view now. However, when executed, it does not proceed beyond the alert(chain) statement. Do you have any insights into why this may be happening? The other commented-out alert does respond.

EDIT: It just dawned on me that there was no AJAX call within the function but I had placed it outside. Is it essential to include it within the function so that it gets invoked upon pressing a submit button?

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

This is the submit (next) button used:

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

Furthermore, here is the function called by the button which in turn triggers multiple other functions:

    function NextButtonClick() {

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

javascript c#sql asp.net model-view-controller

Answer 1

Answer №1

Give this a try!

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

Server-side:

Create the ViewModel:

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

Controller:

public class MyController :Controller
{

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

    return Ok("Success");
}

}

Answer 2

Give this a try!

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

Server-side:

Create the ViewModel:

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

Controller:

public class MyController :Controller
{

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

    return Ok("Success");
}

}

Leverage jscript and controller actions in MVC ASP.net to effectively insert new data into the database

Answer №1

Similar questions

Encountered an error when attempting to submit with Node.js and Express.js connected to MySql - "Cannot POST /login

Capture every incoming request with various HTTP methods using nock

How come I'm getting a numerical output instead of an array after using the array.push() method in this code?

The medium-zoom feature is currently experiencing issues with functionality within Angular version 13

You can easily dismiss the modal by clicking on any part of the screen, not just the button

What benefits can be gained from utilizing the beforeEach function within Jest testing?

Creating a stylish button using a combination of CSS and Javascript classes within a webpage layout

Direct a flow to an unknown destination

403 Malicious Path Middleware Error in Express.js

The useNavigate() hook from react-router-dom is not properly setting the id in the URL path

Creating a comprehensive Product List using ASP.net C#

Encountering the "Cannot set headers after they are sent to the client" error within an Express.js application

Navigating the nuances of working with nullable and non-nullable types using generics

Is it possible for two distinct devices to generate the same HWID using Pushwoosh Cordova API?

Error message: "Unable to locate jQuery file within the node.js + Express application running on Heroku platform."

A step-by-step guide to thoroughly examining the form status in a React application, allowing for the activation of a previously disabled submit button

Angular makes it easy to perform HTTP requests using the `http

Extract the source URLs of all images from a website by utilizing Selenium WebDriver

Using embedded js files in jQuery's .load() function does not function properly

Tips for retrieving data using ajax with servlets: