We Keep Coding

On image click redirect to other page and play the video

I have two pages Recipe.aspx and RecipeVideo.aspx, On recipe page images will be displayed on each image click related video should be opened on RecipeVideo.aspx.
I tried this but it only Redirects to other page
<asp:ImageButton ID="ImageButton1" ImageUrl="~/images/food-trending-meal-pops-L-qw162R.jpeg" runat="server" Height="94px" Width="141px" OnClick="ImageButton1_Click" />
protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
{
Response.Redirect("~/RecipeVideo.aspx");
}
Please can any one give an idea how to do this.

A possible solution could be -
Declare a global javascript variable like this
var videoSource= '';
It should be in an external js file outside all the functions and above all the below functions. Then let your button be like
<input type ="submit" id = "image-button" onclick ="ShowVideo('pass the src value of the corresponding video as the parameter')"/>
Then add the show video method as
function ShowVideo(source){
videoSource = source;
window.location.assign('url of second page you want to load');
}
then on second page, you can do like this
<iframe style = "Display: None" id = "video" width="854" height="480" src="" frameborder="0" allowfullscreen></iframe>
<script>
window.onload = SetVideo();
</script>
Add the method in the external js file
function SetVideo(){
document.getElementById('video').src = videoSource;
}

Does not redirect page after UploadComplete in AsyncFileUpload c#

I am using Ajax AsyncFileUpload in asp.net. It is working fine in uploading image but don't know why it is redirecting to same page with some querystring OnUploadComplete. I don't want to reload page. How to solve this ?
My Code is as below:
function uploadComplete() {
document.getElementById('<%=lblPhotoUpload.ClientID %>').innerHTML = "Quiz Image Uploaded Successfully.";
$("#UploadQuizImageProcess").hide();
}
function uploadError() {
document.getElementById('<%=lblPhotoUpload.ClientID %>').innerHTML = "File Upload Failed.";
$("#UploadQuizImageProcess").hide();
}
function uploadQuizImageStart() {
$("#UploadQuizImageProcess").show();
}
<asp:AsyncFileUpload ID="fuPhoto" runat="server" UploadingBackColor="#779ED3" CompleteBackColor="#179406" ThrobberID="imgLoad" OnUploadedComplete="QuizImageUploadComplete" OnClientUploadStarted="uploadQuizImageStart" OnClientUploadComplete="uploadComplete" OnClientUploadError="uploadError" UploaderStyle="Traditional" />
<span id="UploadQuizImageProcess" style="display: none">
<img src="../images/uploading.gif" alt="Upload" /></span>
<asp:Label ID="lblPhotoUpload" runat="server" CssClass="lbler"></asp:Label>
protected void QuizImageUploadComplete(object sender, AsyncFileUploadEventArgs e)
{
if (fuPhoto.HasFile)
{
string filename = "";
filename = "quiz" + ".jpg";
// Save Image
}
}

is it not per design in asp.net webforms, that a post goes allways back to the same page ?
In your case it goes then in the QuizImageUploadComplete method.
So you could do a response.redirect("someulr.aspx") at the end of this method to get to another page

The documentation says:
onuploadedcomplete: This is a server side event which will be executed once the uploading is complete.

I dont think there is any issue with the code which you have pasted here.
As your control has runat="server" so anyways on uploading a file, a postback is bound to occur.
Could you check if there are any issues in your Page_Load .

How to display div on postback

#layer1 {
width: 575px;
height: 400px;
background-color: #E0E0EB;
position: absolute;
top: 36px;
left: 222px;
}
#layer2 {
width: 575px;
height: 400px;
background-color: #E0E0EB;
position: absolute;
top: 36px;
left: 222px;
visibility:hidden;
}
And i have some controls on both of the divs....
<asp:HyperLink ID="HyperLink1" runat="server" onclick="f1();" NavigateUrl="#">Add Personal Details</asp:HyperLink>
<asp:HyperLink ID="HyperLink1" runat="server" onclick="f2();" NavigateUrl="#">Add Personal Details</asp:HyperLink>
On Click Of HyperLink i have following Code...
function f1() {
document.getElementById("layer1").style.visibility = "visible";
document.getElementById("layer2").style.visibility = "hidden";
}
function f2() {
document.getElementById("layer1").style.visibility = "hidden";
document.getElementById("layer2").style.visibility = "visible";
}
And i have a button..
<asp:Button ID="Button5" runat="server" Text="Button" />
Everything works fine when i click on HyperLink but when i CLICK on BUTTON which i hv in div2 due to postback Page Reset occurs and div1 is showing.which is true as per PostBack.But I want div2 only to displayed aftr button click.Can anyone provide me code for that...Please Help...

If you're trying to prevent Button5 from causing postback then add onclientclick="return false;" to the control. Otherwise you can just handle the visibility of your divs in the click event handler. Something like this:
protected void Button5_Click(object sender, EventArgs e)
{
div1.Style["display"] = "block";
div2.Style["display"] = "none";
}
In order to access your divs in codebehind you may need to make them server controls by adding runat="server"

I think you know what happens when there is a postback, Page is reloaded. So, you have to handle the case that when it is postback retain the old value (IsPostback)

Its been a while since I used asp but here goes.
You can store varables in a Viewstate object and check the varable upon loading the program. For example
function f1() {
document.getElementById("layer1").style.visibility = "visible";
document.getElementById("layer2").style.visibility = "hidden";
ViewState("layer") = "1"
}
function f2() {
document.getElementById("layer1").style.visibility = "hidden";
document.getElementById("layer2").style.visibility = "visible";
ViewState("layer") = "2"
}
When you load the page you do something similar to this
String strLayer = ViewState("layer").ToString();
if(strLayer.equals("2"))
f2();
You may find more information here that could help
http://www.dotnetuncle.com/aspnet/75_viewstate.aspx
Hope this helps.

OnClick and OnClientClick

I have an image button on a pop up page which is opened by another page
<asp:ImageButton
ID="Button_kalem_islemikaydet"
runat="server"
CausesValidation="False"
ImageUrl="~/images/butonlar/buyuk/Kaydet.jpg"
meta:resourcekey="Button_kalem_islemikaydetResource1"
OnClick="Button_ust_islemikaydet_Click"
OnClientClick="f2()"
Width="100" />
f2() is
<script type="text/javascript">
function f2() {
opener.document.getElementById("TextBox1").value = "hello world";
opener.document.getElementById("HiddenField1").value = "hello world";
window.opener.location.href = window.opener.location.href;
}
</script>
And Button_ust_islemikaydet_Click is another method implemented in aspx.cs file and it updates the database tables which are shown in the parent page in a GridView.
What I am trying to do is to doPostBack I mean refresh the opener(parent) page.And with these above codes refresh is working.However, parent page still shows the same data before the refresh.And the reason is that OnClientClick works before OnClick method
So my question is that is there any way I can run the method on OnClick and finish it and then run the OnClientClick method?

<form id="aspnetForm" runat="server">
<asp:Button Text="Click Me" ID="ClickMeButton" OnClick="ClickMeButton_OnClick" runat="server" />
<asp:HiddenField runat="server" ID="UpdateOpenerHiddenField" Value="false" />
<script type="text/javascript">
//1st approach
var updateOpenerField = window.document.getElementById("<%= UpdateOpenerHiddenField.ClientID %>");
if (updateOpenerField.value === "true") {
f2();
updateOpenerField.value = "false";
}
// for the 2nd approach just do nothing
function f2() {
alert("Hello, opener!");
}
</script>
</form>
protected void ClickMeButton_OnClick(object sender, EventArgs e)
{
//1st approach
UpdateOpenerHiddenField.Value = "true";
// 2nd approach
ClientScript.RegisterStartupScript(this.GetType(), "RefreshOpener", "f2();", true);
}

No, you can't run server side code (OnClick event handler) before client side. OnCLientClick event was added to perform some validation before post back. There is only one way to do it - update the f2 method and post data on server via ajax

You can put your javascript inside a PlaceHolder tag which you make visible in your server-side OnClick handler.
aspx code:
<asp:PlaceHolder id="refreshScript" visible="false" runat="server">
window.opener.location.href = window.opener.location.href;
window.close();
</asp:PlaceHolder
cs code:
protected void button_Click(Object sender, EventArgs e) {
// do whatever
refreshScript.Visible = true;
}

Asp.net need Simultaneous display in Second Text Box

I have two text boxes I need a functionality like If I am typing in 1st text box The text should be getting displayed in 2nd text Box with some other font. This is a web Application. And so Text Box doesn't have OnKeyDown event? Do you suggest any way to implement this?
Note: I don't want to implement this with Javascript.

Solution using an asp:UpdatePanel
With this approach, you don't need to write a single line of JavaScript by yourself; everything is handled by the control.
Page.aspx:
<asp:ScriptManager runat="server"></asp:ScriptManager>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:TextBox runat="server" ID="text1" OnTextChanged="text1_TextChanged"></asp:TextBox>
<asp:TextBox runat="server" ID="text2" class="special"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
Event handler for the TextChanged event, Page.aspx.cs:
protected void text1_TextChanged(object sender, EventArgs e) {
text2.Text = text1.Text;
}
Solution using ASP.NET and jQuery
Page.aspx:
<script type="text/javascript">
//As soon as the DOM is ready, execute the anonymous function
$(function () {
var textBox1 = $("#<%= text1.ClientID %>");
var textBox2 = $("#<%= text2.ClientID %>");
textBox1.keyup(function () {
textBox2.val(textBox1.val());
});
});
</script>
<asp:TextBox runat="server" ID="text1"></asp:TextBox>
<asp:TextBox runat="server" ID="text2" class="special"></asp:TextBox>
CSS for both approaches:
.special { font-family: YourFontFamilyOfChoice; }
Test Results
I've tested both solutions locally with Firefox 3.6, Opera 10.6, and Internet Explorer 8; both work like a charm.

Use jQuery (JavaScript) combined with CSS. This solution will not trigger a post-back: Your users will see stuff happen as they type.
CSS:
.normalFont { font-family: Arial; }
.alternateFont { font-family: Verdana; }
HTML:
<input ... class="normalFont" />
<input ... class="alternateFont" />
JavaScript (jQuery):
// When the DOM is ready, execute anonymous function
$(function ()
{
// store a reference for the input with the "alternateFont" class
var alternateFontInput = $("input.alternateFont")[0];
// execute anonymous function on key-up event on the input with
// the "normalFont" class
$("input.normalFont").keyup(function ()
{
// set the value of the input with the "alternateFont" class to
// the value of the input with the "normalFont" class (this)
alternateFontInput.value = this.value;
});
});