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>
Related
Here's a little thing i want to achieve. I have an asp.net FileUpload and a textbox. When a user clicks the fileUpload and selects a picture from his/her computer/device, i want the image name to be immediately displayed in a textbox before submitting . Here is what i have tried
<asp:FileUpload ID="Upload" runat="server" ClientIDMode="Static" />
<asp:TextBox ID="txtImage" runat="server" ClientIDMode="Static">
$('#Upload').change(function () {
var filename = $(this).val();
var lastIndex = filename.lastIndexOf("\\");
if (lastIndex > 0) {
filename = filename.substring(lastIndex + 1);
}
$('txtImage').val(filename);
});
It still cant get it displayed. wHAT AM I MISING PLEASE
you are missing # in $("txtImage"). This should be like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
console.log("ready!");
$('#Upload').change(function () {
var filename = $(this).val();
var lastIndex = filename.lastIndexOf("\\");
if (lastIndex > 0) {
filename = filename.substring(lastIndex + 1);
}
$('#txtImage').val(filename);
});
});
</script>
<asp:FileUpload ID="Upload" runat="server" ClientIDMode="Static" />
<asp:TextBox ID="txtImage" runat="server" ClientIDMode="Static"></asp:TextBox>
TextBox txtImage does not have a closing tag.
<asp:TextBox ID="txtImage" runat="server" ClientIDMode="Static"/>
I am attempting to recapture some form values after they have been posted, but am having quite a bit of difficulty. My form has 2 fields:
<strong>Username:</strong> <asp:TextBox ID="txtUsername" runat="server" Width="200px" /><br /><br />
<strong>Password:</strong> <asp:TextBox ID="txtPassword" runat="server" Width="200px" TextMode="Password" />
And in the code behind, I have tried to capture the username, but keep coming up empty handed. Here is my current implementation:
protected void Page_Load(object sender, EventArgs e)
{
if (HttpContext.Current.Request.HttpMethod == "POST")
{
txtUsername.Text = Request.Form["txtUsername"];
}
}
What am I missing?
your code works perfectly fine for me:
ASPX:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" id="MainHTML" runat="server">
<head runat="server">
<title></title>
<script type="text/javascript">
</script>
</head>
<body>
<form runat="server">
<strong>Username:</strong> <asp:TextBox ID="txtUsername" runat="server" Width="200px" /><br /><br />
<strong>Password:</strong> <asp:TextBox ID="txtPassword" runat="server" Width="200px" TextMode="Password" />
<asp:Button ID="Button1" runat="server" Text="Button" />
</form>
</body>
</html>
cs:
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (HttpContext.Current.Request.HttpMethod == "POST")
{
txtUsername.Text = Request.Form["txtUsername"];
}
}
}
Without seeing the rest of the .aspx page, there's nothing glaringly obviously wrong there, but:
are the TextBoxes within a form with runat="server"?
have you run a trace to see what the Form variables, if any, contain?
are you sure the page is being submitted, and not just refreshed?
have you tried a breakpoint to see whether the if condition evaluates to true (similar to above point)?
I would think you can add onclick= to the button that is submitting the form since the textboxes are running at server. After the equal sign if you press tab twice it will automatically generate an event in the code behind. Then you can do something like this in the code behind to save it in session.
string firstName = txtUsername.Text;
string lastName = txtPassword.Text;
Session["FirstName"] = firstName;
Session["LastName"] = lastName;
and to access it later
string firstName = Session["FirstName"];
First of all to checking if it is a post you can check with this:
if (IsPostback) { //do something here }
and you will see that if it is done on the same page will not work coz it post to itself.When you click a button in the same page data are generally saved in viewstate.So before give you more info we need to have more info about it work to better help you.
What I have is an ASP.NET 2.0 web application that allows the user to upload a .CSV
The html input type is submit.
I want to know if there is a way I can update my UpdatePanel that is below the input to show a little "Processing" .gif before my onserverclick method takes place.
I have tried putting a reference to another event at the beginning of that event, as well as other methods, but I'm getting no luck. From what I understand the method needs to finish before my UpdatePanel will refresh.
Here is some code for you guys
<div class=" content-div">
<input type="file" id="File1" name="File1" runat="server" />
Select file Type:
<asp:DropDownList ID="ddlfileupload" runat="server">
<asp:ListItem>CSV</asp:ListItem>
</asp:DropDownList>
</div>
<div class=" content-div">
<input type="submit" id="Submit1" value="Upload File" runat="server" onserverclick="Submit1_ServerClick"
style="border-top-style: groove; border-right-style: groove; border-left-style: groove;
border-bottom-style: groove" />
<asp:Label ID="Label6" runat="server" BorderColor="White" BorderStyle="None" Font-Bold="True"
Visible="False"></asp:Label>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:PlaceHolder ID="PlaceHolder1" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
and the event behind the code:
protected void Submit1_ServerClick(object sender, EventArgs e)
{
AddProcessGif();
// Logic from submit button here that uploads .csv
}
AddProcessGif() is a method that programatically adds my .gif and stuff. And it works, I have seen it fire, but only after my upload finishes, which defeats the purpose.
I don't have a very well written application here and I'm pretty new to ASP.NET, so I am not sure how to effectively make a progress bar or anything like it.
Any advice would be appreciated
You can call a c# server side method from javascript.
what you need to do is add a scriptmanaget in your aspx page and set EnablePageMethods to true.
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
also your C# method has to be a [WebMethod] like
[WebMethod]
public static string DoSomething(string str1, string str2)
{
string result = "This is concatenation of " + str1 + " and " + str2 + "'.";
return result;
}
and then add the javascript function in your aspx page to call C# server side DoSomething method
<head runat="server">
<title></title>
<script type="text/javascript">
function DoSomthing() {
var str1 = document.getElementById('<%=txtstr1.ClientID %>').value;
var str2 = document.getElementById('<%=txtstr2.ClientID %>').value;
//Here we call server side methode
PageMethods.DoSomeThing(str1, str2, onSucess, onError);
function onSucess(result) {
alert(result);
}
function onError(result) {
alert('Something wrong.');
}
}
</script>
Hope it helps
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);}
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.