I have a aspx page where I have a linkbutton and upon clicking that link button I am calling another aspx page passing a parameter in a pops up window, like below:
<asp:linkbutton id='lbtn1' onClick=<%#"window.open('/testsite/mypage.aspx?param=abcd');return false"%>
Till now it was working fine but now I have to include my page to another site where they have used JQuery for popup dialog and asked me to load my page using the same.
I am really new to JQuery and have no idea about. I tried searching through this forum and google but no luck.
Can someone please help me and show me how can I achieve this (please don't mind but a code example would be really appreciated).
A lot thanks.
Do you mean loading a page through an iframe into a modal/lightbox style? Try using a lightbox plugin or reading up on the jQuery UI dialog.
If you do decide to use the jQuery UI dialog, you can do something like this:
<div id="dialog">
<iframe src="page.html"></iframe>
</div>
...
$( "#dialog" ).dialog();
There is another way, though for the purposes of a modal popup an iframe seems a perfectly legitimate solution. But you could load all the html of the target page with an ajax query, and populate the modal dialog with it. Using jQuery:
<script type="text/javascript">
function showPanel(panelID)
{
$panel = $('#'+panelID);
$.ajax({
url: "/testsite/mypage.aspx",
type: "GET",
dataType: "html",
async: false,
data: { "param": "abcd"
},
success: function (obj) {
// obj will contain the complete contents of the page requested
// use jquery to extract just the html inside the body tag
$content=$(obj).find('body').html();
// then update the dialog contents with this and show it
$panel.html($content);
$panel.dialog();
}
});
}
</script>
<div id="dialog">
</div>
Then call this from your click event with the id of the panel.
<asp:LinkButton id="lbtn1" onClick="showPanel('dialog');return false;" />
Note: while this will probably work, if your intent to simply have a link do something on the client, a LinkButton doesn't really make sense, since it is by definition a postback control. So, if you want it to be rendered as a hyperlink for styling reasons, use a HyperLink control or just an HTML link. If not, just put a "div" or "span" around the link text or content and use jQuery to add a click event to it. There are lots of discussions on this sort of thing on SO.
The only way I can think to serve a dynamic aspx page where the page is built (partially or fully) serverside is to add an iframe to the popup and set it's target to the url you wish to load.
Hate iframes but I think this might be the only way.
Related
I am using ASP.NET 3.5.
I have a content page and I want to call a javascript function on this page's load event.
I tried adding:
onload="GetLocalDate();"
within the content page placeholder tag, but it is not working. But when I call this function from any button's OnClientClick event, it works.
How to make it work on Content Page's load event?
The content page "Placeholder" tag is a server side only control. It doesn't produce any code on the client other than arranging its contents etc. As such, the JavaScript onload handle is never rendered.
Examine your browser / client-side source to verify this.
Have you tried calling from document.ready?
$(document).ready(function () {
GetLocalDate();
}
Put that inside script tag on your page
<script type="text/javascript">
function pageLoad(){
GetLocalDate();
}
</script>
$(document).ready(function () {
GetLocalDate();
}
Should work. Since it was not working for you, I would assume that you do not have a reference to the jQuery library in your page.
If you don't want to include the jQuery library in your project for some reason, you could inject it from server-side code within your content page:
ClientScriptManager cs = Page.ClientScript;
cs.RegisterStartupScript(...) <-- add necessary details here (the Type, scriptname, the text, and a Boolean to whether you need it to include its own tags)
You should also check to make sure it hasn't already been registered before using it though (IsStartupScriptRegistered).
I have an ASP.Net page containing an IFrame. In the IFrame I load a html document. When the user clicks on a hyperlink in the content of the IFrame, I would need a callback to be called in the code-behind class of the ASP.Net page.
I guess that I need Ajax to do this but I'm not exactly sure about what I need to do. Could you give me some pointers?
By the way I'm fairly new to ASP.Net.
Thanks
A lot of this depends on what it is you want to do specifically.
The problem you've got is that the DOM of the page in the iframe doesn't appear to be in the DOM of the calling page. All the calling page sees is the iframe tag as a closed tag, like an image tag. Some browsers will detect a click inside an iframe nested within a DIV as a click in the div so you have
<DIV id="iframediv">
<Iframe blah...>
</DIV>
and then you might be able to use jQuery or similar to detect a click inside iframediv and do stuff.
The real solution would be to try not to use an iframe as, like I said, even this solution won't necessarily pay off. I can think of at least one scenario where not using an iframe is not an option so I'll leave that be.
Other than that Willem's suggestions also seem to be sound.
Because the html document is not an aspx page it will not be able to trigger any code-behind. If you can change the page in the iframe make it an aspx page and handle the click on a LinkButton like you would do otherwise.
An other option is to change the link in the html page to call a custom aspx page that handles your needs, but that will redirect the html-page to the new aspx page.
Or indeed change the link to call a webservice through javascript (XMLHttpRequest) and let that webservice do what you wanted to do in code-behind.
Finally I ended up writing a Control Extender for the IFrame. The Control Extender gets the links contained in the IFrame via the following Javascript:
var frame = this.get_element();
var links = frame.contentWindow.document.getElementsByTagName("a");
I then simply attach an event handler that reacts to each link's onclick event. The event handler calls back the ASP.Net side via a WCF service.
Not complicated to do once you know the various technologies.
I like to call a JavaScript function from c#. Can any one can give me code snippet.
More detail...
I have a asp.net page which has a asp button. when i click that button, i like to call javascript function.
like wise....
in my asp.net page,
<button id="save" onclick="i like to call a method resides in asp.net page'>Save</button>
More and more details...
when click the asp.net button, i like to perform some server side action and then like to call a javascript function from there itself...
For an asp:button you use OnClientClick
<asp:Button id="myid" runat="server" OnClientClick="alert('test')" />
On the assumption that you're coding in ASP.NET (including MVC), calling a JavaScript function would mean embedding the call in JavaScript into your ASPX code, like so:
<script type="text/javascript">
doSomething();
</script>
You do have the opportunity to pass information from your C# to the JS call, just as you would have any other code alter the results of your ASPX:
<script type="text/javascript">
doSomething("<%= GetSomeTextFromCSharp(); %>");
</script>
This is really stretching the definition of "calling JavaScript from C#" though. What you're doing is having your C#/ASPX code generate HTML/JavaScript, which the browser then interprets as it would any other HTML/JS (regardless of how it was generated).
Perhaps you could explain what you're trying to do a bit more.
i tried with this code it works for me check whether it helps
1)
Page.ClientScript.RegisterStartupScript(this.GetType(), "click", "alert('Informations');", true);
The other way is call the javascript method which is written in source page
Page.ClientScript.RegisterStartupScript(this.GetType(), "click", "xyz();", true);
You can't "call" a Javascript function from ASP.NET C# code-behind. You can write additional Javascript to the webpage. By the time the page is sent back to the user and the Javascript exists, your code-behind is gone. You can write out to a Literal or do a Response.Write()
Response.Write("<script language='javascript'>alert('Hellow World');</script>");
Sarathi, based on your recent update, it's not clear that you need any C# interaction at all. Your <button> appears to be strictly client-side (ie: HTML) with no ASP.NET interaction within it. To call your JavaScript function you'd attach the function call to the onclick attribute of the button tag:
<button id="save" onclick="mySaveFunction();'>Save</button>
Note that mySaveFunction() just needs to be defined in the browser's load stack for the current page. That means it could be defined in any of:
The ASPX page that holds the <button>
The Master page for the current ASPX page
One of the User controls (or MVC partials) loaded by the current ASPX page
An external JavaScript file that's loaded by one of the above.
Lastly, I'd just like to reiterate that there's nothing particularly C#/ASP.NET-specific about this. You could do the same with any language/framework, including static HTML files. Your question appears to be entirely JavaScript-dependent.
For the window object:
http://msdn.microsoft.com/en-us/library/ms536420%28VS.85%29.aspx
window.execScript
For the page pbject:
http://msdn.microsoft.com/en-us/library/dfbt9et1%28v=VS.71%29.aspx
RegisterClientScriptBlock
RegisterOnSubmitStatement
RegisterStartupScript
etc ...
you can call javascript function from code behind page ..for example you have closewindow function definition part in javasript..if you want to execute that function,you can write following codings in any click event in code behind page..
ClientScript.RegisterClientScriptBlock(GetType(), "close", "<script language=javascript>Closewindow();</script>", false);
I'm looking for a way to add an Editor control (from the ASP.NET AJAX Control Toolkit) to each element of a repeater. It's working fine if I just include it in the ItemTemplate of the repeater, but my problem is that the markup it produces is massive, which slows down the page considerably (even with compression on).
I haven't had any luck adding the control inside the repeater item using an Update Panel - I think this is probably the preferred method, but dynamically adding a control inside an Update Panel inside of a Repeater Item isn't something I've had any success doing, and there don't seem to be any good examples of this that I can find.
The other alternative I considered was using PageMethods to render the control and send the HTML back to the page to let the javascript put it in the appropriate place, then deal with it, but it won't let me render the control - I get an InvalidOperationException of "Page cannot be null. Please ensure that this operation is being performed in the context of an ASP.NET request.". My guess is that all the javascript that's generated makes it so that I can't just render an Editor control on the fly.
Can you point me in the right direction for accomplishing this?
Thanks
EDIT: Another alternative, if it is possible, would be to put a normal Editor control in the markup of the page, then move it around inside of the repeater as needed, using javascript. I can do this with normal controls, but when I do it with an editor, it is not behaving nicely - the textbox appears, but won't let me click inside it. If you have any ideas on this one, I'd appreciate that as well. Here's the code for this:
<span id="spanHiddenEditor" style="display: block;">
<cc1:Editor ID="ed1" runat="server" Height="200" Width="400" />
</span>
<script type="text/javascript">
function createTextBox(idx) {
var span = $get("span1_" + idx); // this gets me the target location
var hiddenEditorSpan = $get("spanHiddenEditor")
var editorHtml = hiddenEditorSpan.innerHTML;
hiddenEditorSpan.innerHTML = "";
span.innerHTML = editorHtml;
}
</script>
identify the location within the repeater with a class then use jquery to inser the html on page ready
$(function() {
$(".myclass").Append("<htmlz>");
});
Then if you need to identify each text box you can do it using the parent container ID eg.
$("#myID div.class input").value
I'm a total jquery newb so none its likely none of it will work, but i believe the idea is a good one!
How do I handle the click of a checkbox to show another control preferrably a user conrtrol (ASP.NET ) dynamically.
I don't know anything about the system you're using but the low down dirty way I'd do this is...
Stick the user control on a blank page of it's own.
When the checkbox is clicked, have JQuery go get the HTML content of the page the user control is on and stick it in the div.
This will result in not-so-neat html in the calling page though.
And is this an asp:CheckBox or an html input?
If you want to create a new object, you can do this:
var checkbox = $("<input type='checkbox' ... />");
$('div#someID').append(checkbox);
Though it sounds like you perhaps want to get the data to append from an AJAX call. I can't quite tell from the question.
Assuming you hide the control with CSS by default you could shorten TStamper's code to something like:
$(function() {
$('#checkbox').click(function() {
$('#control').toggle();
});
});
<mycontrol:UC id="control" runat="server" />
I'm partial to using jquery's taconite plugin. It enables you to return multiple controls from a single ajax call.
For a simple show/hide control scenario rendering a hidden control on a page is good enough. If your control is big or changes due to user actions then your best bet is rendering control on the server and using js to update DOM.
If you're using jquery for your DOM updates and wish to find control by id use:
$("[id$=controlId]")
This will locate your control even with asp.net prefixes to the id.
I'm working on a simple c# wrapper for the taconite plugin which should enable you to use the plugin more easily (sample web site coming soon).
Are you looking for something like this:
$(function(){
$('#Control').hide(); //initially hide the control
$('#checkbox').click(function(){ // bind the checkbox click event
if ($('#checkbox').attr('checked')) {
$('#Control').show();
}
});
});
<mycontrol:UC id="Control" runat="server" />