Opening Page In New Tab Updates Both Tabs - asp.net

I am working with two files, Default.aspx and Beta.aspx.
In Default.aspx I have a button that navigates to a Beta.aspx
<telerik:RadImageButton ID="btn26" runat="server" Skin="Material" Text="26" OnClick="btnConfirm_Click26">
</telerik:RadImageButton>
protected void btnConfirm_Click26(object sender, EventArgs e)
{
string url = string.Format("Beta.aspx?year={0}&track={1}&event={2}&car=26&session{3}", hidYear.Value, hidTrack.Value, hidEvent.Value, hidSession.Value);
Response.Redirect(url);
}
I have the Beta.aspx form tag set up like so in order to force the page to load as a new tab:
<form id="form1" runat="server" class="SmallFont" target="_blank">
The button works, and loads the page in Beta.aspx as a new tab like I had hoped for, however the Default.aspx page that the button resides on also navigates to the same URL. I want Default.aspx to always stay on the same page, what am I missing here?

To open a new tab, there is no need to do a server round-trip. You need to move your button onto a separate html form, skip the aspx code and handle the click event using (client-side) JavaScript, like this:
<form id="form2" class="SmallFont" action="Beta.aspx" target="_blank">
<input type="submit" ID="btn26" Skin="Material" Text="26" />
<input type="hidden" name="year" value="{0}" />
<input type="hidden" name="track" value="{1}" />
</form>
or this: (which might not work as-well because of popup blockers)
<input type="button" ID="btn26" Skin="Material" Text="26"
OnClick="window.open('Beta.aspx?year={0}&track={1}&event={2}&car=26&session{3}', '_blank');" />
If you don't like the old-school JavaScript, there are more-modern ways, with jQuery or other frameworks, etc. HTML button onclick event

This should be a pretty easy problem, let's put few more details out here.
There is a form on default.aspx
<form id="form1" runat="server" target="_blank">
<asp:Button ID="btn26" runat="server" OnClick="btnConfirm_Click26" Text="26" />
</form>
The target is _blank, i.e. the new window, or tab will be opened.
The code of btnConfirm_Click26() of default.aspx has redirect
protected void btnConfirm_Click26(object sender, EventArgs e)
{
string url = string.Format("Beta.aspx?year={0}&track={1}&event={2}&car=26&session{3}", 0, 1, 2, 3);
Response.Redirect(url);
}
i.e. the form of default.aspx in first tab will be submitted to a new window to the same default.aspx and then redirected (in same second tab) to beta.aspx.
default.aspx (in first tab)
--> default.aspx (in new tab) --> redirects to beta.aspx
If you have no code in Page_Load() of default.aspx, it should "stay" as-is in the first tab and will not "navigate to beta.aspx". If you have code in Page_Load(), make sure you use if (!Page.IsPostBack) to execute code only once when default.aspx is loaded (and not when it is redirected to beta.aspx).
As mentioned earlier, redirect does not require to be executed on server and can be done via client script too.

Related

Difference between button and asp:button onclick

I am new to developing in asp.net for making web sites.
What is the difference between an asp:Button and an input button?
Code 1
aspx code
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
Codebehind
protected void Button1_Click(object sender, EventArgs e)
{
//Do somthing
}
Code 2
aspx code
<input id="Submit1" type="submit" value="submit" onclick="return Submit1_onclick()" />
<script language="javascript" type="text/javascript">
// <![CDATA[
function Submit1_onclick() {
//Do somthing
}
// ]]>
</script>
The first code it is a server side code. When you add a tag asp:button in your webform, the asp.net will render an input type="button" for you and when you click this button, it will submit a post to the same page (this is called postback) and will processing the life cycle and asp.net event associated with this button. The same is valid for every server control such as TextBoxes (render input type='text'), Panels (renders divs), Checkboxes (render input type='checkbox'), Labels (render spans) etc...
In the second code, you have the code that first one will render (an input type = 'button'), but associated with an event in the client-side javascript.
You can also associate a client-side event in a tag asp:button, take a look at the OnClientClick property.
asp:Button is an asp.net server control which fire an event on the server side.
<input id="Submit1" type="submit"
is a client side button of type submit,
but it can act as a server side button as well by adding
runat="server" and onserverclick="eventname"
The first is a server side control and the event handler is executed on the server in C#. Clicking the button will cause a postback and all information in the form will be posted to the server for processing, including a call to the click event handler.
The second is fully client side and the event handler is executed in the browser in JavaScript.
to my understanding you have to keep in mind that there is a cliend side code that will execute, for example javascript in your browser, and asp/c# code that will execute on the server.
So having this control:
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
Button1_Click will execute on the server, in microsoft world it is IIS, on the other hand
you have just a pure html control, where you hook up a javascript function for the click event
<input id="Submit1" type="submit" value="submit" onclick="return Submit1_onclick()" />
So the server side has nothing to do with this part, this code will execute on your machine, in your browser.
A mí me funcionó así:
1.- En el botón:
<input type="submit" id="btnAccept" value="Log In" runat="server" onserverclick="btnAccept_Click">
2.- En el codebehind:
Protected Sub btnAccept_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)

Need some idea about upload a file using ajax

i want to upload an image on my host in my aspx page.but can i do that with ajax?(i mean,no postback done during the upload).
i look at the gmail file uploader,the classic mode used flax(this is bad idea) but i can understand about the modern mode?!!
according to my search in Google it is impossible for security reasons may be occure
some body help me about this issue."upload a file using ajax"
you can do like this.. using ajax .....
STEP 1: first create an upload form in separate page which is like this (myIframe.html)
<form method="POST" target="_self" enctype="multipart/form-data" action="main.aspx">
<input type="file" name="fileUpload" />
<input type="submit" value="UPLOAD" />
</form>
STEP 2: In main page (main.aspx), you have to put an iframe and loaded that page in it. you can also made borders invisible so it did not look like it is an iframe.
<iframe name="iUploadFrame" src="myIframe.html" frameborder="0" onload="iUploadFrameLoad();"></iframe>
Note that this is specifying onload event handler function of javascript. that one will explain it below.
STEP 3: For testing, in main.aspx and in UpdatePanel with a button and label like this:
<asp:UpdatePanel ID="pnlMain" runat="server">
<ContentTemplate>
<asp:Label id="lblMessage" runat="server" />
<asp:Button id="btnUploadComplted" runat="server" style="visibility:hidden;" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnUploadCompleted" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
Note that if you want you can hide the button using CSS style, but not setting visible=”False” attribute. This is because if you want to have the button html in the output document and would want to trigger the ajax callback via that button.
STEP 4: you can define the click event hander of the button in the codebehind like this :
protected void btnUploadCompleted_Click(object s, EventArgs e) {
lblMessage.Text = "UPLOAD PROCESS COMPLETED SUCCESSFULLY";
}
STEP :5 Now, to save file you can do write the code in the code-behind like this:
protected void Page_Load(object s, EventArgs e) {
if ((Request.Files.Count == 1)) {
// process to save file
Response.Write("SUCCESS");
Response.End();
}
}
STEP:6 Now all that we need to do is create javascript function to integrate the process into ajax implementation. The event will trigger when upload process is complete, and it will, in turn, triggers btnUploadCompleted’s click event, which is responsible for making our ajax call.
<script type="text/javascript">
function iUploadFrameLoad() {
if (window.iUploadFrame.document.body.innerHTML == "SUCCESS") {
document.forms[0].elements[btnUploadCompleted].click();
}
}
</script>
I hope it will helps you...

ASP.NET frameset target to new frame

I have an ASP.NET page in a frameset. I divided into 2 frames, 1.LEFTNAVI and 2.MAIN.
In the first frame (LEFTNAVI) I'm using a textbox and a button for the search engine in below tree menu. If I click the search button or menu it will display the result in the 2nd frame (MAIN) (that is, target=MAIN). Now the problem is, the application session ends, then I click the search button. It will display the login page to start the session, after login, it is displaying the LEFTNAVI frame text in MAIN frame. That is, the textbox, search button and tree menu is displayed in MAIN frame.
Below is the code I'm using in left.aspx.
<script type="text/javascript" language="javascript">
function pageSubmit()
{
var myForm = document.getElementById('form1');
myForm.target = 'main';
}
function KeyDownHandler(btn)
{
if (event.keyCode == 13)
{
event.returnValue=false;
event.cancel = true;
btn.click();
}
}
</script>
<body>
<form id="form1" method="post" runat="server">
<div id="searchFunc" runat="server">
<asp:TextBox
ID="txtSearch"
CssClass="txtbox"
onKeyDown= "KeyDownHandler(searchButt)"
runat="server"></asp:TextBox>
<asp:Button
ID="searchButt"
runat="server"
CssClass="smallbutton"
Text="Search"
onclick="searchButt_Click"
OnClientClick="pageSubmit()" />
</div>
<br />
<br />
<asp:TreeView
CssClass="treeview"
ID="tree"
runat="server"
LineImagesFolder="~/TreeLineImages"
ShowLines="True" ExpandDepth="1" >
<Nodes>
<asp:TreeNode Text="sample tree menu" Value="sam" SelectAction="Expand">
</Nodes>
</asp:TreeView>
</form>
</body>
You can use redirect url. in this case your login page should have a parameter in query string witch will demonstrate the page url that redirected to login page and sure login page should redirect to that page after successful login.
in this case login page should check for redirect url after successful login and automatically redirect to it. in your case, it will redirect to result page (not search page).
sample scenario :
private void DoLogin()
{
//write some code for user validation
if(loggedin) //login was successful
{
//redirect to page that redirected to login because of session end
var redirectUrl = Request.QueryString["redirectUrl"];
Response.Redirect(redirectUrl);
}
}
remember if you are using membership provider of asp.net it will do it for your.

How to set html button as default for ASP.Net form?

Well, I'm trying to make ASP.NET urls looking user-friendly, like it was explained in this question. So I created an ASP.Net form, and placed asp:textbox and asp:button on it. Also I set onclientclick attribute to call JS function which navigates to smart URL by setting windows.location.href. In Firefox it works well but in IE and Opera the browser first navigates to smart url but then it closes connection and sends a postback using an asp.net form action.
I tried to solve it using html button instead of server ones. It works, but the problem is that it can't be set as default for the asp.net form. So' if user clicks on it, it does its work. But if the user just presses enter when form is active, the form performs its action, so the button is not pressed and JS url rewriting doesn't occur. So how can I solve this problem?
My JS looks like this:
function searchRedirect() {
var query = $get('colSearch');
window.location.href = 'colSearch?q=' + query.value;
return false;
}
and in search.aspx i have
<form id="MainForm" runat="server" method="get">
<asp:TextBox id="colSearch" runat="server" Width="615px" CssClass="searchLine"></asp:TextBox>
<input id="Button1" type="button" value="Search!" onclick="searchRedirect();" class="search" />
I also tried with asp:button:
<form id="MainForm" runat="server" method="get" defaultbutton="submitReqBtn">
<asp:TextBox id="colSearch" runat="server" Width="615px" CssClass="searchLine"></asp:TextBox>
<asp:Button runat="server" Text="Search!" ID="submirReqBtn"
onclientclick="searchRedirect();" CausesValidation="False"
EnableViewState="False" UseSubmitBehavior="False"></asp:Button>
</form>
Your onclientclick event needs to return false;
The form accepts an attribute showing which of the buttons are set as default: use it as in
<form id="form1" runat="server" defaultbutton="Button1">
where Button1 is the id of a button on the page.

multiple forms in asp.net

is it possible to display, with a click of a button an entirely different form on the same aspx page? please take note that although i have experience with vb.net, i have almost none with asp.net. thank you very much for your responses
I would use and in your code behind, load up the page and then place it in the placeHolder. And then hide the old form using javascript. The idea the other person said would also work, but I like using the placeholder, myself.
I think it's all really determinate on what you want to do with the forms and how badly you would want the code for the other form laying on the page, or not.
If I understand, what you need is, on the click event:
response.redirect "newpage.aspx"
Create each of the forms on the same page, one with visible=true and the other visible=false, and when the user clicks on the appropriate button, switch the visibilities.
<form id="Form1" runat="server" visible="true">
<div>
<asp:Button ID="Button1" runat="server" Text="Show Form 2" onclick="Button1_Click" />
</div>
</form>
<form id="Form2" runat="server" visible="false">
<div>
<asp:Button ID="Button2" runat="server" Text="Show Form 1" onclick="Button2_Click" />
</div>
</form>
And in the code behind:
protected void Button1_Click(object sender, EventArgs e)
{
this.form2.Visible = true;
this.form1.Visible = false;
}
protected void Button2_Click(object sender, EventArgs e)
{
this.form2.Visible = false;
this.form1.Visible = true;
}
Probably not the most "Ajaxy" solution, but you could use an iframe, with the src set to the forms location.
You should be aware of ASP.NET's MultiView control. It does require a postback to change views, and it is kinda heavy on the ViewState, but its an option to consider.
Well, there's several ways to go about that I suppose. Riffing off tekBlues, you can do a Server.Transfer "yourpage.aspx". You can then use the PreviousPage property to get to data from the old page.
You can use user controls and a placeholder on the main page. Of course dynamically loaded controls holds extra complexity.
You could use a MultiView control. Asp.Net will maintain all vars for you. Useful for the quick and dirty.
These are all webform solutions though. If you're looking for an AJAX solution, might need to keep on looking for answers.
It is NOT allowed to have more then 1 form runat="server" on an asp.net page. What you could do, is create 2 panels on your page, 1 with the Visible property set to false. Then when a button is clicked in the event handler you set the Visisble property to true, while setting the other 1 to false. Wrap the Panel in an UpdatePanel to get rid of the postback.
<asp:UpdatePanel><ContentTemplate>
<asp:Panel ID="pnl1" runat="server">
<asp:Button OnClick="Button_CLick" />
</asp:Panel>
<asp:Panel ID="pnl2" runat="server" Visible="false">
</asp:Panel></ContentTemplate></asp:UpdatePanel>
the code in the Button_CLick handler would then be pnl1.Visible = false; pnl2.Visible = true;
You could do it with CSS/Javascript, here is what I would do first:
1) code up two forms, place them in a separate divs
2) using CSS hide one div on page load
3) then place a button on the page, in the onlick button event unhide the second form and hide the first one.
Make sure that you only have ONE form tag, but 2 divs inside it which you will hide/unhide. Keep in Mind that that the form can only be submitted to its own page, that's asp.net.
in your HTML:
<form runat="server" id="myForm">
<div id="myForm1">
<! -- form 1 code goes here -- !>
</div>
<div id="myForm2">
<! -- form 2 code goes here -- !>
</div>
<input type="button" onclick="toggleVisibility();" />
</form>
Then in your CSS
#myForm1 {
display: none;
}
Then ToggleVisibility() will change the display attribute of divs.
Use AJAX to load the content of another page into the same page.
Use Response.Redirect or Server.Transfer to move to the next page.

Resources