I am using SharePoint Server 2007 Enterprise with Windows Server 2008 Enterprise. I am developing using VSTS 2008 + C# + .Net 3.5 + ASP.Net. I have the following code which works correctly in ASP.Net (aspx) and I want to implement the same function in a WebPart and deploy into a page of SharePoint publishing portal site.
Any ideas how to implement? My major confusion is how to deal with the code in the head part of the following code? Any reference code or document?
Here is the aspx code I am using,
<!doctype html>
<html lang="en">
<head>
<title>Test</title>
<link type="text/css" href="tabcontrol/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="tabcontrol/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
});
</script>
</head>
<body>
<div class="demo">
<div id="tabs">
<ul>
<li>tab1</li>
<li>tab2</li>
</ul>
<div id="tabs-1">
<p>tab1 info</p>
</div>
<div id="tabs-2">
<p>tab2 info</p>
</div>
</div>
</div>
</body>
</html>
thanks in advance,
George
Check this links...
http://dotnet.org.za/zlatan/archive/2007/10/12/developing-ajax-web-parts-in-sharepoint-2007.aspx
http://www.bewise.fr/article/ptc/57/WSS-V3-Use-ASP-NET-AJAX-Framework-with-WSS-30.aspx
If you need help tell me that I can provide you a WebPart sample.
To include css or js files you can do something like this...
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
ClientScriptManager cs = Page.ClientScript;
string includeTemplate = "<link rel='stylesheet' text='text/css' href='{0}' />";
string includeLocation = Page.ClientScript.GetWebResourceUrl(this.GetType(), "App_Themes.MyButtons.css");
LiteralControl include = new LiteralControl(String.Format(includeTemplate, includeLocation));
Page.Header.Controls.Add(include);
includeTemplate = "<link rel='stylesheet' text='text/css' href='{0}' />";
includeLocation = Page.ClientScript.GetWebResourceUrl(this.GetType(), "App_Themes.MyMainModalDialog.css");
include = new LiteralControl(String.Format(includeTemplate, includeLocation));
Page.Header.Controls.Add(include);
}
In this sample I include MyMainModalDialog.css and MyButtons.css dynamically
For the CSS, you can use CssLink and CssRegistration:
// Custom CSS (fix the URL as necessary)
Microsoft.SharePoint.WebControls.CssLink cssLink =
new Microsoft.SharePoint.WebControls.CssLink();
cssLink.DefaultUrl = "/tabcontrol/themes/base/ui.all.css";
this.Page.Header.Controls.Add(cssLink);
I forget if there are other ways to handle custom javascript besides ClientScriptManager or Page.Header.Controls.Add(). There is a CustomJSUrl class but it doesn't seem to operate in the same way that the CssLink works.
Also, I believe your formatting script $(function() { $("#tabs").tabs() }) should be hooked to the page.load event rather than in the <head> block.
Related
I have a jQuery UI tab control, created using asp.net repeater, and am trying to make sure on page load first tab is selected and also keep the selected tab on postbacks.
I have worked out the postback part but am having problem getting first tab's name. I have applied styling to tabs. This is what I have and what have tried:
<div id="divCategories">
<asp:Repeater runat="server" ID="rptCategories">
<HeaderTemplate>
<ul class="bronze nav nav-tabs" role="tablist">
</HeaderTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
<ItemTemplate>
<li>
<a href='#<%# Eval("Abbrev")%>' data-toggle="tab" aria-controls='<%# Eval("Abbrev")%>'>
<p class="tab title"><%# Eval("CourseCategory")%></p>
</a>
</li>
</ItemTemplate>
</asp:Repeater>
</div>
<asp:HiddenField ID="hfSelCat" runat="server" />
<script type="text/javascript">
$(function () {
debugger
//$("#divCategories").tabs();
var tabName = $("[id*=hfSelCat]").val() != "" ? $("[id*=hfSelCat]").val() : 'AnOps';//$("#divCategories").tabs('option', 'active');
$('#divCategories a[href="#' + tabName + '"]').tab('show');
$("#divCategories a").click(function () {debugger
$("[id*=hfSelCat]").val($(this).attr("href").replace("#", ""));
});
});
</script>
if I uncomment first line in the script that initializes the tabs; I lose tab styling; if I comment it out, I get an error on next line when I try to access .tabs('option','active') because tab is not initialized yet. So, I am using hard-coded tab name ('AnOps');
Because the tab names are generated dynamically, basically I am trying to get the name of the first tab, whatever it may be.
Update (based on Dee's suggestion)
I modified the script like below; it does set the selected tab to first one but none of the styling is applied.
<script type="text/javascript">
$(function () {
var $categories = $("#divCategories");
$categories.tabs({
active: 0
});
debugger
//$("#divCategories").tabs();
var tabName = $("[id*=hfSelCat]").val() != "" ? $("[id*=hfSelCat]").val() : 'AnOps';//$("#divCategories").tabs('option', 'active');
$('#divCategories a[href="#' + tabName + '"]').tab('show');
$("#divCategories a").click(function () {
$("[id*=hfSelCat]").val($(this).attr("href").replace("#", ""));
});
});
</script>
According to documentation of active option it can be specified with integer value which tab will be active at initialisation (zero will activate the first tab). If I am not wrong this is all you need to keep the first tab selected whenever the page loads. HTH
Example:
<script type="text/javascript">
$(function () {
var $categories = $("#divCategories");
$categories.tabs({
active: 0
});
});
</script>
To define your own look some classes of jquery-ui can be edited in Theme Roller. So you create your style-css file and link it the the page (probably master-page). Then just call tabs() function and the style will be applied. You shouldn't define style inside of the repeater yourself. Maybe this is your problem you mentioned in the comment?
First use Theme Roller and generate your style. For example I have changed the background and border of active item to black-red (pretty ugly :)).
Then save the generated files to local folder, I saved it to folder named js but the name is not important. Link the generated css files to your asp.net page. Here I have example with simple html file, but that is not important. As you can see the <ul> doesn't have any style.
Nobullman.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Demo</title>
<script src="js/external/jquery/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="js/jquery-ui.theme.css">
<link rel="stylesheet" type="text/css" href="js/jquery-ui.structure.css">
</head>
<body>
<!-- This content will be generated by the Repeater, but withou any styles -->
<div id="divCategories">
<ul>
<li>1.Tab</li>
<li>2.Tab</li>
<li>3.Tab</li>
</ul>
<div id="tabs-1">
<p>Text 123</p>
</div>
<div id="tabs-2">
<p>Text 456</p>
</div>
<div id="tabs-3">
<p>Text 789</p>
</div>
</div>
<script type="text/javascript">
$(function() {
// tabs will do the trick and create the tabs css styles inclusive
var $categories = $("#divCategories");
$categories.tabs({
active: 0
});
});
</script>
</body>
</html>
The relation of the Nobullman.html and the saved files from Theme Roller looks like this:
When this html file is loaded by browser it looks like this. The styles were applied by jquery-ui-tabs() them selves.
For a school project I have to print webpages to PDF in C#.
I can do this manually by pressing ctrl+p in chrome en choosing save as pdf.
I want to do it with my program because I have to print 30000 web pages.
An example of a webpage I have to print is "http://prf.icecat.biz/?shopname=openIcecat-url&smi=product&vendor=HP&prod_id=D8G49AAE&lang=nl"
I'm new around here so if I didn't give enough information, please ask.
The code also looks quite special to me, it is:
<!DOCTYPE html>
<html>
<body>
<div id="light_wrapp">
<div id="light_title_description">
This is a demo of a seamless insert of an Icecat LIVE product data-sheet in your website. Imagine that this
responsive data-sheet is included in the product page of your webshop. How to integrate Icecat LIVE JavaScript.
</div>
</div>
<div id="loadLiveIcecat"></div>
<input type="hidden" id="liveIcecatData"
data-icecat_id=""
data-brand="HP"
data-part_code="D8G49AAE"
data-ean_upc=""
data-language_code="nl"
datasignature="
gn4vxXU3uI7JPKzL1RNoPAFGPRYdNmwmWJ5FeQj1J45Ba2qiaVYgoE%2FEXwpjaBSdKTrk%2F
%2ByI0AiT5CW1bk3r6SmHY%2FdUuQN3fss8h0se8w9mSw7FDr8SWvqoawB3m69lt6Ske4n%2F01IpEFO9Y
QEVpW9kFZRPWH%2Fuy0yuIbDdm4pd7%2BT9XbPFEk0fKGRH57Nkj5%2FvNEiMW1JhdzV86rJR5ME11j3P
0PJhBMGT1tm2AA0uiDILSNuOwnTWc2WVFEHzC4xr8Q591rPC%2B%2Bue230VowhLLmZTczheEGWrTCA
Wl%2B5Fj4qeLjLe3qTq1MxQaqSIUJXG5rz0BdR%2Fe8ZwkMNAgQ%3D%3D"
data-timestamp="1453663924"
data-shopname="openIcecat-url"
>
</body>
</html>
<link rel="stylesheet" type="text/css" href="/themes/basic/css/icecat/demo.css" >
<script type="text/javascript" src="https://live.icecat.biz/js/live-current.js"></script>
<script type="text/javascript" src="http://prf.icecat.biz/themes/basic/js/icecat/live/init.js"></script>
You can try using ABCpdf,a third-party library.
ABCpdf api document
It make webpag2Pdf easy.
Doc theDoc = new Doc();
theDoc.AddImageUrl("http://www.google.com/");
theDoc.Save(Server.MapPath("htmlimport.pdf"));
theDoc.Clear();
I have a menu that I've built styles for and have some menu options that should not be shown to non-admin users. I've put a link to an asp.net page as a dynamic style. Here is the code:
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Styles/DynamicStyle.aspx" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
the source of DynamicStyle.aspx:
protected void Page_Load(object sender, EventArgs e)
{
if(!Roles.IsUserInRole("Administrators"))
{
StringBuilder oSb = new StringBuilder();
oSb.AppendLine(".restricted");
oSb.AppendLine("{");
oSb.AppendLine("display: none;");
oSb.AppendLine("}");
Response.Write(oSb.ToString());
Response.End();
}
}
I have verified that it does emit the proper CSS.
here is a snip of the code that should be hiding the button:
<li>Events</li>
<li>Industries</li>
<li class="restricted">Institutions</li>
<li>Job Groups</li>
<li>Job Titles</li>
In Mozilla's inspector, it does not list the restricted as having been applied.
I have never tried to do this this way but have seen it done and am wondering what I am missing? Any help is appreciated.
You aren't returning the correct content type for CSS (it's returning type of text/html instead of text/css). Your code would work if you add Response.ContentType = "text/css";:
Response.ContentType = "text/css";
Response.Write(oSb.ToString());
Response.End();
But the real problem is you are simply "hiding" links that people shouldn't see... but if they view the page source, they can still see them. A better option is to not send those links to the client at all. One option is:
<li id="_admin1" runat="server">Institutions</li>
and then in your code behind:
_admin1.Visible = Roles.IsUserInRole("Administrators");
Now the html for that <li> won't even be sent to the client unless they are in the correct role.
Suppose my website has source code:
<!DOCTYPE html>
<html>
<head>
<title>Wow</title>
</head>
<body>
<div id="hello">
</div>
<script type="text/javascript">
function simple()
{
$("#hello").append("<p>Hello</p>");
}
</script>
</body>
</html>
I want a C#/asp.Net method to extract it's source code as follows:
<!DOCTYPE html>
<html>
<head>
<title>Wow</title>
</head>
<body>
<div id="hello">
</div>
<p>Hello</p>
</body>
</html>
string src=new WebClient().DownloadString("http://mywebsite.com")
doesn't help as it extracts the raw html code along with the javascript, same as the source code.
From looking at the comments above I understand that you're looking for the scripts to be executed before you get the final HTML DOM.
What you need is a JavaScript engine to run the scripts, the basic mechanics of a browser.
Depending on your needs, you can either implement this yourself with V8 (Chrome's JavaScript engine) or SpiderMonkey (Mozilla's JavaScript engine) or use one of the two popular headless browser frameworks: PhantomJS and CasperJS. Using them will also cover all your future AJAX needs should you have any.
I have made this example and it works fine on a plain aspx webpage. I use Visual Studio 2010.
Head-part:
<title>Show/hide element</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#CheckBoxShowHide').click(function () {
$("#ShowHideElement").slideToggle();
});
});
</script>
<style type="text/css">
#ShowHideElement
{
width:400px;
height:100px;
background-color:Aqua;
}
</style>
Body-part:
<form id="form1" runat="server">
<asp:CheckBox ID="CheckBoxShowHide" runat="server" Text="Show/hide" />
<div id="ShowHideElement">
This is the element for show/hide
</div>
</form>
When I have a masterpage and the same code on the child webpage JQuery dosent work. The loading of the JQuery javascript file fails. The child page and the masterpage are in the same folder. If I put the code on the masterpage it works fine but I want JQuery on the child page too. Please help me.
I can see another problem as well, you are trying to grab the checkbox ID based on its server ID not ClientID. Once a asp control has been rendered onto the client its ID gets changed. Try the following code:
<title>Show/hide element</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#<%=CheckBoxShowHide.ClientID%>').click(function () {
$("#ShowHideElement").slideToggle();
});
});
</script>
<style type="text/css">
#ShowHideElement
{
width:400px;
height:100px;
background-color:Aqua;
}
</style>
Body-part:
<form id="form1" runat="server">
<asp:CheckBox ID="CheckBoxShowHide" runat="server" Text="Show/hide" />
<div id="ShowHideElement">
This is the element for show/hide
</div>
</form>
The following line is the only thing I changed:
$('#<%=CheckBoxShowHide.ClientID%>').click(function () {
Hope it helps.
Are you sure your page is loading jQuery, use a absolute URL in your master page to reference the jQuery library.
If jQuery is on your masterpage, it will work on your child page.
Master <head>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
Child <head>
<head>
<script type="text/javascript">
$(document).ready(function () {
//Do Child jQuery Stuff here....
});
</script>
<head>
If you are having issues the only other thing to check is to make sure that your path to the jquery file is right. (ie Maybe it should be ../js/jquery.js)
Use this to make sure that isn't the issue if the other thing I suggested doesn't work:
For your Master Page <head>:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
Or (if you want to host it)
<head>
<script type="text/javascript" src='<%=ResolveURL("~/js/jquery.js")%>'></script>
</head>
Where ~/ is your root.
You should be able to just place the link to the JQuery library in the HEAD section of the master page. When the page is ran it will generate the HTML content for the master page with the link in the HEAD section, the content page should be able to then make user of the JQuery library. I know we had an issue with how the link was being done. Maybe try linking in the HEAD of the master page like this instead:
<script type="text/javascript" src='<% = ResolveURL("~/js/jquery.js") %>' ></script>
The '<% %>' is a way to do inline server side code as the page loads, so the page will inject the correct src given the location of the URL.