how to check InvoiceNO availability while typing in textbox in C# mvc

Question

1.00/5 (1 vote)

See more:

HTML

<script>
function myFunction() {
$("#InvoiceNo").keypress(function () {
//remove all the class add the messagebox classes and start fading
//check the username exists or not from ajax
$.ajax({
url: "@Url.Action("IsInvoiceExists", "Home")",
data: $(this).val(),
type: "POST",
cache: false,
success: function (data) {
if (data == 0) {
//$("#errorMessage").text("Invoice Exist");
$("#msgbox").fadeTo(200, 0.1, function () { //start fading the messagebox

//add message and change the class of the box and start fading
$(this).html('This Invoice Already exists').addClass('messageboxerror').fadeTo(900, 1);
});
}
else if (data == 1) {
//$("#errorMessage").empty();
$("#msgbox").fadeTo(200, 0.1, function () { //start fading the messagebox

//add message and change the class of the box and start fading
$(this).html('Invoice available').addClass('messageboxok').fadeTo(900, 1);
});
}
else {
alert("Some error occured! Check Console");
}
},
error: function (xhr) {
}
});
});
}

</script>


<input type="text" class="form-control required" maxlength="11" id="InvoiceNo"
name="InvoiceNo" placeholder="Invoice No"
value="@(ViewBag.InvoiceNo ?? String.Empty)" required >

C#

public bool IsInvoiceExists(string invoicenumber)
{
try
{
string connstring = "Data Source=.;Initial Catalog=Accounts;Integrated Security=True";
string query = "select * from AccountSummary where InvoiceNo=@InvoiceNo";
SqlConnection conn = new SqlConnection(connstring);
SqlCommand cmd = new SqlCommand(query, conn);
cmd.Parameters.AddWithValue("@InvoiceNo", invoicenumber);

DataTable dt = new DataTable();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
if (dt == null || dt.Rows.Count == 0)
{
return true;
}
else
{
return false;
}
}
catch (Exception)
{

throw;
}




}

Posted 2-Dec-15 2:36am

Member 10403555

Updated 2-Dec-15 3:05am

CHill60

v2

Add a Solution

Comments

Member 10403555 2-Dec-15 8:38am

My code is hiting javascript and not going to C# code from Javascript

Nathan Minier 2-Dec-15 12:58pm

I'm not a giant fan of the this (or $(this)) operator outside of member methods, as it can often lead to unexpected and unpredictable results. If you open your browser dev tools (usually F12) and watch the traffic when you enter a number, you'll likely see that the data is not being passed in the POST.

A better solution is to use an explicit value rather than an implicit one. in this case:

$("#InvoiceNo").keypress(function (e) {
...
data: e.target.value,
...
}

The jQuery .keypress method passes an event object to the callback, so you can leverage that instead of leaning on $(this).

Member 10403555 3-Dec-15 2:29am

when i debugged in my browser it is not entering into ajax in java script

Member 10403555 3-Dec-15 7:31am

Modify the comment. Delete the comment.
I changed the code as like this

function myFunction() {
var x = document.getElementById("InvoiceNo");
//remove all the class add the messagebox classes and start fading
//check the username exists or not from ajax $(this).val()
//alert(x.value);
$.ajax({
url: "@Url.Action("IsInvoiceExists", "Home")",
data: x.value,
type: "GET",
cache: false,
success: function (data) {
if (data == 0) {
$("#errorMessage").text("Invoice Exist");
}
else if (data == 1) {
$("#errorMessage").text("Invoice Available");
}
else {
alert("Some error occured! Check Console");
}
},
error: function (data) {
}
});
return true;

}

Member 10403555 3-Dec-15 7:33am

here i got the problem with url which doesn't goes to action in debug time.please tell me how to route from javascript to C# code

Member 10403555 3-Dec-15 2:29am

when i debugged in my browser it is not entering into ajax in java script

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Nathan Minier · Answer 1 · 2015-12-03T01:19:00

Solution 1

Looking a little closer at your script block, I see that the event handler is added by myFunction(), but you never actually call myFunction() to apply the handler.

If you need myFunction() (namely, if you have a default behavior for the field that needs to be preserved) then make sure to tie in control functionality for it.

If you don't need it, then just place the handler assignment directly into the script block, like so:

JavaScript

<script>
$(document).ready(function(){
$("#InvoiceNo").keypress(function (e) {
//remove all the class add the messagebox classes and start fading
//check the username exists or not from ajax
$.ajax({
url: '@Url.Action("IsInvoiceExists", "Home")',
data: e.target.value,
type: "POST",
cache: false,
success: function (data) {
if (data == 0) {
//$("#errorMessage").text("Invoice Exist");
$("#msgbox").fadeTo(200, 0.1, function () { //start fading the messagebox
 
//add message and change the class of the box and start fading
$(this).html('This Invoice Already exists').addClass('messageboxerror').fadeTo(900, 1);
});
}
else if (data == 1) {
//$("#errorMessage").empty();
$("#msgbox").fadeTo(200, 0.1, function () { //start fading the messagebox
 
//add message and change the class of the box and start fading
$(this).html('Invoice available').addClass('messageboxok').fadeTo(900, 1);
});
}
else {
alert("Some error occured! Check Console");
}
},
error: function (xhr) {
}
});
});
});
</script>

Posted 3-Dec-15 1:19am

Nathan Minier

Updated 3-Dec-15 2:01am

v3

Comments

Member 10403555 3-Dec-15 7:30am

I changed the code as like this

function myFunction() {
var x = document.getElementById("InvoiceNo");
//remove all the class add the messagebox classes and start fading
//check the username exists or not from ajax $(this).val()
//alert(x.value);
$.ajax({
url: "@Url.Action("IsInvoiceExists", "Home")",
data: x.value,
type: "GET",
cache: false,
success: function (data) {
if (data == 0) {
$("#errorMessage").text("Invoice Exist");
}
else if (data == 1) {
$("#errorMessage").text("Invoice Available");
}
else {
alert("Some error occured! Check Console");
}
},
error: function (data) {
}
});
return true;

}

here i got the problem with url which doesn't goes to action in debug time.please tell me how to route from javascript to C# code

Nathan Minier 3-Dec-15 7:34am

Please read the answer I just provided. Remove the myFunction(){ line and it's closing bracket.

Member 10403555 3-Dec-15 7:47am

I changed the code as like this.this time in debugging it is not hitting javascript

$("#InvoiceNo").keypress(function (e) {
//remove all the class add the messagebox classes and start fading
//check the username exists or not from ajax $(this).val()
alert(e.target.value);
$.ajax({
url: "@Url.Action("IsInvoiceExists", "Home")",
data: e.target.value,
type: "GET",
cache: false,
success: function (data) {
if (data == 0) {
$("#errorMessage").text("Invoice Exist");
}
else if (data == 1) {
$("#errorMessage").text("Invoice Available");
}
else {
alert("Some error occured! Check Console");
}
},
error: function (data) {
}
});
return true;

});

Nathan Minier 3-Dec-15 7:52am

What version of jQuery are you loading?

EDIT: Crud, you also do have an issue with the url. Editing.

Member 10403555 3-Dec-15 7:57am

i'm using this two

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

Member 10403555 3-Dec-15 7:56am

is there any thing need to add in the view to hit the javascript

Nathan Minier 3-Dec-15 8:03am

I apologize, it's been awhile since I worked with jQuery and completely forgot about the $(document).ready issue. Updated again.

I also modified your URL parameter. It shouldn't make a difference, since the Razor code is parsed on the server and the JS on the browser, but it should be better for warm fuzzies.

Member 10403555 3-Dec-15 8:16am

will you please modify my code and paste it,in next reply

Nathan Minier 3-Dec-15 8:18am

I already did. The code block in the answer is updated.

Member 10403555 3-Dec-15 8:36am

when i debugged in browser.it was going jquery.1.10.2.js and again starts debugging from document.ready()