while attempting to learn PageMethods, I've come across a peculiar problem.
When running the program, the program enters the error function. Chrome developer tools shows the following error:
GET http://localhost:62316/Advertising/WebForm1.aspx/GetCurrentDate ScriptResource.axd:4844
Here is my asp code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type ="text/javascript" src="../Includes/jquery-1.4.2.js"></script>
<script type ="text/javascript">
function call() {
PageMethods.GetCurrentDate(success, fail);
return false;
}
function success(msg) {
alert("Success "+msg);
}
function fail(xhr, status) {
alert("Fail "+xhr.responseText+" "+status);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="Manager" runat="server" EnablePageMethods="true"></asp:ScriptManager>
<asp:Button ID="test" Text="Get Text" runat="server" OnClientClick="javascript: return call();" />
</form>
</body>
</html>
Here is the C# code:
[WebMethod]
[ScriptMethod(UseHttpGet = true)]
public static string GetCurrentDate()
{
return "foo";
}
The objects that are shown in the error box are undefined and null respectively. Furthermore, with a breakpoint in the function, it has been concluded that the function is never stepped into. What am I doing wrong?
Change the below line
<asp:Button ID="test" Text="Get Text" runat="server" OnClientClick="javascript: return call();" />
as
<asp:Button ID="test" Text="Get Text" runat="server" OnClientClick="call(); return false;" />
It should work
Related
I have two textboxes in my web application for login page, RegNo and Address. Now I want that if the page loads then cursor should be on RegNo textbox . After entering RegNo it must goes to Address after press Enter. How to do This?
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body bgcolor="#CCCCCC" >
<form id="form1" runat="server">
<div>
<asp:TextBox ID="RegNo" runat="server" Text=""></asp:TextBox>
<asp:TextBox ID="Name" runat="server" Text=""></asp:TextBox>
<asp:TextBox ID="Address" runat="server" Text=""></asp:TextBox>
<asp:Button CssClass="sCancel" ID="btnCancel" runat="server" Text="Close" onclick="btnCancel_Click" Width="84px" />
<asp:Button CssClass="sUpdate" ID="btnUpdate" runat="server" Text="Update" onclick="btnUpdate_Click" Width="84px" style="margin-left: 0px"/>
<asp:Button CssClass="sAdd" ID="Add" runat="server" Text="Add" Width="84px" onclick="Add_Click" />
</div>
</form>
</body>
</html>
Well, I assume what you ask is how to change focus from userid to password and you don't need to move cursor itself.
Note that there is no need to do this in server side. You are able to simply do this in client side with JQuery. If you are not familiar with JQuery see here to understand how to add JQuery to your client side code.
Now I assume code in your client side is something like this:
Username: <asp:TextBox name="userid" id="userid" /><br>
Password: <asp:TextBox name="password" id="password" />
I will provide two examples with JQuery for this, in first example the focus will jump to password when user press Enter:
$('#userid').keydown(function (e) {
if (e.keyCode == 13) {
$("#password").focus();
return false;
}
});
In next example we change focus to password when userid reaches a specific lengths. for example 6:
$('#userid').keydown(function (e) {
if ($("#userid").val().length > 5) {
$("#password").focus();
}
});
UPDATE
It should work in your code:
<head runat="server">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$('#RegNo').keydown(function (e) {
if (e.keyCode == 13) {
$("#Name").focus();
return false;
}
});
});
</script>
</head>
<body bgcolor="#CCCCCC">
<form id="form1" runat="server">
<div>
<asp:TextBox ID="RegNo" runat="server" Text=""></asp:TextBox>
<asp:TextBox ID="Name" runat="server" Text=""></asp:TextBox>
</div>
</form>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#RegNo').keydown(function (e) {
if (e.keyCode == 13) {
$("#Name").focus();
return false;
}
});
$('#Name').keydown(function (e) {
if (e.keyCode == 13) {
$("#Address").focus();
return false;
}
});
$('#Address').keydown(function (e) {
if (e.keyCode == 13) {
$("#Add").focus();
return false;
}
});
});
</script>
You can achieve this by the use of Tabindex Property of TaxtBox.
First, You set the Tabindex=1 to Textbox1
then,set the Tabindex =2 to TextBox2 and so on..
By this when your page is load then it look tabindex of control which is less it focus on that.
Thanks
I need to Stop Button1_Click fire after Jquery function return false..This is my Code ...
<%# Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<script type="text/javascript" src="http://code.jquery.com/Javascript/jquery-1.4.2.min.js"></script>
<script src="Scripts/a.js" type="text/javascript"></script>
<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return x();" OnClick="Button1_Click" />
OnClick="Button1_Click" />
</div>
</form>
</body>
</html>
js File
function x() {
alert('');
return false;
}
this is my HTML generated File
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<script type="text/javascript" src="http://code.jquery.com/Javascript/jquery-1.4.2.min.js"></script>
<script src="Scripts/a.js" type="text/javascript"></script>
<title>
</title></head>
<body>
<form method="post" action="Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTExNTM0OTE4ODNkZI8CSkltDp/afauc6DGl2D8JvNnVI1ffgzykF0L2alVM" />
</div>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAOSROoMi8eHXeBzZ77oKwMrESCFkFW/RuhzY1oLb/NUVM34O/GfAV4V4n0wgFZHr3eJjGQabRwzK4TIMzE2tX2gN9468Yg/u6i/oj/9EvNo1w==" />
</div>
<div>
<input name="TextBox1" type="text" id="TextBox1" />
<input type="submit" name="Button1" value="Button" onclick="return x();" id="Button1" />
</div>
</form>
</body>
</html>
I also tried Similar links :
Why doesn't returning false from OnClientClick cancel the postback
In this case a handler for the one more click event was registered via jquery ..I think it is not in my case
ASP.NET OnClientClick="return false;" doesn't work
there should not be a click event handler (registered via jquery) which returns true .whats mean by that ?Does it mean that i need to remove onClick function ... i dont wanna do it
I also tried other suggested Code :
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="if (!x()) return
false;" OnClick="Button1_Click" />
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="javascript:return
x();"OnClick="Button1_Click" />
they are also not working
Plese suggest
This worked for me...
.aspx page
<asp:Button id="btn" runat="server" Text="Button" onclientclick="if (!x()) { return false; }" onclick="btn_Click" />
<script type="text/javascript">
function x() {
return false;
}
</script>
Reference Help
Update from an external javascript file working code
external.js
function x() {
var result = confirm("Sure");
if (result)
return true;
else
return false;
}
.aspx page
<form id="form1" runat="server">
<asp:Button id="btn" runat="server" Text="Button" onclientclick="if (!x()) { return false; }" onclick="btn_Click" />
</form>
<script src="external.js" type="text/javascript"></script>
Hope it helps..!!
You can also put all the code in single file. Attaching handler directly from jQuery
jQuery(document).ready(function () {
AttachDeleteButtonHandler();
});
function AttachDeleteButtonHandler() {
var btnDelete = $("div[class='page']").find("table[id$='tblButtons']").find("input[id$='btnDelete']");
btnDelete.click(
function () {
return ConfirmDelete();
}
);
}
function ConfirmDelete() {
var msg = $('div[id="hdnElements"]').find('span[onclick*="translatedMsgText"]').text();
if (confirm(msg)) {
return true;
}
else {
return false;
}
}
I read some forums and found an easier way to call a C# Method from JavaScript but it's not working. I did it in my live app and it didn't work so I took a fresh project and used the code as below:
ASPX Mark-up
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="sm" runat="server" EnablePageMethods="true"></asp:ScriptManager>
<div>
<asp:Button ID="btnMe" runat="server" OnClientClick="jsfun()" />
</div>
</form>
</body>
</html>
Javascript
<script type="text/javascript">
function jdfun() {
PageMethods.CSFun(onSucess, onError);
}
function onSucess(result) {
alert(result);
}
function onSucess(result) {
alert(result);
}
</script>
C#
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string CSFun()
{
string result = "Hey Yeah";
return result;
}
}
No Error No Exception. The Debugger is not even going into the C# code.
Can anyone help me out.
Thanks.
Edit
I didn't really know about this, but I read a little and fixed your code.
Here is the code that works:
js:
<script type="text/javascript">
function jsfun() {
PageMethods.CSFun(onSuccess, onError);
}
function onSuccess(result) {
alert(result);
}
function onError(result) {
alert(result);
}
</script>
aspx:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form2" runat="server">
<asp:ScriptManager ID="sm" runat="server" EnablePageMethods="true"></asp:ScriptManager>
<div>
<asp:Button ID="Button1" runat="server" OnClientClick="jsfun()" />
</div>
</form>
</body>
</html>
Basic Example to do the same
aspx page
<form runat="server">
<asp:ScriptManager ID="ScriptManager" runat="server"
EnablePageMethods="true" />
<fieldset id="ContactFieldset">
<label>
Your Name
<input type="text" id="NameTextBox" /></label>
<label>
Email Address
<input type="text" id="EmailTextBox" /></label>
<label>
Your Message
<textarea id="MessageTextBox"></textarea></label>
<button onclick="SendForm();">
Send</button>
</fieldset>
</form>
Page Method (.cs)
using System;
using System.Web.Services;
public partial class ContactUs : System.Web.UI.Page
{
[WebMethod]
public static void SendForm(string name, string email, string message)
{
if (string.IsNullOrEmpty(name))
{
throw new Exception("You must supply a name.");
}
if (string.IsNullOrEmpty(email))
{
throw new Exception("You must supply an email address.");
}
if (string.IsNullOrEmpty(message))
{
throw new Exception("Please provide a message to send.");
}
// If we get this far we know that they entered enough data, so
// here is where you would send the email or whatever you wanted
// to do :)
}
}
javascript function
function SendForm() {
var name = $get("NameTextBox").value;
var email = $get("EmailTextBox").value;
var message = $get("MessageTextBox").value;
PageMethods.SendForm(name, email, message,
OnSucceeded, OnFailed);
}
function OnSucceeded() {
// Dispaly "thank you."
$get("ContactFieldset").innerHTML = "<p>Thank you!</p>";
}
function OnFailed(error) {
// Alert user to the error.
alert(error.get_message());
}
I have a main page which has some pagemethod called to perform some activities. A popuppanel(popuppanel content page also have pagemethods) is used within this main page to show some details. If the same is executed multiple times (i.e., opening the popup panel many times), it is working in all other browsers other than IE9 (working even in IE8). However, first time execution is successful. The code that is being used is provided below.
Scriptmanager used as follow:
<ajaxToolkit:ToolkitScriptManager runat="server" ID="TSCM1" EnablePageMethods="true" />
Script In Main Page:
function Clkd(){
var ppnl=document.getElementById("if1");
ppnl.src="Test1.aspx";
$find('<%= MPE.ClientID %>').show();
}
function Clkd2(){
var ppnl=document.getElementById("if1");
ppnl.src="";
$find('<%= MPE.ClientID %>').hide();
}
$(document).ready(function(){
PageMethods.mainPageMethod("MainTest",cbackfn);
});
function cbackfn(str){
alert(str);
}
Page method:
[System.Web.Services.WebMethod(EnableSession = true)]
public static string mainPageMethod(String mainStr)
{
return mainStr + " Ok";
}
Test1.aspx page Details (this is the page loaded inside the popup panel):
Script code below :
$(document).ready(function(){
PageMethods.Testpm("Test",fnd);
});
function fnd(str){
alert(str);
}
Page method:
[System.Web.Services.WebMethod(EnableSession = true)]
public static string Testpm(String alrt)
{
return "Ok";
}
The following error is thrown if the same is executed the second time (in IE9 only)
SCRIPT5007: Unable to set value of the property '_UpdateProgress': object is null or undefined
ScriptResource.axd?........
SCRIPT5007: Unable to get value of the property 'WebServiceProxy': object is null or undefined
Test1.aspx, line 66 character 1
SCRIPT5007: Unable to get value of the property 'DomElement': object is null or undefined
ScriptResource.axd?......, line 2 character 18851
SCRIPT5007: Unable to get value of the property 'add_init': object is null or undefined
Test1.aspx, line 97 character 122
SCRIPT438: Object doesn't support property or method 'Testpm'
Test1.aspx, line 11 character 4
Important Note: if main page does not have any pagemethods then its working fine.
please help me out from this issue..
You should have added relevant HTML, that might have helped others to help you out.
Well I used your code and added missing code and when I runt it, it is working fine in all browsers including IE9.
Please find below code:
Main Page (Default.aspx):
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
function Clkd() {
var ppnl = document.getElementById("if1");
ppnl.src = "test.aspx";
$find('<%= MPE.ClientID %>').show();
}
function Clkd2() {
var ppnl = document.getElementById("if1");
ppnl.src = "";
$find('<%= MPE.ClientID %>').hide();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<cc1:ToolkitScriptManager runat="server" ID="scriptmanager1">
</cc1:ToolkitScriptManager>
<asp:Panel ID="pnl1" runat="server">
<iframe id="if1"></iframe>
<asp:Button ID="btnHidePopup" runat="server" Text="Hide" />
</asp:Panel>
<asp:Button ID="btnShowPopup" runat="server" Text="Show" OnClientClick="Clkd();" />
<cc1:ModalPopupExtender ID="MPE" runat="server" TargetControlID="btnShowPopup" PopupControlID="pnl1"
DropShadow="true" OkControlID="btnHidePopup" OnOkScript="Clkd2()" CancelControlID="btnHidePopup">
</cc1:ModalPopupExtender>
</form>
</body>
Test.aspx:
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
PageMethods.Testpm("Test", fnd);
});
function fnd(str) {
alert(str);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<cc1:ToolkitScriptManager runat="server" ID="scriptmanageriframe" EnablePageMethods="true">
</cc1:ToolkitScriptManager>
Hello World this is game.
</div>
</form>
</body>
Test.aspx.ce (Webmethod):
[System.Web.Services.WebMethod(EnableSession = true)]
public static string Testpm(String alrt)
{
return "Ok";
}
I hope it helps!
U can try with different popUp
for Example:
asp:ModalPopupExtender also available in ajaxtoolkit
jquery dialog popup.
I will prefer you to go with jquery dialog popup instead of ajaxpopup panel using the same web method in c# and jquery code you have written.
Use ClientIdMode="Static" on the MPE and use MPE id directly in $find().
ASPX Code:
<asp:ModalPopupExtender ID="modalpopup" ClientIDMode="Static" runat="server" CancelControlID="btnCancel"
OkControlID="btnOkay" TargetControlID="Button1" PopupControlID="Panel1"
Drag="true" >
</asp:ModalPopupExtender>
Javscript code:
$find('modalpopup').show(); // to show popup
$find('modalpopup').hide(); // to hide popup
IE9 has problem with pagemethods while having pagemethods in bothpage (mainpage,popuppanelpage).
you can use pagemethods in webservice(.asmx) file
i tried like below:
defaultpage.aspx
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
function fnd123(str){
alert(str);
}
function objFailed1(data) {
fnd123(data);
}
function objGot1(data) {
fnd123(data.d);
}
function Clkd(){
var ppnl=document.getElementById("if1");
$.ajax({
url: "Testser.asmx/GetData",
contentType: "application/json; charset=utf-8",
dataType: "json",
data:'{"FileName":"Data from default page"}',
type: 'POST',
success:objGot1,
error: objFailed1
});
ppnl.src="Test1.aspx";
$find('MPE').show();
}
function Clkd2(){
var ppnl=document.getElementById("if1");
ppnl.src="";
$find('MPE').hide();
//PageMethods.clearPageData("/Test1.aspx",fnd1);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager runat="server" ID="ToolkitScriptManager1" EnablePageMethods="true" EnablePartialRendering="false"/>
<div>
<input type="button" onclick="javascript:Clkd();return false;" value="Click" />
<div>
<asp:ModalPopupExtender ID="MPE" PopupControlID="popupPanel" PopupDragHandleControlID="popupPanel"
runat="server" Enabled="True" TargetControlID="btnOk" CancelControlID="BtnCancel"
BackgroundCssClass="PopupBackground" Drag="True" EnableViewState=true >
</asp:ModalPopupExtender>
<asp:Button Style="display: none" ID="BtnOk" runat="server"></asp:Button>
<asp:Button Style="display: none" ID="BtnCancel" runat="server"></asp:Button>
</div>
<div>
<asp:Panel ID="popupPanel" runat="server" Style="overflow: hidden; z-index: 100000;
display: none; background-color: White; filter: alpha(opacity=100); opacity: 1.0;
height: auto;">
<asp:Panel ID="pnlLoginHeader" runat="server" CssClass="" Style="display: none;">
<table width="100%">
<tr style="text-align: center">
<td style="width: 97%;">
<p class="popupTitle">
<asp:Label runat="server" ID="lblTitle" Text=""></asp:Label>
</p>
</td>
<td style="width: 3%;">
<p style="text-align: right;">
<span id="lblPopupClose" style="cursor: pointer; color: White">Close</span>
</p>
</td>
</tr>
</table>
</asp:Panel>
<iframe id="if1" src="" class="" style=""></iframe>
</asp:Panel>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click"
Text="Redirect" />
</div>
</div>
</form>
</body>
Test1.aspx
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script language="javascript" type="text/javascript">
function fnd(str){
alert(str);
}
function objFailed1(data) {
fnd(data);
}
function objGot1(data) {
fnd(data.d);
}
function Clkdwebservice(){
$.ajax({
url: "Testser.asmx/GetData",
contentType: "application/json; charset=utf-8",
dataType: "json",
data:'{"FileName":"Data from test page"}',
type: 'POST',
success:objGot1,
error: objFailed1
});
}
</script>
</head>
<body>
<form id="form1" runat="server" enableviewstate="false">
<asp:ToolkitScriptManager runat="server" ID="ToolkitScriptManager1" EnablePageMethods="true" />
<div>
<input type="button" onclick="javascript:Clkdwebservice();return false;" value="Click" />
<input type="button" onclick="javascript:parent.Clkd2();return false;" value="Close" />
</div>
</form>
</body>
Testser.asmx.cs
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
[ToolboxItem(false)]
public class Testser : System.Web.Services.WebService
{
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public String GetData(String FileName)
{
string msg = FileName;
return msg;
}
}
its working fine for me.please check it
I am using jQuery to set some values in hidden fields, which are being set perfectly.
But the problem is hidden fields don't show me the values until I submit the form.
Is there away to get at the values before the form is submitted.
<script language="JavaScript" src="http://j.maxmind.com/app/geoip.js"></script>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#hdnCountryCode").val(geoip_country_code());
$("#hdnCountyName").val(geoip_country_name());
$("#hdnCity").val(geoip_city());
$("#hdnRegionCode").val(geoip_region());
$("#hdnRegion").val(geoip_region_name());
$("#hdnLatitude").val(geoip_latitude());
$("#hdnLongitude").val(geoip_longitude());
});
</script>
<body>
<form id="form1" runat="server">
<asp:HiddenField runat="server" ID="hdnCountryCode" />
<asp:HiddenField runat="server" ID="hdnCountyName" />
<asp:HiddenField runat="server" ID="hdnCity" />
<asp:HiddenField runat="server" ID="hdnRegionCode" />
<asp:HiddenField runat="server" ID="hdnRegion" />
<asp:HiddenField runat="server" ID="hdnLatitude" />
<asp:HiddenField runat="server" ID="hdnLongitude" />
<asp:Button runat="server" ID="btnV" Text="s" onclick="btnV_Click" />
<%
Google.Values Send = new Google.Values();
Send.CountryName = hdnCountyName.Value;
Send.CountryCode = hdnCountryCode.Value;
Send.RegionName = hdnRegion.Value;
Send.RegionCode = hdnRegionCode.Value;
Send.City = hdnCity.Value;
Send.Latitude = hdnLatitude.Value;
Send.Longitude = hdnLongitude.Value;
%>
</form>
</body>
With the code above the values of the hidden fields when passing to the properties of my class is giving me "". But when I use button click event same code returns me all the values which i need
To get the values you need to get the rendered id, and this is done like:
$("#<%=hdnCountryCode.ClientID%>").val(geoip_country_code());
You can see this code:
<head>
<title>Test</title>
<script language="JavaScript" src="http://j.maxmind.com/app/geoip.js"></script>
<script language="JavaScript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var countryCode = geoip_country_code();
var countryName = geoip_country_name();
$('#countryCode').html(countryCode);
$('#countryName').html(countryName);
});
</script>
</head>
<body>
<p>
CountryCode: <span id="countryCode">countryCode</span>
<p>
<p>
CountyName: <span id="countryName">CountyName</span>
<p>
</form>
</body>
</html>