Develop Reference

Reloading iframe in ASP.NET site from C# code

Trying to reload an iframe after C# has modified its attributes. Here's the page:
<script type="text/javascript">
function reloadFrame(Map) {
document.getElementById(Map).contentDocument.location.reload(true);
}
</script>
<asp:TextBox ID="TextBox1" placeholder="Zip code" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Find locations" onclick="Button1_Click" />
<iframe id="Map" runat="server"></iframe>
And when the button is clicked it runs this:
var zipCode = TextBox1.Text;
Map.Attributes.Add("src", "https://www.google.com/maps/preview#!q=gnc+near%3A+" + zipCode);
browser.Document.InvokeScript("reloadFrame", new[] { "Map" });
However the line to reload the iframe doesn't work. Any ideas?

How about setting the src for the iFrame via inline code?
<iframe id="Map" runat="server" src='<%= (TextBox1.Text == "" ? "" : "https://www.google.com/maps/preview#!q=gnc+near%3A+" + zipCode) %>'></iframe>

Want to be able to close a Modal Popup when clicked outside of it

I have a modal popup extender and a panel inside of an update panel. I do have a Close button which I bind with the CancelControlId. I however, would like to be able to click outside of my modal/panel to close the panel. (instead of using the close button).
I tried a couple things and a plugin clickoutside. Nothing seems to help. Any help or advice is much appreciated. Thanks.
<asp:Content ID="Content3" ContentPlaceHolderID="rightNavigation" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div id="mls_title" class="MLS_Title">
<asp:Label ID="lblTitle1" Text="Tasks" runat="server" class="MLS_titleLbl" /><br />
</div>
<asp:UpdatePanel ID="pnlMap" runat="server">
<ContentTemplate>
<div>
<asp:Button ID="btnMap" runat="server" Text="MAP" CausesValidation="false" CssClass="btnMap" />
<ajax:ModalPopupExtender
ID="ModalPopupExtender1"
runat="server"
TargetControlID="btnMap"
PopupControlID="panel1"
PopupDragHandleControlID="PopupHeader"
Drag="true"
BackgroundCssClass="ModalPopupBG">
</ajax:ModalPopupExtender>
<asp:Panel ID="panel1" runat="server">
<div class="popup_large">
<asp:Label ID="Label7" Text="Floor Plan" runat="server" stle="float:left"></asp:Label>
<asp:ImageButton ID="ImageButton1" runat="server" ToolTip="No" ImageUrl="~/Images/no.png" Style="float: right; margin-right: 20px" />
<br />
<asp:ImageButton ID="img" runat="server" Height="30em" Width="45em" />
</div>
</asp:Panel>
</div>
</ContentTemplate>
</asp:UpdatePanel>

Here is a link to an example that adds to the background onclick to close the modal:
http://forums.asp.net/t/1528820.aspx
Copied the key bits here for reference:
function pageLoad() {
var mpe = $find("MPE");
mpe.add_shown(onShown);
}
function onShown() {
var background = $find("MPE")._backgroundElement;
background.onclick = function() { $find("MPE").hide(); }
}
<AjaxToolKit:ModalPopupExtender ID="mdlPopup" BehaviorID="MPE" runat="server"
TargetControlID="btnShowPopup" PopupControlID="pnlPopup"
CancelControlID="btnClose" BackgroundCssClass="modalBackground" />

C#
<AjaxToolKit:ModalPopupExtender .... BackgroundCssClass="jsMpeBackground" />
JavaScript (using jQuery)
jQuery('.jsMpeBackground').click(function () {
var id = jQuery(this).attr('id').replace('_backgroundElement', '');
$find(id).hide();
});

I had to do it this way so that I was able to click the actual popup without it closing, as I have functional user controls such as tab sections and textboxes on the popup.
<script type="text/javascript">
//Hide's Doc Center when clicking outside
function pageLoad(sender, args) {
if (!args.get_isPartialLoad()) {
$addHandler($find("MPE")._backgroundElement, "click", closePopup);
}
}
function closePopup(e) {
$find("MPE").hide();
}
//End
</script>
Now just make sure your BehaviorID in your actual ModelPopupExtender matches up with the tag above. Like so:
<ajaxToolkit:ModalPopupExtender ID="Popup" runat="server" PopupControlID="Container" BehaviorID="MPE" TargetControlID="fakeTargetControl" BackgroundCssClass="modalBackground" CancelControlID="btnCancel" />
Basically I think this just handles the 'click' event of the _backgroundElement attr of the modal popup, and on that event runs the closePopup() function.

write a dynamically created script that is added, in my example, when the modal popup extender is loaded. Note: In order to bind this event handler to the ModalPopupExtender.OnLoad event, you need to add a reference (in client-side code, you can add 'OnLoad="mpeExample_Load"' to your ModalPopupExtender tag).
protected void mpeExample_Load(object sender, EventArgs e) {
ScriptManager.RegisterClientScriptBlock(this, this.GetType(),
"hideModalPopupViaClient", String.Format(#"function hideModalPopupViaClient() {
{
var modalPopupBehavior = $find('{0}');
if (modalPopupBehavior) modalPopupBehavior.hide();}}",
mpeExample.ClientID), true);
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "pageLoad", String.Format(#"function pageLoad() {
{
var backgroundElement = $get('{0}_backgroundElement');
if (backgroundElement) $addHandler(backgroundElement, 'click', hideModalPopupViaClient);
}}",
mpeExample.ClientID), true);}

Affect another document on submit

I've got a upload function that pops up in a diffrent window, when i've submitted i want to send infomation back to the page that the upload window opened from.
Is that possible some way with ASP.net or C#?
Or would i have to use some javascript ? and how?
My 2 pages:
news.aspx - Contains a formview with my news. and a form with some inputs in.
This is where the link to open the upload page is...
uploader.aspx - Contains my upload controller and C# code to upload.
This should send a string from my C# code back to news.aspx and put it in one of my input fields or a label, not important.
uploader.aspx file:
<form id="form1" runat="server">
<div>
Vælg en fil at uploade:<br />
<asp:FileUpLoad id="FileUpLoad1" runat="server" />
<asp:Button id="UploadBtn" Text="Upload File" OnClick="UploadBtn_Click" runat="server" Width="105px" />
<br />
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
</div>
</form>
Behind Code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class admin_Default2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void UploadBtn_Click(object sender, EventArgs e) {
Label1.Text = "Status: Uploader...";
if (FileUpLoad1.HasFile) {
FileUpLoad1.SaveAs(#"C:\Users\138409\Documents\Visual Studio 2010\Projects\Musicon\img\news\" + FileUpLoad1.FileName);
Label1.Text = "Status: " + FileUpLoad1.FileName + " er blevet uploadet";
} else {
Label1.Text = "Status: Filen blev ikke uploadet...";
}
}
}

Here is some Javascript code to create a popup window and, before the popup window closes, retrieve some information. (I will add a jQuery example in a bit)
//Site1.Master
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="PopupRedirect.Site1" %>
<!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>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
//Page1.aspx
<%# Page Title="" Language="C#" MasterPageFile="Site1.Master" AutoEventWireup="true" CodeBehind="Page1.aspx.cs" Inherits="PopupRedirect.Page1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript">
var message = "Hello World!";
var closeWindow = function(event) {
event.preventDefault();
window.close();
};
window.onload = function() {
document.getElementById('upload').addEventListener('click', closeWindow, false);
};
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<button id="upload">Upload File</button>
</asp:Content>
//UploadPage.aspx
<%# Page Title="" Language="C#" MasterPageFile="Site1.Master" AutoEventWireup="true" CodeBehind="UploadPage.aspx.cs" Inherits="PopupRedirect.UploadPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript">
var popupWindow;
var windowOptions = "menubar=yes,location=yes,resizable=no,scrollbars=no,status=yes,width=350,height=350";
var upload = function (event) {
event.preventDefault();
popupWindow = window.open("Page1.aspx", "Upload Page", windowOptions);
popupWindow.onbeforeunload = pageClose;
};
var pageLoad = function(event) {
document.getElementById('uploadLink').addEventListener('click', upload, false);
};
var pageClose = function (event) {
//put the code here that you want to execute when the window is done.
//like getting the value of some javascript variables
if(typeof (popupWindow.message) != "undefined") {
alert(popupWindow.message);
}
};
window.onload = pageLoad;
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<span>Welcome to this page! Click to upload.</span>
<button id="uploadLink">Upload</button>
</asp:Content>

Call jQuery function from server (In Updatepanel)

I want to call jQuery function from server.
The server side button that calls function is inside an UpdatePanel.
this is server side function :
//Button Click handler (It is inside Updatepanel)
string ScriptName = null;
ScriptName = "function pageLoad(sender, args) { if (args.get_isPartialLoad()) {DisplayMessage(); }}";
ScriptManager.RegisterStartupScript(this, GetType(), "DisplayMessage", ScriptName, true);
and this is client side function :
<script type="text/javascript">
function DisplayMessage() {
//Alert("Called");
}
</script>
It doesn't work.
What's wrong ? (Is my question and problem clear?)

That's weird, as the following works perfectly fine for me:
<%# Page Language="C#" %>
<script type="text/c#" runat="server">
protected void BtnTrigger_Click(object sender, EventArgs e)
{
string script = "function pageLoad(sender, args) { if (args.get_isPartialLoad()) {DisplayMessage(); }}";
ScriptManager.RegisterStartupScript(
this,
GetType(),
"DisplayMEssage",
script,
true
);
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function DisplayMessage() {
alert('called');
}
</script>
</head>
<body>
<form id="Form1" runat="server">
<asp:ScriptManager ID="scm" runat="server" />
<asp:LinkButton
ID="BtnTrigger"
runat="server"
Text="Trigger"
OnClick="BtnTrigger_Click"
/>
<asp:UpdatePanel ID="up" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger
ControlID="BtnTrigger"
EventName="Click"
/>
</Triggers>
</asp:UpdatePanel>
</form>
</body>
</html>
Also do you really need all the complex script, why not simply use string script = "DisplayMessage();";?

create a display:none div in the page. Put it in update panel. This will not disturb your design. to execute every sclient side script in page
<div id="scriptContainer" runat="server" style="display:none;"></div>
then paste your js in it on an event.
scriptContainer.innerHTML = "<script type=text/javascript>DisplayMessage();</script>";
hope it helps.

How to correct run WCF services from javascript?

This is my page code:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="ProductType.aspx.cs" Inherits="Application.ProductType" MasterPageFile="~/Main.Master" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">
<script type="text/javascript">
function getMainTable() { return document.getElementById("<%= ProductGridMain.ClientID %>"); }
</script>
<script type="text/javascript" src="JavaScripts/ProductType.js"></script>
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="~/Services/ProductTypeService.svc" />
</Services>
</asp:ScriptManager>
<asp:Label ID="ProductGridMain" runat="server" Text="Label"></asp:Label>
<br />
<asp:Button ID="AddNewItemBtn" CssClass="Btn" runat="server" Text="New" OnClientClick="NewAddBtn(); return false;" />
</asp:Content>
This is the ProductType.js file:
$(document).ready(function() {
var counter = "fast";
ProductTypeService.GetMainGridProductTypeHtml(counter, ResultLoadTableMainGridHtml, ErrorLoadTableMainGridHtml);
});
function ResultLoadTableMainGridHtml(html) {
//debugger;
var tblMainGrid = getMainTable();
if (tblMainGrid != null && html != null && html != "null" && html != "" && html != " ") {
tblMainGrid.innerHTML = html;
}
}
function ErrorLoadTableMainGridHtml(html) {
alert("Error");
}
function NewAddBtn() {
//debugger;
var counter = "test";
ProductTypeService.GetMainGridProductTypeHtml(counter, ResultLoadTableMainGridHtml, ErrorLoadTableMainGridHtml);
}
The service method returns html code of main grid, then in javascript I insert it into label.
When I click on button everything works correctly like I suppose, but page is reloading. How do I call the service method on button click without page reloading?

Why not use HTML button instead of ASP.NET button - that way you can indicate that you don't need submit behavior. For example,
<input type="button" id="AddNewItemBtn" class="Btn" runat="server" value="New" onclick="NewAddBtn()" />
You may eliminate runat="server" if you don't need to refer to the button in the server code.