[英]call Ajax JQuery on asp:Button OnClientClick and disable page reload if pointer goes to IF condition of Ajax JQuery
I have a asp:Button (named as "Save") in a Web Page. 我在网页中有一个asp:Button(名为“保存”)。 It has separate code for CommandName and CommandArgument defined in a class(.cs) file, to save records.
它具有在类(.cs)文件中定义的CommandName和CommandArgument的单独代码,以保存记录。
It also has a OnClientClick event code. 它还具有OnClientClick事件代码。
HTML: HTML:
<asp:Button ID="btnSave" runat="server" Text="Save" CommandName="Update"
OnClientClick="saveButtonClick();" CommandArgument="Save" />
Now, When I try to use OnClick event of this button, the OnClick code does not work. 现在,当我尝试使用此按钮的OnClick事件时,OnClick代码不起作用。 I think its due to CommandName and CommandArgument or OnClientClick code, already defined on this button but im not sure why its not working.
我认为这是由于CommandName和CommandArgument或OnClientClick代码已在此按钮上定义的,但我不确定为什么它不起作用。
Since, the onClick event is not working, so I thought to write the logic of onClick through Ajax JQuery and then I want to call this Ajax JQuery inside pre-defined function of Javascript called onClientClick of this button. 由于onClick事件无法正常工作,因此我想通过Ajax JQuery编写onClick的逻辑,然后在此按钮的名为onClientClick的Javascript预定义函数中调用此Ajax JQuery。
ie, inside saveButtonClick();
即,在
saveButtonClick();
内部saveButtonClick();
function of Javascript code JavaScript代码功能
JavaScript: JavaScript:
<script tyep="text/javscript">
function saveButtonClick() {
//code
}
</script>
Current Ajax JQuery Code: 当前的Ajax JQuery代码:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/json2/0.1/json2.js"></script>
<script type="text/javascript">
function saveButtonClick() {
var chk = {};
chk.requestID = $("[id*=TempGUID]").text();
alert(chk.requestID);
chk.barCode = $("[id*=txtBarcodeNumber]").val();
alert(chk.barCode);
$.ajax({
type: 'POST',
url: "IPRForm_EditCheck.aspx/CheckDuplicate",
data: '{chk: ' + JSON.stringify(chk) + '}',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (data) {
var val = data.d;
alert(val);
if (val == true) {
alert("Barcode Number already exist in system database.");
}
else {
alert("Barcode Number does not exist");
}
},
error: function (data) {
alert(data.responseText);
},
});
return false;
}
</script>
Requirement is When I click on asp:Button, it triggers the onClientClick event and go to saveButtonClick()
function of Javscript, inside this function it calls the Ajax JQuery. 要求是,当我单击asp:Button时,它会触发onClientClick事件并转到Javscript的
saveButtonClick()
函数,在此函数内它将调用Ajax JQuery。
Now, in Ajax JQuery, if pointer goes to IF condition then an alert should come and page should not reload , but if it does not goto IF condition, page should reload (as previous default behavior). 现在,在Ajax JQuery中,如果指针进入IF条件,则应该发出警报并且页面不应该重新加载 ,但是如果不进入IF条件,则页面应该重新加载(作为以前的默认行为)。
I hope I made my requirement clear to you all. 我希望我向大家明确我的要求。
Please note that I am new in asp.net and Ajax JQuery. 请注意,我是asp.net和Ajax JQuery的新手。
Thanks in advance 提前致谢
function saveButtonClick() {
var chk = {};
chk.requestID = $("[id*=TempGUID]").text();
alert(chk.requestID);
chk.barCode = $("[id*=txtBarcodeNumber]").val();
alert(chk.barCode);
$.ajax({
type: 'POST',
url: "IPRForm_EditCheck.aspx/CheckDuplicate",
data: '{chk: ' + JSON.stringify(chk) + '}',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
async:false,//here I am not allowing event to go further until it checks the barcode existance
success: function (data) {
var val = data.d;
alert(val);
if (val == true) {
alert("Barcode Number already exist in system database.");
return false;
}
else {
return true;
}
},
error: function (data) {
alert(data.responseText);
},
});
}
and update as following: 并更新如下:
<asp:Button ID="yourid" UseSubmitBehavior="false"
OnClientClick="return saveButtonClick()"
runat="server" />
Explanation: See, you don't want to trigger the server side code unless bar-code not exists in the database. 说明:请参见,除非数据库中不存在条形码,否则您不希望触发服务器端代码。 I have used method Preventing default behavior of button to prevent triggering server-side code.
我已经使用了防止按钮的默认行为的方法来防止触发服务器端代码。 if bar-code doesn't exists than it will trigger the default behavior of the button.
如果条形码不存在,则它将触发按钮的默认行为。
Let me know if it doesn't works. 让我知道它是否无效。
change your button code like this 像这样更改您的按钮代码
<asp:Button ID="yourid" UseSubmitBehavior="false"
OnClientClick="return saveButtonClick()"
runat="server" />
JS code: JS代码:
function saveButtonClick()
{
if(condition fails)
return false
else
return true
}
EDIT:3 updated JS code,At last I found that async calls cannot return a value, beacuse your code will not stop execution whether you have response from your service or not..please use this solution ,only if you like it..please keep in mind that this is a SYNCHRONOUS call .... 编辑:3更新的JS代码,最后我发现异步调用无法返回值,因为无论您的服务是否响应,您的代码都不会停止执行..请仅使用此解决方案。请记住,这是一个SYNCHRONOUS调用...。
<script type="text/javascript" src="http://cdn.jsdelivr.net/json2/0.1/json2.js"></script>
<script type="text/javascript">
function saveButtonClick() {
var result = true;
var output = $.ajax({
type: 'POST',
url: "Default.aspx/SaveUser",
contentType: 'application/json; charset=utf-8',
dataType: 'json',
async: false
}).responseText;
var obj = jQuery.parseJSON(output);
if(obj.d) {
alert("Barcode Number already exist in system database.");
result = false;
}
else {
alert("entering database");
}
alert(result);
return result;
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.