We Keep Coding

Struggling to ASP.NET C# Ajax novice question

I changed the code with a simple like these
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#RadioButtonYes').click(function () {
var enterdata = document.getElementById("RadioButtonYes").value;
$.ajax({
type: "GET",
url: "radiobutton03ask.aspx/SyncData",
contentType: "application/json charset=utf-8",
dataType: "json",
data: { 'data': enterdata },
success: function (response) {
text1 = "ajaxyes";
alert(text1);
},
failure: function (response) {
alert(response.d);
}
});
});
$('#RadioButtonNo').click(function () {
var enterdata = document.getElementById("RadioButtonNo").value;
$.ajax({
type: "GET",
url: "radiobutton03ask.aspx/SyncData",
contentType: "application/json charset=utf-8",
dataType: "json",
data: { 'data': enterdata },
success: function (response) {
text2 = "ajaxno";
alert(text2);
},
failure: function (response) {
alert(response.d);
}
});
});
});
</script>
<div>
<asp:RadioButton ID="RadioButtonYes" Text="Yes" runat="server" Checked="true" GroupName="G" />
<asp:RadioButton ID="RadioButtonNo" Text="No" runat="server" GroupName="G" />
</div>
.cs side
I tried to add some debugging messages, but it didn't work.
public partial class Radio_Button__radiobutton03ask : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public void SyncData(string data)
{
if (data != "")
{
if (data == "RadioButtonYes")
{
Response.Write("SyncDataYes");
//return RadioButtonYes;
}
else if (data == "RadioButtonNo")
{
Response.Write("SyncDataNo");
//return RadioButtonNo;
}
else
{
Response.Write("SyncDataOther");
}
}
}
}
I am helping the company to debug some old projects(C# webforms), but struggling to simple ajax.
The goal is when pressing the radio button run ajax "ajaxyes" and .cs "SyncDataYes" message normally, but the above code does not respond when pressed.
I have tried alot of fixes i found online but none seem to work well for, if someone could help, it would be greatly appreciated.

first, there is a LOT of issues here.
first up:
[WebMethod]
public void SyncData(string data)
Why are you marking/making the routine as "void". Void of course in c# means that the function will NOT return anything!!!! - That should be a first obvious issue!
And since you using this inside of the web page (as opposed to a separate asmx page? Then you need to set the routine as static - since NO page class instance will have been created here (there is NOT post back).
next up:
Response.Write("SyncDataNo");
WHY would you try and use Response.Write? Response write is ONLY for writing into a web page. But the WHOLE IDEA of ajax is the web page is not and will not be sent up to the server for code behind to operate on. So, response write does not make sense AT ALL here! It can't be used, and you can EVEN see that the compiler does not allow this (now that you fixed and removed the void from that routine).
A so called "ajax" call?
The idea here is that you do NOT have to post back the web page. This is great since you don't get the browser "spinner" and all that waiting time. It also great since it runs VERY fast since you don't and are NOT posting the web page back to the server.
Of course the big downside is then the code behind can't see nor use, nor modify any of the controls on the web page. (since the web page is still sitting on the users desktop). So code behind for a web method can't see nor modify controls on the page (the calling JavaScript and ajax call HAS do to that change of controls).
So, lets use all of the above information, and fix this code.
Lets make a simple C to F temperature converter.
So, first up, that web method is to return a value, so we remove the void.
next up, as I stated, the page class "instance" is NOT re-created when we call such a web method, so that method ALSO MUST be marked as static. (I assume you know what that means, right???).
Ok. So the web method should look like this:
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static Double ConvertToC(Double MyC)
{
Double CelResult = (MyC * 1.8) + 32;
return CelResult;
}
So, we HAVE to make this routine static. (the page class is not re-reated, and the web page is STILL sitting on the users desktop).
So, say our markup looks like this:
<div style="text-align:right;width:20%">
<label style="font-size:large">Enter Celsious Tempature</label>
<asp:TextBox ID="txtC" runat="server" style="font-size:large;margin-left:5px;text-align:center"
TextMode="Number" Width="80px" Wrap="False"
ClientIDMode="Static">
</asp:TextBox>
<br /> <br />
<div style="text-align:center">
<asp:Button ID="cmdConvert" runat="server" Text="Convert to °F" CssClass="btn"
OnClientClick="MyConvert();return false"/>
</div>
<br />
<label style="font-size:large">Fahrenheit</label>
<asp:TextBox ID="txtF" runat="server" style="font-size:large;margin-left:5px;text-align:center"
Width="80px" Wrap="false"
ClientIDMode="Static">
</asp:TextBox>
</div>
<script>
function MyConvert() {
var txtC = $("#txtC");
var txtF = $("#txtF");
$.ajax({
type: "POST",
url: "Autocom.aspx/ConvertToC",
data: JSON.stringify({ MyC: txtC.val()}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (MyReturn) {
txtF.val(MyReturn.d);
},
error: function (xhr, status, error) {
var errorMessage = xhr.status + ': ' + xhr.statusText
alert('Error - ' + errorMessage)
}
});
}
I'm also a bit lazy, so I used clientID mode = static, as that makes the jQuery selector nice and easy to type in.
So, when we run the above, we get this result:
so, now your "mess".
it not particular what you goal here is with your sample.
(going for coffee, but study, and try the above).
Edit: Try this sample code
Your c# method in the page:
[WebMethod]
public static string SyncData(string data)
{
string sResult = "";
if (data != "")
{
if (data == "Yes")
{
sResult = "SyncDataYes";
}
else if (data == "No")
{
sResult = "SyncDataNo";
}
else
{
sResult = "SyncDataOther";
}
}
return sResult;
}
And your markup is this:
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<asp:RadioButton ID="RadioButtonYes" Text="Yes" runat="server"
Checked="true" GroupName="G"
onclick="MyBtnClick('Yes')"
ClientIDMode="Static"
/>
<asp:RadioButton ID="RadioButtonNo" Text="No" runat="server"
GroupName="G"
onclick="MyBtnClick('No')"
ClientIDMode="Static"
/>
<br />
<h3>Result</h3>
<asp:TextBox ID="TextBox1" runat="server" ClientIDMode="Static"></asp:TextBox>
<script>
function MyBtnClick(sYesNo) {
$.ajax({
type: "POST",
url: "TestAjax.aspx/SyncData",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: JSON.stringify({data : sYesNo }),
success: function (MyResult) {
$('#TextBox1').val(MyResult.d);
},
failure: function (MyResult) {
alert('error');
}
});
}
</script>

Since ASP run at server control's ID will be generated different ID in client side, so these 2 event handlers binding will not work.
$('#RadioButtonYes').click(function () {...}
$('#RadioButtonNo').click(function () {...}
You could try 2 solutions:
Using control's ClientID for event binding
$('#<%=RadioButtonYes.ClientID%>').click(function () {...}
$('#<%=RadioButtonYes.ClientID%>').click(function () {...}
Adding ClientIDMode="Static" attribute to ASP control
<asp:RadioButton ID="RadioButtonYes" Text="Yes" runat="server" ClientIDMode="Static" Checked="true" GroupName="G" />
<asp:RadioButton ID="RadioButtonNo" Text="No" runat="server" ClientIDMode="Static" GroupName="G" />
** UPDATE:**
Your code also has two more problems:
1 - DataType of your ajax request (json) does not match with response type from server code (text/plain). You could check demo of not matching dataType of ajax request here: https://jsfiddle.net/p2yzLqu1/3/
2 - You were using wrong ajax's callback function failure. We should use done (success) and fail (error) callback functions instead. Please check sample of using done and fail callback at above demo.

How to set html input text control as invisible at code behind with out using runat="server"

I want to set input tag type="text" as invisible/visible on button click event with out using runat="server"
Below is what is coded
$(document).ready(function () {
SearchText();
});
function SearchText()
{
$(".autosuggest").autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "CalenderDetails.aspx/GetAutoCompleteData",
data: "{'Col3':'" + document.getElementById('txtSearch').value + "'}",
dataType: "json",
success: function (data) {
response(data.d);
},
error: function (result) {
alert("Error");
}
});
}
});
}
</script>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
<br />
<input type="text" id="txtSearch" class="autosuggest" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" >
<ContentTemplate>
<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
<br />
<br />
<asp:GridView ID="Gr
idView1" runat="server" AllowPaging="True" PageSize="20" OnPageIndexChanging="GridView1_PageIndexChanging" OnRowDataBound="GridView1_RowDataBound">
<HeaderStyle BackColor="#FFCC99" />
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="GridView1" EventName="PageIndexChanging" />
<asp:AsyncPostBackTrigger ControlID="btnSubmit" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
Code behind
[WebMethod]
public static List<string> GetAutoCompleteData(string Col3)
{
List<string> result = new List<string>();
if ((dtClone != null) && (dtClone.Rows.Count > 0))
{
DataRow[] foundRows;
string expression = "Col3 LIKE '%" + Col3 + "%'";
// Use the Select method to find all rows matching the filter.
foundRows = dtClone.Select(expression);
for (int i = 0; i < foundRows.Length; i++)
result.Add(foundRows[i][2].ToString());
}
return result;
}
If I use runat="server" I am able to make it visible/invisible but then ajax call will not perform for search operation
Can any body tell how to overcome this problem?

You are having difficulty to get two things working together which is runat="server" and making ajax call on same textbox.
You can use ClientIDMode="Static" which will not change id of textbox and you will be able to send ajax call.
<asp:TextBox ID="txtSearch" ClientIDMode="Static" runat="server"></asp:TextBox>

you could use jquery and use the following code,
function clicked(){
console.log("sf"+$("#grand").css("visibility"))
if($("#grand").css("visibility")=="visible"){
$("#grand").css("visibility","hidden");
}
else{
$("#grand").css("visibility","visible");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="hello" id="grand">
<input type="button" value="hide/show" onclick="clicked()">

Firstly, if you really dont want to add runat="server" to your button.
it is correct you can apply Web Method to the Server side,
and in the client side, you can apply AJAX to call your web method.
To achieve hiding the HTML control in the server side,
You can try apply ScriptManager and Jquery, by adding this to the Web Method.
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "clientScript", "$(':text').toggle()", true);
in case of hiding/showing type="text" without condition, it is okay to use toggle.
Otherwise you may implement your required condition and call
$(':text').show()
or
$(':text').hide()
for showing and hiding your controls on the form.

Need to access variable from code behind. What i found shows how to go about it but i but the value keep displaying null

How to access and use javascript variables from code behind (C#). Upon research, i implemented the proccess in accessing the variables but i still do not get the values of the variables. Where am i going wrong?
//Javascript
<script type="text/javascript">
function OnSucceeded() {
var status = 65;
var state = "pass value"
document.getElementById("getValue").value = status;
document.getElementById("getvalues").value = state;
}
</script>
//
<asp:HiddenField ID="getValue" runat="server" Value="" />
<asp:HiddenField ID="getvalues" runat="server" Value="" />
<asp:Button ID="Button1" runat="server" OnClientClick="OnSucceeded()" Text="Button"
OnClick="Button1_Click" />
//C# code behind
ClientScript.RegisterStartupScript(this.GetType(), "myalert", "alert('" + getvalues.Value + "');", true);

Use ClientID to render correct IDs of server controls
<script type="text/javascript">
function OnSucceeded() {
var status = 65;
var state = "pass value"
document.getElementById("<%= getValue.ClientID %>").value = status;
document.getElementById("<%= getvalues.ClientID %>").value = state;
}
</script>

'controltovalidate' error in IE8

I'm getting a JavaScript error (in IE only of course) and I can't figure out why. I assumed it was a trailing comma or something but I can't find one. I'm hoping I'm overlooking something and maybe one of you can see what I missed.
My control and custom validator:
<asp:TextBox runat="server" ID="txtName" MaxLength="100" CssClass="styled" Columns="50" />
<asp:CustomValidator runat="server" ID="cvName" ErrorMessage="Enter a valid contact name or email address" ControlToValidate="txtName" Display="None" ValidationGroup="PlatformContact" ClientValidationFunction="doesUserExist" />
<asp:ValidatorCalloutExtender ID="vceName" runat="server" TargetControlID="cvName" WarningIconImageUrl="~/img/icons/ic_asterisk.gif" CssClass="validatorStyled" PopupPosition="Right" CloseImageUrl="~/img/icons/ic_x_close_orange.png" />
<asp:RequiredFieldValidator runat="server" ID="valName" ErrorMessage="Enter a contact name or email address" ControlToValidate="txtName" Display="None" ValidationGroup="PlatformContact" />
<asp:ValidatorCalloutExtender ID="vceNameRequired" runat="server" TargetControlID="valName" WarningIconImageUrl="~/img/icons/ic_asterisk.gif" CssClass="validatorStyled" PopupPosition="Right" CloseImageUrl="~/img/icons/ic_x_close_orange.png" />
And here is the JavaScript/jQuery I am using:
<script language="javascript" type="text/javascript">
var userExists = true;
function doesUserExist(source, args) {
var txtName = $('#<%= txtName.ClientID %>').val();
$.ajaxSetup({ cache: false });
$.ajax({
type: "POST",
contentType: "application/json",
data: "{name:'" + txtName + "'}",
url: "ManageMyContacts.aspx/DoesUserExist",
dataType: "json",
success: function (result) {
userExists = result.d;
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
//Something bad happened,redirect to login page
window.location.href = '<%= ResolveUrl("~/Default.aspx") %>';
}
});
args.IsValid = userExists;
}
</script>
Any insight is greatly appreciated.
EDIT: JavaScript error
Message: 'controltovalidate' is null or not an object
Here is the WebMethod I user to check for the user name (in the code behind)
[WebMethod(EnableSession = true)]
public static bool DoesUserExist(string name)
{
ManageMyContactsService service = new ManageMyContactsService();
int index = name.IndexOf("[") + 1;
if (index > 0)
{
string email = name.Substring(index, name.Length - (index + 1));
return service.DoesUserExist(email);
}
else if (name.IndexOf("#") == -1)
return false;
else
return service.DoesUserExist(name);
}
I noticed the doesUserExist function gets called twice for some reason, can anyone tell why from this code?

It appears an UpdatePanel was causing the second ajax call and was causing IE to throw a JS error. Worked fine in the other browsers but not IE7/8!
Hope that helps someone with a similar issue.

How to call code behind server method from a client side JavaScript function?

I am having an JavaScript function for a HTML button click event in ASPX page. And a server Method in its code behind page. Now I want to call the server method from the JavaScript function with some parameters only when the HTML button is clicked by the user.
Please don't change this scenario and also don't use any asp.net contols in the aspx page while replying. Because only HTML controls are allowed. Can anyone help me on this?
Here is the code,
Code in markup:
<script language="javascript" type="text/javascript">
function btnAccept_onclick() {
var name;
name = document.getElementById('txtName').value;
// Call Server side method SetName() by passing this parameter 'name'
</script>
<input type="button" id="btnAccept" value="Accept" onclick="return btnAccept_onclick()" />
Code-behind:
public void SetName(string name)
{
// Code for some functionality
}

Yes, you can make a web method like..
[WebMethod]
public static String SetName(string name)
{
return "Your String"
}
And then call it in JavaScript like,
PageMethods.SetName(parameterValueIfAny, onSuccessMethod,onFailMethod);
This is also required :
<asp:ScriptManager ID="ScriptMgr" runat="server" EnablePageMethods="true"></asp:ScriptManager>

In my projects, we usually call server side method like this:
in JavaScript:
document.getElementById("UploadButton").click();
Server side control:
<asp:Button runat="server" ID="UploadButton" Text="" style="display:none;" OnClick="UploadButton_Click" />
C#:
protected void Upload_Click(object sender, EventArgs e)
{
}

If you dont want to use ajax than
Code behind
void myBtn_Click(Object sender,EventArgs e)
{
//SetName(name); your code
}
.aspx file
<script language="javascript" type="text/javascript">
function btnAccept_onclick() {
var name;
name = document.getElementById('txtName').value;
document.getElementById('callserver').click();
// Call Server side method SetName() by passing this parameter 'name'
</script>
<div style="dispaly:none;">
<input type="button" id="callserver" value="Accept" click="myBtn_Click" runat="server" />
</div>
<input type="button" id="btnAccept" value="Accept" onclick="return btnAccept_onclick()" />
or use page method
.cs file
[ScriptMethod, WebMethod]
public static string docall()
{
return "Hello";
}
.aspx file
<script type="text/javascript">
function btnAccept_onclic() {
PageMethods.docall(onSuccess, onFailure);
}
function onSuccess(result) {
alert(result);
}
function onFailure(error) {
alert(error);
}
</script>
check this : http://blogs.microsoft.co.il/blogs/gilf/archive/2008/10/04/asp-net-ajax-pagemethods.aspx

JS Code:
<script type="text/javascript">
function ShowCurrentTime(name) {
PageMethods.GetCurrentTime(name, OnSuccess);
}
function OnSuccess(response, userContext, methodName) {
alert(response);
}
</script>
HTML Code:
<asp:ImageButton ID="IMGBTN001" runat="server" ImageUrl="Images/ico/labaniat.png"
class="img-responsive em-img-lazy" OnClientClick="ShowCurrentTime('01')" />
Code Behind C#
[System.Web.Services.WebMethod]
public static string GetCurrentTime(string name)
{
return "Hello " + name + Environment.NewLine + "The Current Time is: "
+ DateTime.Now.ToString();
}

I had to register my buttonid as a postbacktrigger...
RegisterPostbackTrigger(idOfButton)

Ajax is the way to go. The easiest (and probably the best) approach is jQuery ajax()
You'll end up writing something like this:
$.ajax({
url: "test.html",
context: document.body,
success: function(){
// do something when done
}
});

Try creating a new service and calling it. The processing can be done there, and returned back.
http://code.msdn.microsoft.com/windowsazure/WCF-Azure-AJAX-Calculator-4cf3099e
function makeCall(operation){
var n1 = document.getElementById("num1").value;
var n2 = document.getElementById("num2").value;
if(n1 && n2){
// Instantiate a service proxy
var proxy = new Service();
// Call correct operation on vf cproxy
switch(operation){
case "gridOne":
proxy.Calculate(AjaxService.Operation.getWeather, n1, n2,
onSuccess, onFail, null);
****HTML CODE****
<p>Major City: <input type="text" id="num1" onclick="return num1_onclick()"
/></p>
<p>Country: <input type="text" id="num2" onclick="return num2_onclick()"
/></p>
<input id="btnDivide" type="button" onclick="return makeCall('gridOne');"

In my opinion, the solution proposed by user1965719 is really elegant. In my project, all objects going in to the containing div is dynamically created, so adding the extra hidden button is a breeze:
aspx code:
<asp:Button runat="server" id="btnResponse1" Text=""
style="display: none; width:100%; height:100%"
OnClick="btnResponses_Clicked" />
<div class="circlebuttontext" id="calendarButtonText">Calendar</div>
</div>
C# code behind:
protected void btnResponses_Clicked(object sender, EventArgs e)
{
if(sender == btnResponse1)
{
//Your code behind logic for that button goes here
}
}

// include jquery.js
//javascript function
var a1="aaa";
var b1="bbb";
**pagename/methodname** *parameters*
CallServerFunction("Default.aspx/FunPubGetTasks", "{a:'" + a1+ "',b:'" + b1+ "'}",
function(result)
{
}
);
function CallServerFunction(StrPriUrl,ObjPriData,CallBackFunction)
{
$.ajax({
type: "post",
url: StrPriUrl,
contentType: "application/json; charset=utf-8",
data: ObjPriData,
dataType: "json",
success: function(result)
{
if(CallBackFunction!=null && typeof CallBackFunction !='undefined')
{
CallBackFunction(result);
}
},
error: function(result)
{
alert('error occured');
alert(result.responseText);
window.location.href="FrmError.aspx?Exception="+result.responseText;
},
async: true
});
}
//page name is Default.aspx & FunPubGetTasks method
///your code behind function
[System.Web.Services.WebMethod()]
public static object FunPubGetTasks(string a, string b)
{
//return Ienumerable or array
}