Please can somebody explain how I can open up an ASPX page that is in my solution in a Kendo UI Window and get any values that I need?
What I want is to open a Kendo window with my own ASPX page which will pass an ID through to the main view after a template has been selected in the Kendo Window.
This demo shows how to load a remote page into the contents of a Window by using the content property:
window.kendoWindow({
content: "myPage.aspx"
});
Though by default it expects just HTML that it will inject into your page, so the result should not contain <html> <head> and <body> tags. However at that point the markup is just insterted into the page, so any JavaScript can directly communicate with the "parent" because they are all the same page.
You could also specify the iframe option
window.kendoWindow({
content: "myPage.aspx",
iframe: true
});
which will make the window contents an <iframe> instead of injecting it into the page.
I think your contents then could specify the <html> <head> and <body> tags just like a normal page, but now your JavaScript would have to do something different to pass a value back to the parent. That is back in the realm of normal JS, not Kendo. If I remember correctly, you can call a function in your iframe's parent by calling:
window.parent.myFunction("some value");
Related
Two partials loaded on the same page
For example, if I hit a button in one partial then I want some value to appear in the other partial.
I want all the work to be done on the client side. I am sure I would call a method in js but I am not sure how to connect it to another js var on another partial within the same page. In other words how do I get both the partials to talk to eachother on the client side.
Once your razor view is rendered to the browser, It is just HTML markup. That means, you can use javascript to access the elements in the DOM and update the values as needed.
Keep your script in the main view which holds the 2 partial views.
$(function(){
$("#ButtonInFirstParial").click(function(e){
e.preventDefault();
$("#DivInSecondPartial").html("Updated");
});
});
Also if you declare your javascript variable in a global scope, you can access it in other places also. So if you have a variable like this in your layout page,
<body>
#RenderBody()
<script type="text/javascript">
var global_SiteUrl="Some value i want to access in all pages";
</script>
</body>
You can access it in other views (which uses the above one as the Layout), or js files which are a part of other views who has the layout value set as the above layout.
Not able to identify the element in a page.It gives null.I want to identify the element in the Iframe (textbox) .I used selenium webdriver to click on the element,but it is not able to identify the element
1) My HTML Code is as shown bellow
<html>
<head>
<body>
<iframe id="iframeOne">
</iframe>
</body>
</head>
</html>
2. I used javascript to identify the textbox like document.getElementById('textbox').
But it return null.
3.I even Tried using selenium webdriver
IWebElement ClickElement = Wait.Until((d) => webDriver.FindElement(By.Id(parameter1))); It gives object reference error
ClickElement.Click();
You cannot put html inside an iframe tag. it is to load another page inside the curent page. and your input tag should caontain the type of the control. and check the HTML validation errors.
The html code you put inside the iframe tag will be loaded and visible if and only if the browser does not support iframe tag. So probably never, unless you're using older Netscape navigator or IE 4.
Add src attribute to the iframe pointing to the url you want to load. Then you can access elements inside this way:
var frame = document.getElementById('iframeOne');
var frameDocument = frame.contentDocument;
var element = frameDocument.getElementById('xxxx');
There's one thing to take into account, though: accesing contentDocument when iframe's src is cross-domain might not work as expected.
Im trying to add a light box which automatically opens up when someone visits my homepage. something similar to
http://directorsof.com/
any idea on how I can do this.
You can use for example colorbox to get a lightbox that opens after the page is loaded.
Download colorbox from here: http://colorpowered.com/colorbox/latest, extract the file and modify the index.html file in the example1 folder.
Replace:
$("a[rel='example1']").colorbox();
with
$("a[rel='example1']").colorbox({open:true});
Open the index.html file in your browser to see the lightbox coming up directly.
are you using a master page?You need to place 2 divs in your file. One that has a fixed position or absolute and dimmer the background, and another div that displays the content.
Check this link out, it is a web messagebox but it will do what you want using a template approach.
http://www.snippetbank.net/detail/snippetdetail/9-aspcsharp/3-filemanipulation/404-Web-MessageBox.html
You can add the following to your home page
window.onload = function() {
//Open your lightbox here
};
Or you can use Jquery all together with something like...
$(function(){
$(body).load(function(){
// Open your lightbox here
});
});
both of the above will fire the lightbox once the page is loaded. Its probably better to use the jquery example as this will ensure that the DOM is ready.
i have made a page in asp.net, i have a costing calculator which has more than 50 fields, dependent on each other, one is the result of previous two and like that, i want my page to be printed in a well manner, and the header of the page which is in master page should not be in print, also the color schemes i want to adjust, let me know the best solution for this which .net provides
Put the content inside <div id="divid">YOUR CONTENT NEEDS TO BE PRINTED</div>
Then call the javascript function on button click which will print the selected area or only html of div. pass the id of div on calling javascript function.
function CallPrint(var strid)
{
var prtContent = document.getElementById(strid);
var WinPrint = window.open('','','letf=10,top=10,width="450",height="250",toolbar=1,scrollbars=1,status=0');
WinPrint.document.write("<html><head><LINK rel=\"stylesheet\" type\"text/css\" href=\"css/print.css\" media=\"print\"><LINK rel=\"stylesheet\" type\"text/css\" href=\"css/print.css\" media=\"screen\"></head><body>");
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.write("</body></html>");
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
return false;
}
Call CallPrint('DivGrid');" on onclick() of button or use below: but.Attributes.Add("OnClick", "return CallPrint('DivGrid');");
Nothing to do with .Net and everything to do with a print stylesheet. You can create a stylesheet which will only work for when the page is printed. And you can change everything from what displays to postion to colours.
Use:
<LINK rel="stylesheet" type"text/css" href="print.css" media="print">
Note media="print" means it'll be used for printed pages.
I know that question has been asked a long time ago, however there is no accepted suggestion. So here my approach for friendly print version when using Master page.
Create an empty master page (PrintVersion.Master) to serv as print version. Add what ever you need to be print (like logos) if anything to that master page.
from your content page, add a print link with target blank. Make the href to load the current page. From the href add a querystring so you can capture it from your content page preinit event.
From your content page preinit event detect if the querystring to print exists, then specify the blank master page like: MasterPageFile = "~/Ful/Path/of/your/PrintVersion.Master"
Optional, on the PrintVersion.Master on document.ready call: window.print(); The browser print dialog will automatically open.
You can make a new printable page version, which doesn't include a header. This version can also have the layout you need.
I specifically want to add the style of background-color to the <body> tag of a master page, from the code behind (C#) of a content page that uses that master page.
I have different content pages that need to make the master page has different colors depending on which content page is loaded, so that the master page matches the content page's theme.
I have a solution below:
I'm looking for something more like:
Master.Attributes.Add("style", "background-color: 2e6095");
Inside of the page load function of the content page. But I can't get the above line to work. I only need to change the background-color for the <body> tag of the page.
What I would do for the particular case is:
i. Define the body as a server side control
<body runat="server" id="masterpageBody">
ii. In your content aspx page, register the MasterPage with the register:
<% MasterPageFile="..." %>
iii. In the Content Page, you can now simply use
Master.FindControl("masterpageBody")
and have access to the control. Now, you can change whatever properties/style that you like!
This is what I came up with:
In the page load function:
HtmlGenericControl body = (HtmlGenericControl)Master.FindControl("default_body");
body.Style.Add(HtmlTextWriterStyle.BackgroundColor, "#2E6095");
Where
default_body = the id of the body tag.
I believe you are talking about a content management system. The way I have delt with this situation in the past is to either:
Allow a page/content to define an extra custom stylesheet or
Allow a page/content to define inline style tags