This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Detecting Unsaved Changes using JavaScript
My Web application has 3 web forms ,I implemented the validations in my webpage.I want to implement isdirty functionality in my web application.I want to pop up a message box in my webpage when a user clicks on sign out(which is a loginstatus control) if there any changes made to the form.
Environment:
Asp.net
VS2008
c#
This could be easily done with jquery and the onbeforeunload event. Using the .serialize() function you could calculate the state of the form on the returned string once when the page loads and then in the onbeforeunload event. Then compare the two values and if they are different something indeed has changed in the form.
Example:
<%# Page Language="C#" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript">
var data = '';
$(function () {
data = $('form').serialize();
});
window.onbeforeunload = function () {
if ($('form').serialize() !== data) {
return 'You have unsaved changes. Are you sure you want to navigate away?';
}
};
</script>
</head>
<body>
<form id="Form1" runat="server">
<asp:TextBox ID="FirstName" runat="server" />
<asp:TextBox ID="LastName" runat="server" TextMode="MultiLine" />
<asp:CheckBox ID="Chk" runat="server" />
<asp:HyperLink ID="Link" runat="server" Text="Go to Google" NavigateUrl="http://www.google.com" />
</form>
</body>
</html>
Some other techniques (like the one presented in the duplicate question that was voted to close for your question) involve in subscribing for the .change() event of the input elements but they are less reliable as the user could for example type abc in some input field and then delete it and if you used this technique the form would be considered as dirty although no value actually changed.
You can easily setup a popup/modal window to show-up when the user tries to leave a form/page. Here is a quick pure javascript example, that shows a message when you try to leave a page.
<body onunload="if (confirm('Save form ?')) { SaveFormMethod(); }">
If you need a better example, you should provide more details and show us your code.
Please take a look at this answer and see if it helps
Related
I am following the steps as detailed here: https://github.com/Microsoft/BotFramework-WebChat to implement Microsoft Bot Framework (in C# SDK). I have tested it on a standalone page and it is working fine. I require to use the DirectLine version as I have to pass values from webpage to the bot (for user initalization).
However, the page where I have to implement this is an ASP.NET WebForms (using ScriptManager and AJAXToolkit).
The issue arises when using the bot. By typing any content in the chat window and pressing enter, the whole page refreshes and the bot reinitailizes to start. This makes the bot unusable.
I am guessing that the chat control's "Send" button is somehow triggering a postback via ScriptManager causing the whole page to refresh. I had to include e.preventDefault() on the click event of the button that shows the chat window to take care of this situation. I am lost when it comes to within the Directline chat control.
Can someone help?
The issue arises when using the bot. By typing any content in the chat window and pressing enter, the whole page refreshes and the bot reinitailizes to start. This makes the bot unusable.
I have same issue when I embed my bot in webform page (.aspx), to solve this problem, I put the chat bot container <div id="mybot" /> inside UpdatePanel control and set ChildrenAsTriggers property to false, which works for me, you can try it.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
<script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<div id="mybot" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
<script>
BotChat.App({
directLine: { secret: 'directline_secret_here' },
user: { id: '1234', firstname: 'firstname_here', lastname: 'lastname_here' },
bot: { id: 'fehantestbot' },
resize: 'detect'
}, document.getElementById("mybot"))
</script>
Screenshot of my test:
I had this issue when trying to build this into a DNN module.
Prevented it by inserting e.preventDefault to onKeyPress function in the Shell.tsx file in the BotFramework-WebChat project, and rebuilding it.
BotFramework-WebChat\src\Shell.tsx:
//...
private onKeyPress(e: React.KeyboardEvent<HTMLInputElement>) {
if (e.key === 'Enter') {
e.preventDefault(); //new line: prevent page reload
this.sendMessage();
}
}
//...
Use this code to prevent page refresh while sending chat from direclineJS webchat:
$(document).keypress(function (e) {
if (e.keyCode === 13) {
e.preventDefault();
return false;
}
});
I am working on a project in C# .NET that allows me only one form in the .aspx file.
<form id="form1" runat="server" action="#1">
How can I change the form action through the C# code in a method?
I have tried this:
protected void Button1_Click(object sender, EventArgs e)
{
form1.Action = "#2";
}
but it didn't work. Thanks in advance...
Based on the comments to you question. asp:Panel Controls could help you out.
A very rough example
ASPX:
<form id="form1" runat="server">
<asp:Panel id="Form1" runat="server">
<!-- Form 1 Stuff -- >
<asp:Button ID="Button1" runat="server" Text="Submit"
OnClick="Button1_Click" />
</panel>
<asp:Panel id="Form2" runat="server" Visible="false">
<!-- Form 2 Stuff -- >
<asp:Button ID="Button2" runat="server" Text="Submit"
OnClick="Button2_Click" />
</panel>
</form>
C#
protected void Button1_Click(object sender, EventArgs e)
{
//HIde "Form"1
Form1.Visible = false;
//Show "Form"2
Form2.Visible = true;
//Do other stuff
}
protected void Button2_Click(object sender, EventArgs e)
{
//Do Final Processig
}
Also look at the DefaultButton property of the Panel
(Moving this to the top because it's an answer to the newly understood question. It's not how to change the form action, but how to have multiple forms.)
If you want a server form on a page that already has a server form then perhaps that second "form" should be a User Control. That way it sits inside the host page's server form but doesn't require its own form. And it's self-contained, able to contain whatever logic it needs when handling a postback.
Here's an example of a simple User Control. You can create one from Add > New Item > Web > Web Forms User Control.
<%# Control Language="C#" AutoEventWireup="true"
CodeBehind="OtherForm.ascx.cs" Inherits="WebApplication1.OtherForm" %>
<label for="<% = OtherFormTextInput.ClientID %>">
This is some other form on the same page
</label>
<asp:TextBox runat="server" ID="OtherFormTextInput"></asp:TextBox>
<asp:Button runat="server" ID="Submit" Text="Submit this other form"/>
It looks like an .aspx page but it has no form. It can still have its own code behind which can interact with with the other server controls it contains, just like an .aspx page would.
Then you add that control to your "main" page:
<%# Page Language="C#" AutoEventWireup="true"
CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!-- Register the user control -->
<%# Register TagPrefix="uc" TagName="other" Src="~/OtherForm.ascx" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<!-- This form has its own stuff, but also contains the "other" form. -->
<uc:other runat="server" ID="TheOtherForm"></uc:other>
</form>
</body>
</html>
I recommend this over using panels (which still works) because if you're putting two forms on one page, it's likely that you might at some point want to move the secondary form to another page or re-use it. This approach keeps it completely self-contained. Its code-behind isn't in the same file as the the .aspx page. You can place this on as many pages as you want.
Original "literal" answer which addresses the question as originally understood.
The runat="server" form exists entirely for the purpose of allowing ASP.NET to interact with the page and its server controls during postbacks. It's central to the way webforms works. If you change the action then technically what you have isn't a webforms page any more.
That's fine (I don't even like webforms) but it can lead to some weird behavior. If you have controls that trigger postbacks then normally they'd be handled on the same page and your user would just see a (hopefully) fast refresh. Now they might get sent to another page.
What if you just removed that form entirely and added your own form instead? Then your .aspx page will just behave more like an .html page.
Having added all the disclaimers about why not to do it, you can change the action using JavaScript. Here's a sample:
<%# Page Language="C#" AutoEventWireup="true"
CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server" ClientIDMode="Static">
<asp:Button runat="server" text="Causes postback"/>
<asp:CheckBox runat="server" AutoPostBack="True"/>
</form>
<script>
document.getElementById("form1").action = "http://stackoverflow.com";
</script>
</body>
</html>
Some browsers might not allow changing the form's action.
I put the checkbox there just for fun (I must be really bored) to show the odd side effects it could have, that you might click on a checkbox and get redirected to a different page.
You can write a response.write() in your Asp.net side that print some javascript or jQuery code! As #Scott Hannen wrote some javascript like this :
Response.Write("<script>document.getElementById('YOURFORMID').action = 'YOUR URL';</script>");
or with jQuery
Response.Write("<script>$('#YOUR FORM ID').attr('action', 'YOUR URL');</script>");
btw if you have access to .html or .js files u can directly put this jQuery code without any C# code!
I am having page in that when we click on create button its sends web request to get the all links but mean while it takes some time to get all links working or not so at that time I want to put image load
Button ID="btnRender" runat="server" Text="Page Render" OnClick="btnRender_Click" />
<asp:Button ID="btn_submit" runat="server" Text="Submit" OnClientClick="javascript:finda();" />
<asp:Button ID="btn_createlink" runat="server" Text="Create link" OnClick="btn_createlink_Click" />
i want to call on btn_createlink_Click" button when user clicks the image or text should appear
Without Ajax Tool:
This will call the loading image on button click and hide the image on page load completes.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title></title>
<script type="text/javascript">
function ShowProgressBar() {
document.getElementById('dvProgressBar').style.visibility = 'visible';
}
function HideProgressBar() {
document.getElementById('dvProgressBar').style.visibility = "hidden";
}
</script>
</head>
<body onload="javascript:HideProgressBar()" >
<form id="form1" runat="server">
<div>
<div style="float:left;">
<asp:Button ID="btn_createlink" runat="server" Text="Create link" OnClick="btn_createlink_Click" OnClientClick="javascript:ShowProgressBar()" />
</div>
<div ID="dvProgressBar" style="float:left;visibility: hidden;" >
<img src="/images/progress_bar.gif" /> resolving address, please wait...
</div>
<br style="clear:both" />
</div>
</form>
</body>
</html>
You can make this happen with the help of Multithreading with the BackgroundWorker Component.
Have a look on Multithreading with Backgroundworker
Backgroundworker
C# backgroundworker
and this
You can call your loading.gif image in _Dowork method. Hope this helps.
EDIT:
You might want to have a look at HttpResponse.Flush
Forces all currently buffered output to be sent to the client. The Flush method can be called multiple times during request processing.
See the following link: HttpResponse.Flush Method
You could show a loading image and call this method every X number of loaded links.
OLD:
Since the question is missing information, I will assume that you are doing an Ajax call in order to get a collection of links from the server and update a table.
I would suggest you to use jQuery and follow this previous answer on SO in order to display an animated loading spinner when a request is made and hide it when it is completed.
See the link: Jquery Ajax Loading image
KeyPress or KeyDown events aren't available in System.Web.UI.WebControls.TextBox so one way to do it is using Java-Scripts, but want to fire some Sql queries at these events. is it possible to execute Sql queries from JavaScript? if not then how do I do it?
No, You cannot execute SQL from javascript. Your best bet is to use something like jquery and wire up an event to .change() (or something simiiar) and then make an ajax request to perform the sql query. A server side event (which doesn't exist) for textbox key press or key down would submit the page everytime and that just wouldn't work for the user. You might look into jquery ui autocomplete if you're looking to display some information
If you need to capture key events, you'll need to use Javascript.
You can use ajax to then send these keys to the server and perform actions.
My guess is that you're thinking of something along the lines of Google Suggest.
You can handle the key press event in the given way
But you can't fire SQL queries in these events.
<%# Page Language="C#" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
Label1.Text = "Start";
}
TextBox1.Attributes.Add("onkeyup", "rewriteLabel()");
}
</script>
<script type="text/javascript">
function rewriteLabel()
{
TextBox1.Text = Label1.text;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
<title >test</title>
</head>
<body>
<form id="form1" runat="server">
<br />
<asp:TextBox ID="TextBox1" runat="server" /><br />
<asp:Label ID="Label1" Runat="server" BorderWidth="1px" />
</form>
</body>
</html>
I am dynamically generating a file from server based on user input. I need to provide a download button which, upon clicking, downloads a file to the user's file system.
Also, the user might click the same button twice, upon which the file should download again.
The dynamic generation of file rules out the HttpResponse.TransmitFile() option, which suports mutliple download.
Almost every other option I have come across needs Response.End() to be invoked, which prevents a second download.
How do I satisfy the 'multiple download" requirement?
Read up on Virtual Path providers, which might enable me to use TransmitFile(), but that looks like an overkill for such a simple requirement.
You could try either of the following:
Re-Generate the file each the user clicks download.
Save the file to disk, and stream it from there.
Got the answer from here:
http://www.eggheadcafe.com/tutorials/aspnet/3889fc21-1562-4d1b-89e4-cea5576690b2/refresh-web-pages-after-d.aspx
Basically it uses a client side script to reload the page after a download:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript" language="javascript">
var isReload = false;
function DownloadFiles()
{
if(isReload == true)
{
isReload = false;
window.location.reload();
}
else
{
isReload = true;
}
window.setTimeout("DownloadFiles()", 2000);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label runat="server" ID="lblMsg"></asp:Label>
<asp:Button ID="Button1" runat="server" Text="Download" OnClientClick="DownloadFiles();" OnClick="Button1_Click"/>
</div>
</form>
</body>
</html>