Call an ASP.NET C# Method (Web Method) Using JQuery

Introduction

In this article we will see how to call an ASP.NET C# method (Web Method) using jQuery.

Step 1

Add a jQuery reference to your project. 



Step 2

Add a web method in your page as mentioned below.



This method simply returns the Server Date time value as a string and the trick is it's a "Static Method", otherwise it won't work.

Step 3

We will use a jQuery "Ajax" method to call, page methods.



The URL value will be the page name/method name and the data will be the optional parameter to pass the value to the server.

Summary

Now we will call the C# methods and get the post back server data without a page refresh. This is one way to access the C# methods.

Basics of Require.JS For Web Development

Introduction

In this article we will see the basics of the "Required.JS" plugin and how to implement the various options of "Required.JS".

"RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino, Node and jQuery. Using a modular script loader like RequireJS will improve the speed and quality of your code."

Step 1

First let's understand the existing problem with a traditional approach and solution structure. We have an ASP.NET master page which has JavaScript references as mentioned below.

For Demo purpose, I have created two pages using "prettyphoto" and "datapick" JavaScript files. Once we run the test pages, we will get the results as below.

PrettyPhoto sample page



Calendar Page



As we will see, the functionalities for the pages are working fine. But the problem is, in the calendar page I didn't use "PrettyPhoto.js" and in the PrettyPhoto page  didn't use "datepick.js". We have simple a page which doesn't use any JavaScripts, but all scripts are loaded because it's referenced in the Master page.



Step 2

Download the sample code and the JavaScript file. Add the js files to the solution.

http://requirejs.org/docs/jquery.html

Comment the existing script references in the Master page and add the Require JS file. The data-main attribute on the script tag for require.js tells Require JS to load the scripts/main.js file. Require JS will load any dependency that is passed to require () without a ".js" file from the same directory as the one used for data-main.



In this article we didn't used the main.jS file. Now in the default page we removed the unnecessary JavaScript files that were loaded.



In the calendar page, just change the script as mentioned below to load only the required "datapick.js" file.



In the calendar page we will see that only the Require JS, main.js and datepick.js files are loaded.



In the Prettyphoto page the script to load only the required "PrettyPhtoto.JS" was also changed.





Summary

Using Require.JS, we will resolve the JavaScript dependency and improve the performance. 

AdRotator Using jQuery

Introduction

In this article will see how to create an AdRotator using jQuery without using the AdRotator ASP.NET control.

Step 1

Add the jQuery file and reference in your page, as in:



Step 2

Create some static "LI" elements as shown below. We can dynamically create these elements from the DB also. Notice that the "Div" id needs to referred to in jQuery.



Step 3

Add the jQuery scripts to load the AdRotator.



In the script, first the variable for the active "LI" element needs to be initialized and we set to "0". Using "nth-child()" jQuery selector we can select specific child elements and check the following link for more details about the selector:

http://api.jquery.com/nth-child-selector/ 

Step 4

Run the solution and check the output.

Summary

Creating an AdRotator using jQuery is simple as well as powerful.

Performance improvement using JavaScript Lazy Loaders:

Introduction

In this article is a demonstration of how to improve performance using the "Rocket.JS" and "Head.JS" open-source library.

About Rocket.JS

Rocket is a simple JavaScript lazy loader that aims to reduce the loading times of pages caused by blocking JavaScript. It's usage is as simple as possible in order to ensure it's easy to fit into existing code.

Step 1

Configure Rocket.JS file

We will download the JS file from the following Git repository:

https://github.com/imagehst/Rocket

Once we have download the JS file, we add a reference to our existing project.



We need to add the "head.js" file reference and add some jQuery code to determine if the Jquery.js works correctly or not. 

Step 2

First we will see the page performance without "Rocket.JS".



This is just a normal ASP.Net start-up page and note the timelines for each page's resources (like JS and CSS files) to complete the page load. Overall it requires a major consumption of resources to complete and the most of the time is consumed by our "Jquery.JS" file.

We just considered the first-time page load now and see the following image for JavaScript code.

Step 3

Now we will do some changes in the JavaScript code as described below.



We added the "Rocket.JS" file reference to our page and call the rocket.load method to implement the JavaScript lazy loader and added some jQuery to determine if the lazy loader is working correctly or not.

After the "Rocket.JS" implementation our JavaScript file (foobar.js) will load at the end.




But I am not still convinced, because the Jquery.js file still takes more time. We will try another alternate solution using "Head.JS".

Using "Head.JS" will result in further performance improvements:

About head.JS

Head JS loads JavaScript files like images without blocking the page. Your page will be faster even with a single combined file.

Download the JS file and reference file as described from the following URL:

Download URL: http://headjs.com/#download

Implement the Head.JS as mentioned below:



After implementation we will see the jQuery and foobar.js files are loaded as in the following image.



Summary

Using head.js we can control what are all the scripts we need to load in the page and the order of the scripts as well.

Note: The network time for chrome may vary depending on your browser and version; it is just for your reference.
 

Load Master Page User Control Dynamically to Improve Performance

Introduction

Problem: We have the master page and we will embed the user the control and the same master page will used by various pages. For some pages we don't require the user control to be visible. If we also hide the call to that user control, we cannot avoid it.

Step 1 : We have very simple user control, just some label in HTML.



Step 2 : In code behind, we will hold the thread for a while, assuming we are doing some complex process in that user control and display the content.



Step 3 : Add the user control to the master page. First register it and using the tag name embed the control.



Step 4 : Just create a new ASP.Net page with master page reference and load it and the result will be as below. Ignore the design aspects; we will focus on the user control alone.



The User Control will be loaded in right side and below the load time as well.

Step 5 : We will create one more page, that doesn't require the user control. We will just hide the control using jQuery.


Even if we hide also, the user control will be called internally.



Step 6 : We will remove the user control related "HTML" in the master page and just add a placeholder.



Step 7 : Now we can load the master page control from the child/content page. Write the following code in the Page_LoadComplete event of the Content Page, which comes just after the Page_Load event of the Master Page.


We will run the page and get the same result as below.



Now we will load the other page which doesn't require the Master Page User Control. It just loads the master and child page contents alone.



Summary

We need to add some code in the page which requires loading the Master Page User Control dynamically. 

Using Mongo DB in .Net

Here I am not going to explain about Mongo DB, but i just try to use Mongo DB in .Net.

By default, MongoDB wants to store data in the default file system path, c:\data\db.but this is configurable with a text file passed by name on the command line via --config.

 If you got the below error.  Just run the below mentioned command.

Error: couldn't connect to server 127.0.0.1 shell/mongo.js:84

Command:  mongod --dbpath "c://data/db"

Once configured the Mongo DB, we will install C# driver or we can use the NuGet package.

 http://www.nuget.org/List/Packages/mongocsharpdriver

After install the driver, add reference dll’s as mentioned below.

We will go through the sample application to use Mongo DB in .Net:

Just like SQL Server we need to create connection instance to the Mongo DB server.

Once the Db will be created we can able to go and check the db folder “\data\db” and the final thing is we can able to  add and query the data like sql.

Check the SQL to Mongo Mapping chart:

http://www.mongodb.org/display/DOCS/SQL+to+Mongo+Mapping+Chart

We execute the select query (.Find), get the data.

Starting with Master pages in SP 2010

Customized Master pages in SharePoint 2010::

Introduction

This article demonstrates we will how to enable/use the Custom Master Page changes in Sharepoint 2010.  

Step 1: To Enable Customization

 First if we want to work/change the Master Pages in SharePoint 2010, need to enable the below features.

Navigate to the landing page of your newly created site collection:

→ Click on “Site Actions” → Click on “Site Collection Features” → Enable “SharePoint Server Publishing Infrastructure”

Step2: Enable this feature at site collection level   

Step3:

We need to do the same thing at site level also.

→ Click on “Site Actions”→ Click on “Manage site features” → Enable “SharePoint Server Publishing”

 

Step4:

 Enable on a site level 

Step5:

Once we enabled the features, we can able to see the Master Page option in Look and Feel.

 

If the Master Page is already enabled, we can skip the steps from 1 to 4.

Select your customized and published master page:

 

Start-up we can refer this link for customizing the master page:

https://startermasterpages.codeplex.com/

If we get the below warning means the Master page may not be published correctly. We can follow the below solution steps.

Warning: The selected master page has no approved version. This site may appear to be broken to users without the view versions right in the Master Page Gallery

Steps:

Click Site Actions –> Site Settings –> Modify All Site Settings
Click Master pages and page layouts
Click the down arrow next to your .master file
If Check In is an option, click Check In
Click OK
Click the down arrow next to your .master file again
Click Publish a Major Version
Click OK
Click the Down arrow next to your .master file
Click Approve/reject
Click the Radial Button next to Approved.
Click OK.

 The final output of Customized master pages:

   

 

Summary:

Customizing the Master Page is important step in SharePoint Portal development. For start-up we can use the Codeplex pages, based on our requirement we can customize the design.