How to put loading image when something is processing? - c#

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

Related

Browser crash detection server side c#

As when browser or page crashes I need to detect it in the server-side what I actually found is this solution so far when the browser closes it reads as below.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebApplication2010.WebForm3" %>
<%# Register Assembly="AjaxControlToolkit, Version=3.0.30512.17815, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"
Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!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>Handling Browser Close Event at Server Side: ASP.NET</title>
</head>
<body onunload="deleteRecord();">
<script type="text/javascript" language="javascript">
function deleteRecord() {
//this method will call server-side method
PageMethods.deleteRecord();
}
</script>
<form id="form1" runat="server">
<div id="div1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
Click on Close Button
</div>
</form>
</body>
</html>
This is the client page above and the server code is below written.
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public static void deleteRecord()
{
// You can write any logic you want to perform when the browser is getting closed
System.Diagnostics.Debug.Write("You can write your logic here");
}
Here is the excerpt which I used - https://www.dotnetspider.com/resources/30715-Handling-Browser-Close-Event-at-Server-Side.aspx
Any suggestions might help out in this browser crash context.
Check the comments below the post
Not only onunload will be called on browser closed, It will also be called whenver postback your page.
Therefore the deleteRecord() method will be called for all postback.
Also onunload will be fired twice when you click link buttons.
You can also not be sure that anything will run on crash. If an exception is thrown on the browser, there is no crash event that is raised. More often than not a crash will stop the javascript altogether, so no ajax will run.
Best bet for client side errors is to use something like application insights to send error telemetry on javascript errors.
Check client side monitoring here: https://learn.microsoft.com/en-us/azure/azure-monitor/app/asp-net#add-client-side-monitoring

using html tag and elements in text box leads to error: A potentially dangerous Request.Form value was detected from the client

i want to convert my html file to pdf in that process i took all html tags and elements into an asp textfield on button click its giving the above error
code is
code.aspx
<asp:TextBox ID="TxtHtmlCode" CausesValidation="false" runat="server" Width="90%" Text="" TextMode="MultiLine" Height="150px"></asp:TextBox>
<asp:Button ID="BtnCreatePdf" runat="server" Text="Create PDF" OnClick="BtnCreatePdf_Click" CssClass="mybutton" />
code.aspx.cs
protected void BtnCreatePdf_Click(object sender, EventArgs e)
{
htmlString = TxtHtmlCode.Text;
HtmlToPdf converter = new HtmlToPdf();
PdfDocument doc = converter.ConvertHtmlString(htmlString);
doc.Save(Response, false, "Sample.pdf");
doc.Close();
}
i check with breakpoints even its not going to button click function.
please help me..
You want to use HTML editor like opensource ckeditor.
It'll basically encode and decode html elements when you post the page back to server.
<%# Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<CKEditor:CKEditorControl ID="CKEditor1" BasePath="/ckeditor/" runat="server">
</CKEditor:CKEditorControl>
<asp:Button ID="BtnCreatePdf" runat="server" Text="Create PDF"
OnClick="BtnCreatePdf_Click" CssClass="mybutton" />
</form>
</body>
</html>
FYI: I personally do not like to use validateRequest="false"; it'll end up creating security hole.
Inside of your web.config you'll want to do:
<HttpRuntime requestValidationMode="2.0" />
Your other option, is to also append to your page directive at the top of your .aspx and apply:
<#Page ... validateRequest="false" %>
Keep in mind, by adding to web.config it will affect your entire site, compared to the page directive. However, by adding this to your application, you obviate some built in security that Microsoft utilizes in the Web-Forms Framework.

How to change the form action in C# .NET through code?

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!

How to place this java script function in an external file for user control?

I have a user control called header.aspx. In my user control if I do this it will work.
<script type="text/javascript">
function greeting(){
Alert("hi");
}
</script>
<asp:button id="button1" OnClientClick="greeting" /> </asp:button>
I am using this user control in a page called default.aspx. I tried using src="~scripts/foo.js". If I do that it does not work. The question is pretty simple I guess. How would I call a java script function in a user control which is stored in an external location( not in the page. Located in the scripts folder). Thanks in advance.
As I can understand this is clearly a path issue.
Just follow these steps might help you.
Create a .js file first. Put your code and save it in the folder you want it to.
Now Drag and Drop the js file inside the head section of your html code from the Solution Explorer window. This will give you the correct path for the js file.
The above steps is what I follow, when I create an external js file for my controls.
Also make sure you call your function in this manner also suggested by others Else your function won't get call:
<asp:button id="button1" OnClientClick="greeting();" /> </asp:button>
Just use the code below:
<script src="<%: ResolveUrl("~/Scripts/foo.js") %>"></script>
Script: test.js
function greeting() {
alert("hi");
return false;
}
user control: <asp:Button ID="button1" OnClientClick="return greeting()" runat="server" Text="click" />
Page:
<head runat="server">
<title></title>
<script src="test.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:temp ID="temp" runat="server" />
</div>
</form>
</body>
</html>
This should work now.
<asp:button id="button1" OnClick=" javascript : greeting();" /> </asp:button>
try to use it. havent trie but i think it should work.
First of all you need to create a seprate javascript file and then add this in your page in this way. add this tag in the tag of your page.
use
OnClientClick="greeting()"
you missed "()" in OnClientClick="greeting"
Please see the whole html code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="scripts/foo.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:button id="button1" runat="server" OnClientClick="greeting()" Text="hit" />
</div>
</form>
</body>
</html>
Thanks.
External javascript file reference:
<script src="yourpath/yourfilename.js"></script>
Button Control
<asp:Button ID="button1" OnClientClick="greeting();" runat="server" Text="click" />

ASP.NET page should not post back the whole page on Submit

I have an ASP.NET page with a Submit button. When I click the button my code runs and then the page reload/refresh....the whole page gets posted back.
What must I use or do to prevent the page from reload? AJAX? How would this be done?
Code examples would be great!
Check the below code with AJAX and Without AJAX
Case 1 With AJAX
In this we added following controls
1. Script Manager
2. Ajax Update Panel with Trigger and Content Template
3. Button
In this case, you will notice that on clicking the button, the controls which are outside the Update Panel will not be updated. That means controls inside the Update Panel will be updated on clicking the button. That means complete page will not be refreshed. I hope this fulfill your requirement....
Output
Date outside the update panel will not be updated and date inside the update panel will only be updated because it is inside the update panel so complete page will not be refreshed.
Source Code
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div>
<%=DateTime.Now %>
<br />
<asp:ScriptManager ID="scr" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="Upd" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<%=DateTime.Now %>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btn" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:Button ID="btn" runat="server" Text="Click Me" />
</div>
</form>
</body>
</html>
Case 2 Without AJAX
The below case will also update the date but this time page will be refreshed completely due to absence of Update Panel
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div>
<%=DateTime.Now %>
<asp:Button ID="btn" runat="server" Text="Click Me" />
</div>
</form>
</body>
</html>
Hope this article will help you understand the quick basics
If you don't want the page to reload, you should take a look at the UpdatePanel Control: http://msdn.microsoft.com/en-us/library/system.web.ui.updatepanel.aspx
If you want to avoid that your code is run again
you can do in your page_load event
If(!page.IsPostBack())
{
your code here
}
and ajax to avoid reload in jquery
with the example here
or with asp ajax panel

Categories