Archive for December, 2010


Recently, I received one question how to send the xml data from one page to another page without using any state management or caching technique of Asp.Net.

Say, there are two pages page1.aspx and page2.aspx. In page1.aspx, we have one button named OpenPage2 after clicking on this button, page2 will be opened up. On page2, we want the xml data sent from page1.

I suggested the below way:

We can post the xml data from one page to another page by using XmlHttpRequest.

In page1, we can have two divs, first with id div1 for page1 and another div with id div2. On the div2, we can load page2 using jQuery’s load utility method, on click of button. Simultaneously show and hide the required div’s. When page2 has to be shown then show div2, hide div1 and vice versa. Pass xml string data to page2 using JSON object. Before sending the xml string data encode it, using JavaScript escape method.


var xmlData = escape("<Name>Rupesh</Name><Age>28</Age>");

$.load( “page2.aspx”, {“xmlkey”: xmlData } );

Hence, in the page load event of page2.aspx, the same xml string data can be extracted from the request parameters. Since, xmlData would be in encoded format in order to decode it HttpUtility.UrlDecode can be used like below.


string xmlData =  Request.Params[“xmlkey”];

xmlData = HttpUtility.UrlDecode(xmlData);

Below is the complete code.
In page1.aspx put one hidden field and on page load event of the page1.aspx store your xml data inside the hidden field so that from the client side you can get the xml data from the same hidden field and post it to page2.


//-----put below code in Page1.aspx----//

<script type="text/javascript">

var xmlData; //JavaScript object where xml string should be stored.

function openPage2 ( )  {

//Hide the div1 before opening the page2

$("#div1").hide();

//Before opening the page2 you can store the xml string in javascript object.

//The XML string can be taken from the hidden field. Use escape method to encode the data

xmlData = escape( $("#hdnXml").val() );

//Show div2 and load page2 on div2

$("#div2")

.load( "page2.aspx" , { "xmlkey" : xmlData} )

.show()

}

</script>

<div id="div1">

<input type="hidden" id="hdnXml" name="hdnXml" />

<button click="openPage2();">Open Second Page</button>

</div>

<div id =div2"></div>

//------Page1.aspx End ----

//Put below code in Page2.aspx
<script runat="server">

protected void Page_Load(object sender, EventArgs e)

{

if(!IsPostBack) {

//Use urlDecode to decode the xml data

string xml = HttpUtility.UrlDecode(Request.Params["xml"]);

}

}

</script>

we could have used query string and send the data using query string also but as we know for query string there is size limit up to 256 chars. If we store the data in cookies variable then cookies also have size limit of up to 4096 Bytes and there may be the chances that cookies are not enabled in client machine.
Therefore, I suggested to use POST method in order to sending the data to the other page. The size limit for POST method depends on type of browser and IIS. I think in IIS 6 and 7 the size limit is 200KB.

Advertisements


Hi all,

I recently installed Internet Explorer 8 in my laptop and wondering many new features about the IE8. I was enjoying the good and new features of IE8. However, I was not aware what these features are called, from where they came and can I install my own new features in to my IE 8 browser etc.?

One feature which I firstly observed in IE8 was, when I select some text on browser then I see one icon comes up. On click of that icon one menu box opened up and it suggests me many actions to do like, search it with Bing,  Blog with Window Live, Mail with Window Live, etc.  I was not aware that this feature is called Accelerator and we can install our own custom accelerators as well !

Then I learned more about the IE8 and found that There are such 8 new features in IE8 as below.

  1. Defining Page Regions with Web Slices

Web Slice is one of the cool features of IE8. It allows you to divide the page in various parts, see and update the only part in which you are interested.

For example suppose, you visited amazon.com and saw the price of camera which you wish to buy. If you want to track the price of your selected camera so that the moment it’s price will decrease you will buy that camera. For doing this you have to daily visit the same site and search for your camera and look its price.

But, if you are browsing in IE8 then on hover at the part of the camera on the browser, you may see there will one icon will come up. On Click of that icon, pop-up window will crop up with massage subscribe to this web slice. By subscribing to that webslice, you will see that one new tab will come at the menu bar of the browser. That tab will show you the title of the camera and on click of the tab it will show the small pop-up that will display the current updated price of your selected camera. It keeps update automatically without refreshing your browser.

Now you need not go to the whole amazon site, search for your camera and see the current update price daily daily.

The other features are as below.

2. Expiration and Update Frequency

3. Accelerators

4. Search Suggestions

On typing the search content IE8 will show you suggested texts. You can give your own suggested texts by installing various search suggestion providers.

5. AJAX Navigation

6. DOM Storage

DOM storage allows to store and retrieve data at client side using unique key. Data size can be up to 10 MB.

7. Offline and Online Working Modes

8. XMLHttpRequest Time Outs

Internet Explorer 8 provides a new client-side object called XDomainRequest, which allows developers to access remote domains without requiring implementation of a server-side proxy. If the remote server provides an Http Header called Access-Control-Allow-Origin:* all other remote sites will be able to request data from the current Web page. The client-side use of XDomainRequest object is the same as the ordinary XmlHttpRequest.

Please read article New Features in IE8 written by Daron Yöndem. He has explained entire above mentioned 8 points aptly.

I just read the great article Introducing “Razor” – a new view engine for ASP.NET by Scottgu. I found Razor more comfortable than the other view engines.
It’s very easy to write code with Razor View Engine, it substantiates the write less and do more concept. There are lots of good stuffs in Razor.  However, I liked below things in Razor.
1) Instead of writing <% = %> for code block, we can just write @ and start our coding. Razor does not require you to explicitly close the code-block.
2) RenderBody and RenderSection are much powerful, they enables the layout re-useablity.

The sections can be made optional so that any page can have the layout without having those sections defined.

Say we have one Base.cshtml page that has certain basic static html which can be used in multiple pages just like master page.

Base.cshtml


<div class="ui-left-menu">

@RenderSection("menu", optional:true&nbsp;)

<div class="ui-body">

@RenderBody()

<div class="ui-footer">

@RenderSection("footer", optional:true&nbsp;)

Now, say there is one page which wants to inherit from the base.cshtml page and then we can write bellow code for child.cshtml.

child.cshtml


@{

LayutPage = "base.cshtml";

}

@section menu {

<ul>

<li>Home</li>

<li>Login</li>

</ul>

}

@section footer {

<p> Hey I am in footer now... :)</p>

}

When we render child.cshtml as a view-template again, it will now combine the content from the base.cshtml and child.cshtml page, integrating the two new custom section overrides in it.

3) Last but not lease powerful thing is Declarative HTML Helpers . However, in ASP.Net MVC 3 (preview 1) this feature is not yet included. HTML helpers are just like C# methods which we create once and call it from various places from our project. We can define reusable helpers using a @helper { } declarative syntax like below.


@helper MethodName(arguments) {

.....markup goes here....

}

You can create one Helpers directory inside the View Folder and can put one helper.cshtml file inside that you can create one helper function let’s say ShowAlert method like below.


@helper ShowAlert(var msg, var status) {

@if(status == "error") {

@msg

} else {

@msg

}

}

After creating above helper method, you can call ShowAlert method from any page.


<html>

<span style="font-size: small;"><head></head></span>

<body>

<p>Below Error Found </p>

<div>

@ShowAlert(Model.User.Message,"error")

</div>

</body>

</html>

 

 

Plethora of times it is required to show complex tool tip. Complex, I mean the tool tip that can contain images, links , text decoration etc…To show the custom tool tip is really impossible by using existing Java or .Net visual studio Editor.  There are many ways to implement it. 
However, I am going to describe one way to overcome this problem that is damn simpler. I have created one javascript file you just need to use that file in your page in which you wish to implement the custom tool tip and your task is done. Now, in any control you can add one custom attribute that is jtip and inside the custom attribute you can write your html or text to be shown in tool tip. In your page you just need to add the jtip.js script file and jquery.js file. Then in your page you can just use jtip property in any control. Below is one example. Say i want to display one tooltip on button which will contain one link
 

<script type="text\javascript" src="jquery.js"></script>
<script src="<span class=" type="text\javascript"></script>
jtip="j: my name is rupesh please visit my website <a style="cursor: hand;" href="#">My Home Page</a>" runat="server" Text="Button" />
Button1.Attributes.Add("jtip", "j: My name is rupesh....This is custom <a href='#'>ToolTip</a>");

The only thing you have to do is before writing your tool tip things just prepend it with j: (j colon). This is the only pattern that you have to follow. Below is the jTip.js code:

<span style="font-size: small;">
$(function( ) {
     $("[jtip^=j:]").wrap("<span class="jtipHost">");</span>
     $(".jtipHost").hover(function(){//debugger;
     $(this)
     .append($('<span style="font-size: small;"><span style="font-size: small;">jtipcontainer">'+$(this).find("[jtip^=j:]").attr("jtip").replace('j:','')+' '))</span></span>
    .find('.jtipcontainer').css("left", $(this).position().left + 20)
    .css("top", $(this).position().top + $(this).height())
    .fadeIn(500);
 }
   , function() {//debugger;
        $(".jtipcontainer").fadeTo(400,.3, function() { $(this).remove(); });
    });
});</span></span>

<span style="font-size: small;"></span>