How to insert data to table on SQL server using jQuery on blazor server side?

Question

How to insert data to table on SQL server using jQuery on blazor server side?

Ahmed Salah Abed Elaziz 390

I work on blazor server side .I face issue I can't apply jQuery to insert data to SQL server database table owner .

after apply script and check table SQL server no rows inserted

so my issue jQuery not insert data

my code as below :

1 - I create JS file insertdata.js on wwwroot folder js folder and add following code :

function insertData(owner) {
                $.ajax({
                    type: 'POST',
                    url: '/api/Owner/AddOwnerFile',
                    data: JSON.stringify(owner),
                    contentType: 'application/json',
                    success: function () {
                        alert('Data inserted successfully!');
                    },
                    error: function () {
                        alert('Error inserting data!');
                    }
                });
            }

2 - web API will executed by jQuery as below

[HttpPost]
        public ActionResult AddOwnerFile(object owner)
        {
            var ownerDict = JsonConvert.DeserializeObject<Dictionary<string, object>>(owner.ToString());
           
               string ownerfileno = ownerDict["employeeID"].ToString();
            
            
           
              string departementCode = ownerDict["departementCode"].ToString();
            
            
           

            var sql = "INSERT INTO Owner (OwnerFileNo, DepartementCode) VALUES ({0}, {1})";
            var rowsAffected = _context.Database.ExecuteSqlRaw(sql, ownerfileno, departementCode);

            return Ok();
         
        }

3 - on razor page I invoke function as below :

public async Task InsertData(EmployeeDetails owner)
    {
        await JS.InvokeAsync<object>("insertData", owner);
    }

4 - on _Host file my scripts file as below :

<head>
   
<script src="~/js/jquery-3.6.3.js"></script>

</head>
<body>
  
 <component type="typeof(App)" render-mode="ServerPrerendered" />

 <script src="~/assets/js/insertdata.js"></script>
 <script src="_framework/blazor.server.js"></script>


</body>
</html>

5-on html and related function insert as below :

  <span class="text-sm mb-0 text-capitalize font-weight-bold">Owner File No</span>
                                            &nbsp&nbsp
                                            <div class="autocomplete w-25">
                                                <input id="autocomp" @bind=selectedEmployeeId @oninput=HandleInput class="form-control filter" style=" width:200px;" />
                                                @if (emp is not null)
                                                {
                                                    <ul class="options">
                                                        @if (emp.Any())
                                                        {
                                                            @foreach (var em in emp)
                                                            {
                                                                <li class="option" @onclick=@(_ => Selectemp(em.employeeID))>
                                                                    <span class="option-text">@em.employeeID</span>
                                                                </li>
                                                            }
                                                        }
                                                        else
                                                        {
                                                            <li class="disabled option">No results</li>
                                                        }
                                                    </ul>
                                                }
                                            </div>
                                        </div>
                                    </div>
                                 
                                   
                                  
                                   
                                       
                                            <span class="text-sm mb-0 text-capitalize font-weight-bold" style="width:160px;">Department Code</span>
                                            &nbsp&nbsp
                                            <input type="text" class="form-control" @bind="@emddata.departementCode" />
                                    
                                
                                   
                                </div>
                         

@code
{
 public class EmployeeDetails
    {
        public int employeeID { get; set; }
        public string departementCode { get; set; }

    }
public EmployeeDetails emddata = new EmployeeDetails();
async Task  Selectemp(string id)
    {
        selectedEmployeeId = id;
        selectedEmployeeId = emp!.First(c => c.employeeID.Equals(selectedEmployeeId)).employeeID;
        appsdata.OwnerFileNo = selectedEmployeeId;
        InsertData(emddata);
          
}

Zularnain Jabbar 0 Reputation points

2023-03-26T03:48:52.96+00:00

To insert data into a SQL Server table using jQuery on Blazor server-side, you can use AJAX to send a request to the server and perform the SQL Server insert operation. Here are the steps you can follow:

Add a reference to jQuery in your Blazor application. You can do this by adding the following script tag to the head section of your _Host.cshtml file: html

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> Create a server-side method that inserts data into the SQL Server table. You can do this by defining a C# method in your Blazor component that performs the SQL Server insert operation. You can then call this method from your jQuery code using AJAX. csharp Copy code public async Task InsertData(string name, string email) { using (SqlConnection connection = new SqlConnection(connectionString)) { string query = "INSERT INTO MyTable (Name, Email) VALUES (@Name, @Email)"; using (SqlCommand command = new SqlCommand(query, connection)) { command.Parameters.AddWithValue("@Name", name); command.Parameters.AddWithValue("@Email", email); await connection.OpenAsync(); await command.ExecuteNonQueryAsync(); } } } In your Blazor component, create a form that collects the data you want to insert into the SQL Server table. You can then use jQuery to send an AJAX request to the server-side method you created in step 2. html Copy code <form> <div> <label for="name">Name:</label> <input type="text" id="name" name="name" /> </div> <div> <label for="email">Email:</label> <input type="email" id="email" name="email" /> </div> <button type="button" onclick="insertData()">Submit</button> </form>

<script> function insertData() { var name = $("#name").val(); var email = $("#email").val(); $.ajax({ type: "POST", url: "/MyComponent/InsertData", data: { name: name, email: email }, success: function () { alert("Data inserted successfully!"); }, error: function (xhr, status, error) { console.log(error); } }); } </script>

In the code above, the insertData() function is called when the Submit button is clicked. This function collects the data entered into the form and sends an AJAX request to the InsertData() method on the server-side. If the insert operation is successful, an alert is displayed. If there is an error, the error is logged to the console.

Note: This is just an example, and you should modify the code to suit your specific needs. Also, make sure to handle user input validation and protect against SQL injection attacks.

**Source : www.jackpotwala.in/ **
SurferOnWww 6,016 Reputation points

2023-03-26T07:08:05.8833333+00:00

Which do you use, Blazor Server or Blazor WASM?
AgaveJoe 31,361 Reputation points

2023-03-26T11:02:49.34+00:00
The main reason for writing applications using the Blazor framework is ability to develop application completely in C# without the need for JavaScript. Read any Blazor overview.

ASP.NET Core Blazor

Blazor is a framework for building interactive client-side web UI with .NET:

Create rich interactive UIs using C# instead of [JavaScript].

Rather than AJAX use HttpClient to send HTTP requests in from the server. See any beginning level tutorial and/or the FetchData.razor page in the standard Blazor template for an HttpClient example.

Build a Blazor todo list app

The other problem with your design is you are by-passing the Blazor page update. The DOM will get out of sync.

One more issue with your design is the Web API AddOwnerFile() method takes an object which is then converted to a string. There are so many issues with this design. First, you're converting an object to a string. Why not just use a string? Secondly, if the payload is a string, that means the payload is serialized twice. Why not just implement Web API as intended and take advantage of model binding? Again, see any beginning level tutorial.

I feel it is important to mention that you've been given this advice several times but for some unknown reason you ignore the community's advice and ask the same questions.

2 answers

Your answer

SurferOnWww 6,016 Reputation points

2023-03-26T07:08:05.8833333+00:00

Which do you use, Blazor Server or Blazor WASM?
AgaveJoe 31,361 Reputation points

2023-03-26T11:02:49.34+00:00

The main reason for writing applications using the Blazor framework is ability to develop application completely in C# without the need for JavaScript. Read any Blazor overview.

ASP.NET Core Blazor

Blazor is a framework for building interactive client-side web UI with .NET:

Create rich interactive UIs using C# instead of [JavaScript].

Rather than AJAX use HttpClient to send HTTP requests in from the server. See any beginning level tutorial and/or the FetchData.razor page in the standard Blazor template for an HttpClient example.

Build a Blazor todo list app

The other problem with your design is you are by-passing the Blazor page update. The DOM will get out of sync.

One more issue with your design is the Web API AddOwnerFile() method takes an object which is then converted to a string. There are so many issues with this design. First, you're converting an object to a string. Why not just use a string? Secondly, if the payload is a string, that means the payload is serialized twice. Why not just implement Web API as intended and take advantage of model binding? Again, see any beginning level tutorial.

I feel it is important to mention that you've been given this advice several times but for some unknown reason you ignore the community's advice and ask the same questions.

Answer 1

Bruce (SqlWork.com) 84,086

your design makes no sense.

blazor server is a server technology. currently the browser is sending an event to the server over signal/r, the you server code is send in a message to the browser, then the browser is making an ajax call back to the server.

your webapi code is invalid, see above. the serializarion is invalid, and not actually should not be there anyway. the parameter should be the correct type.

you should not use jquery with blazor projects (WASM or Server).

the razor page event should just update the database.

0 comments

Answer 2

Hey Ahmed,

Based on the provided code, I can see a few potential issues that might be causing the data not to be inserted into the SQL Server database.

Database Context (_context): Ensure that the _context variable in your Web API (AddOwnerFile) is properly initialized and configured to connect to the correct database. Check that the _context is not null and that it's properly configured to perform the database operation.

JSON Serialization: In the Web API AddOwnerFile method, you are deserializing the owner object using JsonConvert.DeserializeObject, but you are not specifying the correct type for deserialization. Instead of using Dictionary<string, object>, create a class representing the data structure for the owner object:

//csharp

public class OwnerData { public string EmployeeID { get; set; } public string DepartementCode { get; set; } } Then, use this class for deserialization:

//csharp

[HttpPost] public ActionResult AddOwnerFile([FromBody] OwnerData owner) { // Access owner.EmployeeID and owner.DepartementCode // ... rest of the code } JSON Property Names: Ensure that the property names in the OwnerData class match the property names being sent from the client-side JavaScript. For example, in the OwnerData class, the property name is EmployeeID, but in the JavaScript, you are using employeeID.

Passing Data from JavaScript: In the JavaScript function insertData, make sure that the owner object passed to the AJAX request has the correct structure, corresponding to the OwnerData class:

//javascript

function insertData(owner) { $.ajax({ type: 'POST', url: '/api/Owner/AddOwnerFile', data: JSON.stringify({ employeeID: owner.employeeID, departementCode: owner.departementCode }), contentType: 'application/json', success: function () { alert('Data inserted successfully!'); }, error: function () { alert('Error inserting data!'); } }); } Database Permissions: Ensure that the user accessing the SQL Server database has the necessary permissions to perform the insert operation on the Owner table. Please make sure to address these points and see if it resolves the issue. Additionally, it's a good idea to check the browser console and server-side logs for any error messages that might provide further insight into the problem. If the issue persists, you can use console.log or debugging techniques to inspect the data being passed between the client and server-side to identify any discrepancies. I have implemented a bit of the same logic in one of client's site which is Keralajackpot.in

Share via

How to insert data to table on SQL server using jQuery on blazor server side?

2 answers

Your answer