Learning lessons for Sitecore, C#, .NET, SQL Server

Thursday, August 29, 2013

How to show different type of documents in ASP.NET webpage

To view different type of file, particular software is required.

Suppose if your website have word documents, client must have MS-Office software to view it. Similarly to show PDF, Adobe Acrobat is required.

In this way there can be thousands type of file format, will you install all these software to view particular type of file?

Problem. Very serious problem.

How nice if I use only one tool and can view any file as below

What is the solution?

Use online document viewer.

The beauty of online viewer is that no need to purchase different type of software on Web Server or client side.

You don't need to upload your file to their server.

The one online document viewer that I like is http://www.prizmcloud.com/

They allow to embed document viewing in your site, blog or social media. They supports 300+ file types, play self-running slideshows, all while keeping them on your server and in your control and no installation required.

It also supports various online features like zoom , print, navigate, copy , save , fill screen, search etc.

How to use it?

First register free yourself on http://www.prizmcloud.com/register.html.

After successful registration you will receive your KEY.

Now we can use their service by passing KEY and document URL as a query string to their cloud server at http://connect.ajaxdocumentviewer.com.

Example 1 :- Use below URL with query string as below

http://connect.ajaxdocumentviewer.com/?key=123456789&document=http://www.cdc.gov/phpr/documents/11_225700_A_Zombie_Final.pdf

Where

· key = Your key number

· document = Any valid URL of document

Other supported optional query strings are

· viewertype = flash or HTML5

· viewerheight = viewer height in pixel

· viewerwidth = viewer width in pixel

· printButton = Yes or No

· toolbarColor = colour code like CCCCCC

Example 2 :- http://connect.ajaxdocumentviewer.com/?key=123456789&viewertype=flash&document=http://www.cdc.gov/phpr/documents/11_225700_A_Zombie_Final.pdf&viewerheight=600&viewerwidth=800&printButton=Yes&toolbarColor=CCCCCC

How to use it in ASP.NET webpage?

Use frame tags in your ASP.NET page like

</iframe>

Use below ASPX code for displaying PDF file in document viewer as shown in above image

</head>

<body>

<div>

<p>Your browser does not support frames.</p>

</iframe>

</div>

</form>

</body>

</html>

Please leave your comments or share this tip if it’s useful for you.

Wednesday, August 28, 2013

How to open ASP.NET web page in Print mode

I have requirement where user clicked on link in Main page should open another window with view only information. This view only window should be directly open in PRINT mode as below

This can be achieve by using Javascript functions.

Below ASPX page directly opened in Print mode

<title>Open Page in Print Mode</title>

$(document).ready(function() {

//Allow page to be load so keep delay of 1 sec and show the print dialogue

setTimeout(printWindowAfterDelay, 1000);

});

function printWindowAfterDelay() {

window.print();

}

</script>

</head>

<body>

<div>

Open page in print mode</h1>

</div>

<div>

Put your controls here

</div>

</form>

</body>

</html>

Please leave your comments or share this tip if it’s useful for you.

Tuesday, August 27, 2013

How to Show YouTube videos on ASP.NET webpage

Now a days integration of SNS - Social Networking Sites links and feeds to our site is common requirement in almost all web application development.

This article helps how to display Youtube videos on webpage in ASP.NET.

If you are interested in showing Facebook feeds on ASP.NET page then read my article “How to show Facebook feeds on ASP.NET webpage”.

If you are interested in showing Twitter Tweets on ASP.NET page then read my article “How to get Twitter tweets on ASP.NET webpage”.

By searching any keyword in Youtube , Youtube shows all relevant videos in thumbnail with their description.

We need to create similar functianlity in asp.net page.

For this functionality we have to include this javascript in aspx page http://www.yvoschaap.com/ytpage/ytembed.js

We need to call function ytEmbed.init() which is in ytembed.js file.

ytEmbed.init({ 'block': 'youtubeDiv', 'type': 'search', 'q': 'baby laughing', 'results': '4', 'order': 'new_first' });

This function expect JSON string where its different parameter details with values are

· block - obligated ID of the html element (<div id='this_is_the_block_id'>) where you want the results thumbnails to appear.

· type - obligated setting that provides the function you want to execute:

o search - YouTube searches for a video with the string set by 'q'.

o playlist - results of a YouTube playlist set by playlist id in 'q'.

o user - results of a YouTube user videos set by user name in 'q'.

· q - obligated string to identify your results, see 'type' above.

· results - the number of results you want to show.

· order - what comes first:

o new_first - newest videos published on top

o highest_rating - highest rated videos on top

o most_relevance - most relevant videos on top

· player - decide if you want to play the video on youtube.com or embed on your page:

o embed - plays the video on your page.

o link - plays the video on youtube.com

· display_first - display the player and queu first video results (needs player set to embed)

o true

· width: embed player width

· height: embed player height

· layout - how do you want the results to appear:

o thumbnails - only a list of thumbnails as result.

o full - list of results with thumbnail, description, rating and user

Ok OK Ok. Now stop theory , show us code [ Afterall we all are developer who only and mostly intersted in code J]

Get searched keyword from user , query string etc.

I am hard coding here. Lets find all videos on Youtube of great great man Steve Jobs.

protected void Page_Load(object sender, EventArgs e)

{

YoutubeKeyword.Value = "Steve Jobs";

}

Use below ASPX page for displaying Youtube videos in thumbnail

<title>Show Youtube Videos</title>

$(document).ready(function() {

YouTubeFeeds($("#YoutubeKeyword").val());

});

</script>

</head>

<body>

<div>

Youtube Videos</h1>

</div>

<div>

function YouTubeFeeds(YoutubeKeyword) {

ytEmbed.init({ 'block': 'snsYouTube', 'q': YoutubeKeyword, 'type': 'user', 'results': 7, 'order': 'most_relevance', 'player': 'embed', 'layout': 'full' });

}

</script>

</div>

<asp:HiddenField ID="YoutubeKeyword" runat="server"></asp:HiddenField>

</form>

</body>

</html>

Reference :- Most of the stuff are referred from http://www.yvoschaap.com/youtube.html

Please leave your comments or share this tip if it’s useful for you.

Monday, August 26, 2013

Unterminated string constant

I was working today to display message in javascript alert() function.

I was passing message from C# code to javascript function as

protected void btnShow_Click(object sender, EventArgs e)

{

StringBuilder strMsg = new StringBuilder();

strMsg.AppendLine("Product ID: 101");

strMsg.AppendLine("This product is not available.");

strMsg.AppendLine("Please select another product.");

string strMessage = strMsg.ToString();

ScriptManager.RegisterClientScriptBlock(this, typeof(Button), "ShowMessage", "AlertInfo('" + strMessage + "');", true);

}

My Javascript looks like this

function AlertInfo(msg) {

alert(msg);

}

</script>

When I run the code and click on my Show button, browser welcomes me by displaying javascript error as “Unterminated string constant”.

When I investigated it, I come to know that I was using AppendLine method which introduced \r\n newline characters in string message. So my final message looks something like this

Product ID: 101\r\nThis product is not available.\r\nPlease select another product.\r\n

Then I replacess all occureneces of \r\n by space as below

string strMessage = strMsg.ToString();

strMessage = strMessage.Replace("\r\n", " ");

ScriptManager.RegisterClientScriptBlock(this, typeof(Button), "ShowMessage", "AlertInfo('" + strMessage + "');", true);

By replacing \r\n message with space solve my problem

strMessage = strMessage.Replace("\r\n", " ");

So never pass \r\n to javascript variables, parameters, functions.

Please leave your comments or share this tip if it’s useful for you.

Friday, August 23, 2013

How to get Twitter tweets on ASP.NET webpage

Now a days integration of SNS - Social Networking Sites links and feeds to our site is common requirement in almost all web application development.

This article helps how to display Twitter tweets on webpage in ASP.NET.

If you are interested into show Facebook feeds on ASP.NET page then read my article “How to show Facebook feeds on ASP.NET webpage”

Twitter provides API calls to get feeds using Twitter data widget id and twitter link like https://twitter.com/YourTwitterAccountLink

Storing widget id in web.config, database is good place.

protected void Page_Load(object sender, EventArgs e)

{

TwitterID.Value = ConfigurationManager.AppSettings["TwitterID"];

}

Use below ASPX page for displaying Twitter tweets

<title>Show Twitter Tweets</title>

$(document).ready(function() {

$("#TwitterLink").attr("href", "https://twitter.com/YOURTWITTERNAME");

$("#TwitterLink").attr("data-widget-id", $("#TwitterID").val());

TwitterFeeds(document, "script", "twitter-wjs");

});

</script>

</head>

<body>

<div>

Twitter Tweets</h1>

</div>

<div>

<a id="TwitterLink" border="0px" data-border-color="white">Tweets by @XYZ</a>

function TwitterFeeds(d, s, id) {

var js, fjs = d.getElementsByTagName(s)[0];

if (!d.getElementById(id)) {

js = d.createElement(s);

js.id = id;

js.src = "//platform.twitter.com/widgets.js";

fjs.parentNode.insertBefore(js, fjs);

}

</script>

</div>

</div>

<asp:HiddenField ID="TwitterID" runat="server"></asp:HiddenField>

</form>

</body>

</html>

Please leave your comments or share this tip if it’s useful for you.

Learning lessons for Sitecore, C#, .NET, SQL Server

Surendra Sharma

Search This Blog

Thursday, August 29, 2013

How to show different type of documents in ASP.NET webpage

Wednesday, August 28, 2013

How to open ASP.NET web page in Print mode

Tuesday, August 27, 2013

How to Show YouTube videos on ASP.NET webpage

Monday, August 26, 2013

Unterminated string constant

Friday, August 23, 2013

How to get Twitter tweets on ASP.NET webpage

ebook : SharePoint to Sitecore: Strategy and Implementation