I'm looking for a way to trigger BlockUI from the code behind. I have server-side validations and I would not want the BlockUI to fire unless the server validations are complete.
Here's my button :
<asp:Button ID="BtnSave" runat="server" OnClick="BtnSaveUpdate_Click" Text="Save" CausesValidation="true"></asp:Button>
Code behind:
This is what I tried doing but this doesn't work:
protected void BtnSaveUpdate_Click(object sender, EventArgs e)
{
if (Page.IsValid)
{
ClientScript.RegisterStartupScript(typeof(Page), "blockui", " $.blockUI({ message: 'Saving Record...' });", true);
// remaining code...
}
}
This is my original javascript code which fires before server validation:
$(document).ready(function () {
$('#BtnSave').click(function () {
$.blockUI({
message: 'Saving Record...'
});
});
});
Related
I have a JS function (Show alert box), and have a link button in ASP page, On click event from code behind for this link button I want to call this function and then redirect to certain page.
ASP Code
<script type="text/javascript" language="javascript">
function myFunction() {
// executes when HTML-Document is loaded and DOM is ready
alert("document is ready!");
}
</script>
<div>
<asp:LinkButton ID="lnkbtnChangePassword" runat="server" Text="Change Passwrod" OnClick="lnkbtnChangePassword_Click" ></asp:LinkButton>
</div>
C# Code
protected void lnkbtnChangePassword_Click(object sender, EventArgs e)
{
ClientScript.RegisterStartupScript(this.GetType(), "CallMyFunction", "myFunction()", true);
Response.Redirect("myPage.aspx");
}
Here when I click on the link button, it simply don't display the alert box/window and redirect to the page.
You should use LinkButton.ClientClick instead of LinkButton.Click event.
Click event is handled on server. When user clicks the button, page is posted back to server and code is executed on server side.
ClientClick event is really a name of JavaScript function which should be executed.
You should probably do something like this:
<asp:LinkButton ID="lnkbtnChangePassword" runat="server" Text="Change Passwrod" OnClientClick="showMyAlertAndSubmit()"></asp:LinkButton>
<script type="text/javascript">
function showMyAlertAndSubmit(){
alert("Your password is being changed");
// submit your form
}
</script>
Why your current code doesn't work
You currently send script for showing a message, and redirect at the same time. This means that browser receives instructions to show a message and to redirect, and it redirects the user before showing the message. One approach could be to redirect from client side. For example:
protected void lnkbtnChangePassword_Click(object sender, EventArgs e)
{
ClientScript.RegisterStartupScript(this.GetType(), "CallMyFunction", "myFunction()", true);
}
and on client side
function myFunction() {
// show your message here
// do other things you need
// and then redirect here. Don't redirect from server side with Response.Redirect
window.location = "http://myserver/myPage.aspx";
}
Other options
Since you need to first perform checks on server side before saving data and redirecting, you can use ajax to call server without performing postback.
Remove Click handler, and only use ClientClick:
function myFunction() {
$.ajax({
type: "POST",
url: "myPage.aspx/MyCheckMethod",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
ShowAlert();
window.location = "http://myserver/mypage.aspx";
}
});
}
For more details please check this tutorial.
Change your code like this:
ASP Code
<script type="text/javascript" language="javascript">
function myFunction() {
// executes when HTML-Document is loaded and DOM is ready
alert("document is ready!");
}
</script>
<div>
<asp:LinkButton ID="lnkbtnChangePassword" runat="server" Text="Change Passwrod" OnClick="lnkbtnChangePassword_Click" OnClientClick="myFunction()" ></asp:LinkButton>
</div>
C# Code
protected void lnkbtnChangePassword_Click(object sender, EventArgs e)
{
Response.Redirect("myPage.aspx");
}
Change your javascript function to :
<script type="text/javascript" language="javascript">
function myFunction() {
// alert will stop js execution
alert("document is ready!");
// then reload your page
__doPostBack('pagename','parameter');
}
</script>
And call it from code-behind with this function :
protected void lnkbtnChangePassword_Click(object sender, EventArgs e)
{
//do your job here
//then call your js function
ScriptManager.RegisterStartupScript(this,this.GetType(), "CallMyFunction", "myFunction();", true);
}
What you're missing is waiting for JavaScript alert dialog to popup and then redirect to the page.
In order to do this you need to tell button to wait for JavaScript alert dialog to popup and then do the Server side work after.
ASPX:
<head runat="server">
<title></title>
<script type="text/javascript">
function alertBeforeSubmit() {
return alert('Document Ready');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button Text="Do" runat="server" ID="btnSubmit" OnClick="btnSubmit_Click" OnClientClick="return alertBeforeSubmit();" />
</div>
</form>
</body>
CS:
protected void btnSubmit_Click(object sender, EventArgs e)
{
Response.Redirect("Default.aspx");
}
I have one method in backend coding using c#. Now, I want to call it on onClick event of button using jQuery which is in design part.
Please help me to solve the problem.
Check out below code for example.
.aspx Page
$("#SubmitButton").click(function() {
// Call method BindData();
});
.aspx.cs Page
public void BindData()
{
// Code to bind datalist
}
ASPX
<script type="text/javascript">
function myFunction() {
// some stuff
return true; // important
}
</script>
<asp:Button runat="server" ID="SubmitButton"
OnClientClick="return myFunction();"
OnClick="SubmitButton_Click" />
Code-behind
protected void SubmitButton_Click(object sender, EventArgs e)
{
BindData();
}
By specifying OnClientClick you're telling your button that it should first execute the Javascript method. If the method returns false, there is no postback. However, if it returns true, the button's handler in code-behind will also be called.
if i understand right you want something like this
$("#SubmitButton").click(function() {
$.ajax({
type: "POST",
url: "index.aspx/BindData",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ }),
dataType: "json",
});
});
and make your method static and add attribute WebMethod like:
[WebMethod]
public static void BindData()
{
// Code
}
but you will not be able to change the state of server controls
in your css :
.hide
{
display:none;
}
then
<asp:Button runat="server" id="btn" onclick="btn_OnClick" CssClass="hide"/>
<div onclick="TestCall();return true;">Click Me !!</div>
<script type="text/javascript">
function TestCall()
{
var btn = $('#<%= btn.ClientID %>');
btn.click();
}
</script>
hope , helps you ;)
Add a APSBUTTON set onclick method on code behind then set CssClass to Hide means declare a style class contain display:none like this
<style>
.hide
{
display:none;
}
</style>
Button Sample :
<asp:Button ID="Button1" runat="server" Text="Button" CssClass="hide" OnClick="Button1_Click" />
JavaScript Sample :
<script type="text/javascript">
//With jQuery
$('#<%=Button1.ClientID%>').click();
</script>
that should be work for this case
good luck
Good day,
I have a aspx contain a button with ID button1, the following is my aspx code :
<div>
<asp:LinkButton ID="lnkView" CommandName="VIEW" runat="server">View</asp:LinkButton>
<asp:Button ID="button1" runat="server" Text="OK" onclick="button1_Click" />
</div>
/*
some code here
*/
<script>
function test()
{
document.getElementById("<%=button1.ClientID %>").click();
alert("hello");
return true;
}
</script>
The following is my aspx code behind:
//some code here
lnkView.Attributes.Add("onclick", "return test()");
//some code here
protected void button1_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "Javascript", "<script>alert('Record Added Successfully')</script>", false);
}
As you can see, my linkView link button have a javascript function test() when click on it.
I can alert the "Record Added Successfully" by click on the Button1.
However, when I click on linkView link button, the "Record Added Successfully" didnt alert, it only alert "Hello".
I think I am missunderstand in some programming concept.
Kindly advise.
Thanks.
This will trigger the event in code behind.
Try this in your .aspx page:
//Code:
<script type="text/javascript">
function test(parameter)
{
__doPostBack('button1_Click', parameter)
}
</script>
You can fix this by returning false instead of true as the result of the function test(). This way you will cancel default behavior of the link with ID lnkView ie sending form
I wanna redirect to another page when i call a function
here my button
<button id="test" runat="server" onclick="Button1_Click()"> Button here </button>
here my button action
protected void Button1_click(Object sender, EventArgs e)
{
int ID = 0;
Label5.Visible = false;
ID = Convert.ToInt32(GridView1.Rows[row.RowIndex].Cells[1].Text);
// somthing like
// Server.Transfer("~/Producter/Delete?id="+ id)
// OR
Response.Redirect("~/Producter/Delete?id="+ ID);
}
since you are using regular html button, when clicked, it will execute Button1_Click() on the client side, instead of in code behind.
Change the button to :
<asp:Button ID="test" runat="server" OnClick="Button1_Click" Text="Button here" />
It could be a problem with the binding of the function Button1_Click() to the button. Try checking the Button1's OnClick property to make sure it links to the function Button1_Click().
your Button1_Click function is correct, and I think the way you are calling from object is wrong.
you should either use
<asp:Button ID="btn_test" runat="server" OnClick="Button1_Click" Text="Button" />
protected void Button1_click(Object sender, EventArgs e)
{
int ID = 0;
Label5.Visible = false;
ID = Convert.ToInt32(GridView1.Rows[row.RowIndex].Cells[1].Text);
Response.Redirect("~/Producter/Delete?id="+ ID);
}
or you should use html button object and call a webmethod like below
<script>
$(document).ready(function () {
$('#test').click(function(){
$.ajax({
type: "POST",
url: "Profile.aspx/update_phone",
data: "{'ProfessionalID':''}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function () { }
});
});
});
</script>
<button id="test" runat="server"> Button here </button>
[webmethod]
public static void Button1_click(Object sender, EventArgs e)
{
....
Response.Redirect("~/Producter/Delete?id="+ ID);
}
Try this
Response.Redirect("~/Producter/Delete?id="+ ID,false);
try this;
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$('#test').on('click', function(e){
e.preventDefault();
//using jquery, you must import jquery library for it
$('#buttonHidden').click();
}
</script>
// your button here to call javascript
<button id="test" runat="server"> Button here </button>
// the hidden button just to hold the Button1_Click which is fired from fireClick()
<asp:Button ID="buttonHidden" runat="server" Style="display: none" OnClick="Button1_Click" />
also fix your code behind like this;
protected void Button1_Click(Object sender, EventArgs e)
{
int ID = 0;
Label5.Visible = false;
ID = Convert.ToInt32(GridView1.Rows[row.RowIndex].Cells[1].Text);
// somthing like
// Server.Transfer("~/Producter/Delete?id="+ id)
// OR
Response.Redirect("~/Producter/Delete?id="+ ID);
}
Page:
<body>
<form id="frmLogin" runat="server">
<asp:Button ID="btnClick" OnClientClick="openConfirmDialog();" OnClick="PopulateLabel" runat="server"/>
<div id="divDialog"></div>
<asp:Label ID="lblText" runat="server"></asp:Label>
</form>
</body>
JS
<script type="text/javascript">
$(document).ready(function() {
$("#divDialog").dialog({autoOpen: false,
buttons: { "Ok": function()
{
$(this).dialog("close");
},
"Cancel": function()
{
$(this).dialog("close");
}
}
});
});
function openConfirmDialog()
{
$("#divDialog").dialog("open");
}
C#
protected void Page_Load(object sender, EventArgs e)
{
lblText.Text = "";
}
protected void PopulateLabel(object sender, EventArgs e)
{
lblText.Text = "Hello";
}
This code opens me a dialog box with Ok and Cancel button but it do not wait for user activity and post the page immediately and the label gets populated. I need to call the c# function based on user activity. If user clicks "Ok" label should get populated and if user clicks "Cancel" it should not call the c# function. How do I achieve this?
First, to prevent the page from immediately posting back to the server, you need to cancel the default behavior of the click event by returning false from your handler:
<asp:Button ID="btnClick" runat="server" OnClick="PopulateLabel"
OnClientClick="openConfirmDialog(); return false;" />
Next, you need to perform the postback yourself when your Ok button is clicked:
$("#divDialog").dialog({
autoOpen: false,
buttons: {
"Ok": function() {
$(this).dialog("close");
__doPostBack("btnClick", "");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
Note that the first argument to __doPostBack() is the name of the control (its UniqueID in ASP.NET terminology). Since the button is a direct child of the <form> element, we can hardcode its id in the __doPostBack() call, but things will get more complicated if it resides in a container hierarchy. In that case, you can use ClientScript.GetPostBackEventReference() to generate the appropriate call to __doPostBack().
EDIT: Since your page does not contain any postback-enabled control, __doPostBack() won't be defined on the client side. To work around that problem, you can use a LinkButton control instead of a Button control.
Added another button and used the jQuery click() event to trigger new button's click event which will in turn trigger the respective event handler in C#