JQUERY AJAX NOT WORKING IN ASP.NET CORE MVC

Hello,

I hope my question meet you all in good health and happiness.

I am writting an application for my team mates to help correct items in the database, the program is in ASP.NET Core using Jquery Ajax at the front end to call the controller methods; when i execute application, as soon as it get to the Ajax call the execution jump to the end of the section it didn't go through the Ajax function and the controller method never get to be called.

I don't know what i am doing wrong, below are the codes

This the Layout:

>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - DRUG_REPLACEMENTtitle>
<link href="~/Dis/css/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="~/Dis/js/jquery-3.4.1.min.js">script>
<script src="~/Dis/js/bootstrap.js">script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js">script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">script>
head>
<body>
<div class="container">
<main role="main" class="pb-3">
@RenderBody()
main>
div>
body>
html>

This is Client front:

@{
ViewData["Title"] = "Home Page";
}
<div>
<div>Nav Bardiv>
<br />
<div class="row">
<div class="col-2">
div>
<div class="col-6">
<table class="table table-bordered table-responsive-md">
<tr>
<td colspan="3" class="text-center bg-secondary">
<h3><strong>Drug Replacement strong>h3>
td>
tr>
<tr>
<td colspan="3">
# of patient with EFV:<label id="EFV">label><br />
# of patient with NVP :<label id="NVP">label>
td>
tr>
<tr>
<td>
Found within <input type="text" id="d1" class="form-control" readonly="readonly" placeholder="click for date" />
TO <input type="text" id="d2" class="form-control" readonly="readonly" placeholder="click for date" />
td>
tr>
<tr>
<td>
<button id="btn-process" type="submit" class="btn btn-success btn-block">Processbutton>
td>
tr>
table>
div>
<div class="col-2">div>
div>
<script type="text/javascript">
$(document).ready(
function ()
{
$('#d1').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy'
});
$('#d2').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy'
});
showRegimen();
}
)
function showRegimen() {
$('#NVP').html(0);
$('#EFV').html(0);
$.ajax({
URL: "/api/Home/ReplaceTLD?str=12",
method: "POST",
dataType: "Json",
success: function (data) {
console.log(data);
if (data.errCode > 0) {
$('#NVP').html(data.itemCount.nvp);
$('#EFV').html(data.itemCount.efv);
}
else {
console.log(data.errMsg);
}
},
error: function (e) {
console.log(e);
}
});
}
$('#btn-process').click(function () {
correctRegimens();
});
//?FrmDates=' + str1 + '&ToDates=' + str2 + ''
function correctRegimens() {
var DDates = new Object();
DDates.fromDate = $('#d1').val();
DDates.toDate = $('#d2').val();
var str1 = $('#d1').val();
var str2 = $('#d2').val();
if (str1 != null && str2 != null) {
$('#btn-process').html('Please wait...');
$('#btn-process').prop('disabled', false);
var URLs = '/api/Home/correctRegimen';
$.ajax({
method: "POST",
URL: URLs,
dataType: "Json",
data: JSON.stringify(DDates),
success: function (data) {
console.log(data);
if (data != null && data.errCode > 0) {
$('#btn-process').html('Process');
$('#btn-process').prop('disabled', false);
}
},
error: function () {
alert("Error occured!!")
}
});
}
}
script>
div>

This the Model Class:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace DRUG_REPLACEMENT.Models
{
public class LoadTLD
{
public class FromTo
{
public DateTime FrmDate { get; set; }
public DateTime ToDate { get; set; }
}
public class ItemCount
{
public int EFV { get; set; }
public int NVP { get; set; }
}
public class ErrMsg
{
public int errCode { get; set; }
public string errMsg { get; set; }
public ItemCount ItemCount { get; set; }
public FromTo FromTo { get; set; }
}
}
}

And this the Controller methods:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Configuration;
using System.Data;
using MySql.Data.MySqlClient;
using Newtonsoft.Json;
using static DRUG_REPLACEMENT.Models.LoadTLD;
namespace DRUG_REPLACEMENT.Controllers
{
public class HomeController : Controller
{
public int NVP1;
public int EFV1;
/*
* This add dependency injection to read the
* ConnectionStrings from appsettings
* */
private readonly IConfiguration configuration;
public HomeController(IConfiguration config)
{
this.configuration = config;
}
public ActionResult Index()
{
return View();
}
public ActionResult ReplaceTLD()
{
return View();
}
[HttpPost]
public ActionResult ReplaceTLD(string str)
{
ErrMsg msg = new ErrMsg();
try
{
var con = configuration.GetConnectionString("NMRSCon");
using (MySqlConnection cn = new MySqlConnection(con))
{
cn.Open();
var Sql = string.Concat("DROP TABLE IF EXISTS temp_regimen;",
"CREATE TABLE temp_regimen AS ",
"SELECT p.patient_id, pid.identifier, IF(obs.concept_id = 164506, cn1.name, NULL) AS regimen, obs.Value_coded,",
"IF(obs.concept_id = 164506, obs.obs_datetime, NULL) AS Obs_Date FROM (",
"(SELECT * FROM patient) AS p ",
" LEFT JOIN ",
" (SELECT * FROM patient_identifier) AS pid ON p.patient_id = pid.patient_id ",
" LEFT JOIN ",
" (SELECT * FROM Obs WHERE obs.concept_id = 164506 AND obs.value_coded = 164505 OR obs.Value_coded = 162565) AS obs ",
" ON pid.patient_id = obs.person_id ",
" LEFT JOIN ",
" concept_name AS cn1 ON(obs.value_coded = cn1.concept_id AND cn1.locale = 'en' AND cn1.locale_preferred = 1) )");
//" WHERE TIMESTAMP(obs.obs_datetime) BETWEEN TIMESTAMP('2019/06/01') AND CURDATE()");
MySqlCommand cmd = new MySqlCommand(Sql, cn);
cmd.ExecuteNonQuery();
cmd.Dispose();
cn.Close();
if (cn.State == ConnectionState.Closed)
cn.Open();
var SQLNV = "SELECT COUNT(regimen) as regCount FROM temp_regimen WHERE regimen ='TDF-3TC-NVP'";
MySqlCommand Ncmd = new MySqlCommand(SQLNV, cn);
NVP1 = Convert.ToInt32(Ncmd.ExecuteScalar());
var SQLEFV = "SELECT COUNT(*) from temp_regimen where regimen ='TDF-3TC-EFV'";
MySqlCommand FVcmd = new MySqlCommand(SQLEFV, cn);
EFV1 = Convert.ToInt32(FVcmd.ExecuteScalar());
msg.ItemCount = new ItemCount
{
EFV = EFV1,
NVP = NVP1
};
msg.errCode = 5;
msg.errMsg = "Process completed successfully. Please check the output for feedback";
return msg;
}
}
catch (Exception e)
{
msg.errMsg = e.InnerException != null ? e.InnerException.Message : e.Message;
msg.errCode = -1;
return msg;
}
}
[HttpPost]
public ActionResult correctRegimen(string FrmDates, string ToDates)
{
ErrMsg msg = new ErrMsg();
try
{
msg.FromTo = new FromTo
{
FrmDate = Convert.ToDateTime(FrmDates.Trim()),
ToDate = Convert.ToDateTime(ToDates.Trim())
};
// TDF-3TC-DTG Concept is 165681
var USQL = string.Concat("UPDATE obs SET obs.Value_coded = 165681 where obs.Value_coded = 164505 OR ",
"obs.Value_coded = 162565 AND TIMESTAMP(obs.obs_datetime) BETWEEN TIMESTAMP('" + msg.FromTo.FrmDate + "') ",
"AND TIMESTAMP('" + msg.FromTo.ToDate + "') ");
msg.errMsg = USQL;
msg.errCode = 5;
return msg;
}
catch (Exception e)
{
msg.errMsg = e.InnerException != null ? e.InnerException.Message : e.Message;
msg.errCode = -1;
return msg;
}
}
}
}

I need any suggestions and solution.

Thank you all

9 Replies

Know the answer? Post it — somebody with the same question will find it here.

Asma Khalid6y ago
If you are using ajax then you dont need to create the view part, issue might be something else. I am using ajax here successfully without creation of any view for it i.e. https://bit.ly/2wya8tQissue is seems to be how you are calling the URL and passing the data into it.
Abraham Olatubosun6y ago
Dear Asma Khalid,

Many thank for your assistance, I later found out that the problem is Routing at Startup, when i change the action to the Controller method name and create a View for the method it ran well, the issue now is i have few more method like the onclick="" within the View.
Question now is, can we have multiple Routing to address this kind of issues?

My AnyDesk ID : 846 376 117
.

I am available now.

Thank you
Asma Khalid6y ago
yes DM the IP via C-Sharpcorner
Abraham Olatubosun6y ago
Many thanks Asma Khalid,

I will be very happy if we can do remote, i am available anytime, how do i DM the AnyDesk IP to you, is it via this channel or how?

I can even call you if you share your mobile number, mine is +2348030805780.

Thanks I appreciate your effort to solve my issue
Asma Khalid6y ago
I can remote access via anydesk. You can DM the IP and let me know your availability tomorrow (6-Mar-2020)
Abraham Olatubosun6y ago
Dear Asma Khalid,

Thank you once again for this quick response, Yes I tried removing one of the Jquery plugin and execute the result is still the same.

If you know the link of Jquery plugin that have Ajax and Datepicker inclussive, kindly share with me, since when you share your previouse post, i have been googling with no result.

Please, i will be expecting your response so that my searching time will reduice.

Thank you
Asma Khalid6y ago
That is fine. Have you try to execute the project after removing extra Jquery inclusions? The lates verion of Jquery will handle the datepicker, you only need to include the JS specific to the datetimepicker.
Abraham Olatubosun6y ago
Thank you Asma Khalid,
The reason i am using two Jquery Lib is :
I am using Jquery 3.4.1 for all functions and Ajax calls
"~/js/jquery-3.4.1.min.js">
while this is specifically for Datepicker i mean to show calender for users to pick date instead of typing

"~/js/bootstrap-datepicker.js">
If you or anyone know of any Jquery plugin that include datepicker and have ajax all inclussive, i will appreciate it if you will kindly share with me.

Thank you
Asma Khalid6y ago
Here are the following that could be causing the issue i.e.

1. You are using multiple Jquery version, so, they might be conflicting with each other. Solution: Use only one the lates version in layout page.

2. In your layout page you are not rendering your view script sections so change it as follow and also add scripts at the end not in header section. For best practices style sheets are used in header section and scripts are recommended to use in body end section i.e.
<body>

    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        main>
    div>

>

@RenderSection("scripts", required: false)

body>
html>
Mark your answer as accepted if helpfuly.
Thanks & Regards,
Asma Khalid

For more Visit: www.asmak9.com