TechBrij

Pass Session or Viewbag values to JS Files : ASP.NET MVC 3

Brij — Tue, 15 May 2012 16:31:12 +0000

This post explains different ways to get Session, ViewBag or server side variable’s values in your external JS files. In Rich UI web app, there are many JS files having thousands lines of code and It’s common to need of accessing server side variable or session in external js file. Let’s see different ways to get it in ASP.NET MVC 3.

1. Using Javascript Variable:

In your view page, you can access session or server side objects easily. So, declare javascript variables, assign Session or ViewBag values and use those variables in JS files.
But your javascript variables must be declared before calling external file. For this, Add section in of layout page(say _layout.cshtml).


	...
    

    @RenderSection("my_script_variables", false)

    
	...

and in your view page:

@Section my_script_variables {

    

}

Suppose you have following values:

@{
    String myVar1 = "First";
    Session["myVar2"] = "Second";
    ViewBag.myVar3 = "Third";
 }

and in external js file:

 alert(variable1 + ' ' +variable2 +' '+ variable3);

then you will get ‘First Second Third‘ alert message.

2. Using Control’s Attributes:

You can assign Parameters as value of control

and get it in js file easily

  alert($('#myHiddenVar').val());

the output in our case is second.

You can use Data Attribute also

 Test

and in external js file

 $('#myLink').click(function () {
            alert($(this).data('variable1')+' ' +$(this).data('variable2')+' '+$(this).data('variable3'));
            });

On clicking test link, the output is ‘First Second Third‘.

3. RazorJS:

You can add RazorJS by using Nuget. It allows to write Razor-Style C# or VB.NET inside your Javascript Files. Right now, It supports Model and Url Only means you can’t access Session and ViewBag in js (Hope, It’ll be implemented soon).

If the view is NOT strongly typed(means model type is not specified) then you can pass your parameters as model in javascript. Let us see following example:

In view page

@{

    String var1 = "First";
    Session["var2"] = "Second";
    ViewBag.var3 = "Third";

    Dictionary test1 = new Dictionary();
    test1.Add("var1", var1);
    test1.Add("var2", Session["var2"].ToString());
    test1.Add("var3", ViewBag.var3);    

}
  @Html.RazorJSInline("~/Scripts/external.js", test1);

Here, you notice all required parameters in js file are added in dictionary and pass as a model.

In external.js

@{
var myobj = (Dictionary)Model;
}
alert('@myobj["var1"]' +' '+ '@myobj["var2"]'+' ' +'@myobj["var3"]');

The output is ‘First Second Third‘ alert.

Note: RazorJSInline takes second parameter as Model. If model type is not specified in view then you can pass any data type(as you’ve seen above). If model is specified then you have to pass object of same data type(you can modify values of object).

Hope, It helps. Share your opinion and let us know how you are passing parameters in external js files.

Create LifeHacker OR Gizmodo Style Sidebar To Scroll Independently

Brij — Sat, 28 Apr 2012 16:49:55 +0000

In this article, you will see how to implement Lifehacker.com or Gizmodo.com style sidebar which scrolls independently on mouseover with mouse wheel. It’s really interesting to show important things in top of sidebar. When any user reads articles(might not focus on sidebar instantly), reaches end of article but there is no change in sidebar position. It’s good and a chance to make attention on sidebar, otherwise sidebar is also moving along with article and top section of sidebar is not focused.

Let us start to implement a demo using HTML-CSS without Javascript/jQuery.

1. HTML structure:


  
	
		....
	
	
		
		....
			
			....

2. Layout:

3. CSS:

body,html{
  font-family: arial,verdana;
  height:100%;
}	

div#wrapper{
	width:975px;
	margin:0 auto;
	position:relative;
}
div#content{
	float: left;
    width: 650px;
}
div#sidebarwrapper{
		position: absolute;
		right: 0px;
		top: 0;
		width: 300px;
	}
div#sidebar{
	width:300px;
	overflow:hidden;
	position:fixed;
	height:100%;
	top:0;
}
div#sidebaritem {
    width: 330px;
}

div.mousescroll {
    overflow: hidden;
	height:100%;
}
div.mousescroll:hover {
    overflow-y: scroll;
}

On mouse-over, overflow-y : scroll which displays vertical scroll if content is more. To hide scroll bar, the width of parent element (sidebar) is kept smaller than sidebaritem with overflow :hidden.

Why Sidebarwrapper?

Now you might think, what is role of sidebarwrapper? If you use sidebar directly you have to define top and right position. Suppose you set right: 0 then on different resolution, it’s always sticked with right side even content appears in middle. To keep sidebar along with content, sidebarwrapper is used with position: absolute and sidebar is placed in it with fixed position without right declaration.

Live Demo

Enjoy Designing !!!

Add Social Slider (Facebook like box, twitter and Google+ Widgets) in Your Website

Brij — Mon, 16 Apr 2012 18:27:13 +0000

Today, Social media is a great way to promote websites, blogs, apps and events. For a website, Facebook, Twitter or Google+ widgets become must have parts to get public interaction, generate traffic. If you add Facebook Like box, twitter status and Google+ widget in your web page, it takes too much spaces and it makes webpage too complex. So, alternate is to use icons only and on mouse over display corresponding widget. To attract user, make these icons fixed floated.

Live Demo

How To Add:

1. Open “Social Slider Generator” page from here:

Social Slider Generator

2. Enter Facebook fan page URL, Twitter user name and Google+ Page ID.
It’s not mandatory to enter all fields, If you want to add only Facebook and twitter, enter Facebook and twitter information only and leave Google+ ID blank.

3. Click on ‘Grab the Code‘ button, copy generated code and paste it before tag in your page.

4. If you are getting error: jQuery is undefined or $ is undefined, it means jQuery is not available.

For WordPress blog, Put the following code in your header.php file in the section:

wp_enqueue_script(“jquery”);

before following line:

wp_head();

For a simple website, add following line in HTML head tag:

5. It’s compatible with the latest browsers. It might not work with older browsers.

Be Careful:

It’s really a great widget, more attractive with less web page space. you can ask me what it means to be careful. One thing you need to keep in mind before using this widget…what???
If you are using Google Adsense in your website, Widget must not cover any part of adsense unit.
Otherwise It violets adsense policies.

Here’s what it says in the Program Policies…

“Google ads, search boxes or search results may not be… Obscured by elements on a page.”

The thinking is that if you place a navigation element over an ad, an accidental click could be generated.

If you want to use it, use Google leaderboard ad unit in header or footer OR ads in right side bar.

Enjoy Social Digital Life !!!

No related posts.

4 Ways to Design Responsive Navigation Menu

Brij — Tue, 10 Apr 2012 17:14:23 +0000

In my recent posts, You’ve seen how to Make the Website Mobile, Tablet, Desktop Compatible and Test Responsive Web Design. In this post, you’ll see different ways to design responsive navigation menu.

1. Simple Menu:

It’s simple CSS menu based on “one design for all”. Menu links goes to next line if browser window is narrow. Generally It’s independent of media queries conditions.

In this approach, when any link goes to next line, the empty space after the link become useless and it looks not so good.

2. Menu Links with alignment:

In this approach, navigation links are divided into equal parts to cover whole browser width and it reduces with browser width for a limit and after this whole menu divided into two rows with equal width and so on.

Code and Demo

3. Menu Links With Button:

In this approach, one button is displayed for small devices and on clicking or mouse-over button, navigation menu will be displayed as drop-down.

Code and Demo

It’s useful when you want to focus on content.

4. Menu To Dropdown:

In this approach, When the browser window is narrow, the menu converts from a regular row of links into a dropdown control elements. I like this approach the most. Right now, It’s done in SmashingMagazine.

Code and Demo

In apporach 3, the menu links are displayed using javascript and you have controls on link means you can display multiple links in single row, but in approach 4, links are displayed as dropdown control items and device browser will have control to display.

Share your opinion and suggestion about responsive navigation menu and let us know how you are implementing it.

SQL Query To Check Money Data Type and Convert it to Decimal Dynamically

Brij — Thu, 05 Apr 2012 16:32:46 +0000

Sometimes we need to convert one data type to another data type to map columns in sql server. You might not be allowed to change table structure directly. In this case you’ve to convert in your query or stored procedure. Suppose you’ve to convert money data-type to decimal for greater precision in calculation then you can do it easily using Cast or Convert methods.

Suppose you don’t know which column is money type and have to convert all money type to decimal for a table then you can do it with dynamic SQL.

Declare @sql varchar(1000)

SELECT @sql = Coalesce(@sql+',','') +
Case DATA_TYPE
when 'money' then 'Cast(' + COLUMN_NAME  + ' as decimal(19,4)) Amt'
else COLUMN_NAME
end
from INFORMATION_SCHEMA.COLUMNS
WHERE TABLE_NAME = N'Orders'

Exec ('select '+ @sql + ' from Orders')

In above SQL, Column name is retrieved from information schema, Cast syntax is used for money data type columns and stored in @sql variable which is a part of dynamic select query.

If you know column name and want to check whether it is money type or not then use SQL_VARIANT_PROPERTY

select OrderID, CustomerID, OrderDate,
(case SQL_VARIANT_PROPERTY(Amount ,'BaseType')
when 'money' then Cast(Amount as decimal(10,2))
else 100.00
end) Amt
from Orders

Enjoy SQLing !!!

Linux Servers vs. Windows Servers

guest — Wed, 04 Apr 2012 16:27:40 +0000

There has always been a debate between Linux and Windows users about which platform is better. Linux, being an open source platform, promises better support apart from the fact that it is free while Windows users would argue about the user friendliness and the number of applications supported by it. Let’s have a look at both platforms so that we can decide which platform will suit our needs and requirements best.

The Low-Cost Solution:

Linux has always been the main competitor for Windows Servers simply because of the great community support that it has maintained over the years. Popular distros like Ubuntu, OpenSuse, Fedora and Debian are all available for free and are updated regularly by a community of Linux enthusiasts. Any bugs reported is fixed within a few days due to the large number of programmers around the world that contributes to the Linux code base. Commercial Linux distributions like Red Hat Enterprise Linux offer free upgrades for a certain amount of time as well as optional technical support on their purchase; this makes them a good choice for small firms with a limited budget.

If your work environment requires a lot of flexibility in the applications that you are using, then Linux is your ideal choice. Most Linux software source codes are available for free allowing them to be customized to meet the requirements of your business without any legal issues involved. You can create your own patches to fix bugs in your network without relying on third party vendors. Security updates and patches are faster with Linux, as the community works on patches and gets them out as soon as possible. With Windows, you have to rely on Microsoft alone, which can leave the security hole open for months.

When it comes to cost, Linux would definitely overthrow Windows simply because of the comparatively lesser cost in setting up and maintaining a Linux server. Many companies offer huge discounts on Linux based devices because there are no licensing fees involved in the operating system or in majority of the software that run on Linux. A quick Google search can help you find HP coupons that could give you discounts of up to 10% on HP hardware that runs on Linux. The discounts are not only limited to HP though. Other vendors also offer big discounts on Linux based services such as web hosting.

Probably one of the disadvantages of Linux is the fact that it lacks a single platform and customers would often be confused about the different platforms available for them to use. Also, there are a lot of issues with the upgrade cycle on most of the Linux distros since a new one rolls out every few months.

User Friendliness at a Cost:

Microsoft has always been a front runner in the software business and will perhaps remain in that position for the foreseeable future due to a number of reasons. Microsoft has developed a lot of frameworks and applications to suit its customers’ needs and requirements over the years. The classic ASP or ASP.NET, MS Access, Microsoft SQL Server, C# and Silverlight are all available only on the Windows platform. So if your work requires you to use these platforms, then you have no choice but to go for a license. These platforms are more user-friendly and skilled professionals in the aforementioned platforms above are easier to find compared to Linux-based platforms. Thus, this is definitely one area where Windows edges over Linux.

Although you can get similar discounts for Microsoft based servers, due cost of the operating system it may still be more expensive than Linux based servers. Microsoft users will be happy to know that the software that can be used on the Window-based platforms are much easier to use. Many tasks on Linux systems require a very high level of knowledge about the terminal while most of the work on Windows can be done at the touch of a button.

With Windows, you can be sure that the most popular platforms such as PHP, MySQL and Perl will be available on Windows. On the other hand, you can’t be so sure about the opposite. Also the software support offered by many third-party software vendors on Linux is close to nonexistent at times. It thrives on community support so you never know when your favorite platforms or services are shutdown. Also check out:

4 Main Advantages of Dedicated Servers

The Final Verdict:

Both Linux and Windows based-servers have their own positive and negative aspects. The main thing that one should consider while choosing a server should be the budget and the scale of the business along with the software platform. These two platforms will continue to compete with each other in the software market for many years as they both evolve with time. Hence, if you are worried about cost and are very comfortable with a command line interface, then Linux is for you. However, if your main issue is user friendliness and platform-specific software applications, then you can’t do wrong with Windows.
Do Share your opinion, suggestion or experience about windows or Linux hosting?

About the author:
Glee Cunningham has worked with servers and other IT technologies for over 15 years.

If you would like to write for us, please read guidelines here.

Moderate Google Docs Forms Data and Share Filtered Data Only to Public

Brij — Thu, 29 Mar 2012 17:48:37 +0000

If you are using Google Docs for Forms or Surveys, You might be getting lots of fake (spam) form submissions. The situation becomes more critical when you are sharing data, survey result or summary report to public and It would mislead the objective of forms or surveys. By default, Google forms doesn’t support Captcha to stop spam submission. But you can’t block spammers. In this case, you want to moderate the data and share approved/ filtered data to public.

Let us take an example to implement this step by step.

Suppose you have a “Comment” form having Name, Email, Website and Comment fields Then In spreadsheet, you have following structure:

1. You have to add one more column (say “IsValid“) manually to approve/reject data.

2. Copy the key value from spreadsheet URL (in image it’s “0AuqF9Lo00cllnUFB0Nmc”)

3. Create a New spreadsheet which will have only approved data and will be shared to public.

4. Suppose you have to show Name, Website and Comment columns only. In first row, type column names manually.

5. In A2 cell, type following
—————————————————-
=QUERY(ImportRange(“Key”,”Sheet1!B1:F”);”Select Col1,Col3,Col4 Where Col5 = TRUE”;0)
—————————————————-
Replace Key to copied key value. In our case the formula will be
—————————————————-
=QUERY(ImportRange(“0AuqF9Lo00cllnUFB0Nmc”,”Sheet1!B1:F”);”Select Col1,Col3,Col4 Where Col5 = TRUE”;0)
—————————————————-
It’ll display all approved/valid data.

In our formula, two functions are used:
Query: It’s a built-in function that allows you to perform a query over an array of values using the Google Visualization API Query.

ImportRange: It lets you reference another sheet from the spreadsheet that you’re currently editing. the common syntax is:
=importRange(spreadsheet-key, range).

In our formula, Sheet1′s column B to F data are selected then it is filtered where IsValid = true and selected columns(1,3,4) are displayed in new spreadsheet.

Now, you can share this spreadsheet to public(file >share > private..Change > Public On the web) OR publish as a web page (File > Publish to the web).

When the form is submitted, an entry goes to original spreadsheet. When you set IsValid = true for the entry then It’ll appear in shared spreadsheet. Thus you can filter spam out.

You can see another live example here.

Hope, It helps.

Happy Holi

Brij — Wed, 07 Mar 2012 15:35:43 +0000

Happy Holi (A festival of Colours) to all TechBrij’s readers.

The world’s Lathmar Holi of Braj has its own identity but also the colors of Bikaner in Rajasthan has fun, frolic with the particular style. The festival of Holi means not only with water balloons, pichhkaris or water guns, gulaal, bhang and mithai but also mutual love and unity in society. Being Bikaneri, I like splash of Rammat, playing Tambourine and listening traditional bhajans. Bikaner’s traditions and customs of the common opinion deeply connects each other and makes a unity. During Holi in Bikaner, a group of persons belonging different casts dancing, singing, playing tambourine in various places out is to create an atmosphere of fun. Bikaneri Holi has their own glorious history, culture and tradition which still followed by people. Bikaneri holi has different colors and all Bikaneri spread all over india come their home town to enjoy the color of Holi.

In above picture, Both are my nephews and one year olds.

Enjoy and Celebrate a very bright, colourful and joyful Bikaneri Holi.

No related posts.

Convert ASP.NET Gridview OR HTML Table to Wizard using jQuery

Brij — Sat, 03 Mar 2012 18:13:52 +0000

In my post, I explained how we can create a simple wizard using jQuery. In this post, we’ll see how asp.net gridview can be displayed in wizard format. Sometimes, gridview is used to take input from user when multiple fields are required many times. It is not user friendly, We can use wizard but not easy to handle on server side as in gridview. So, It’s better to convert ASP.NET gridview to jQuery wizard. So, no need to change on server side and UI is also more user convenient. We’ll convert gridview structure to wizard structure as explained in this post and use wizard.js.

HTML Source:

 
                
                    
                    
                    
                        
                            
                        
                    
                    
                        
                            
                             
                            
                            
                            
                            
                           
                        
                    
                    
                        
                            
                              
                              
                              
                            
                        
                    
                
            

            
                  Wizard TitleX

First, you have to include jQuery and wizard.js file. The logic of conversion is simple, traverse gridview row by row and create a new table having Gridview’s header and current data row as two columns and put in wizHolder > ul > li. So our objective is to create structure something like this:


	.....


	
		Product
		Product-1
	
	
		Price
		$404

Product	Product-1
Price	$404

Script Source:

To convert Gridview:

				var wiz = $('#wizard');
                    $('#<%=GridView1.ClientID %> tr:not(:first)').each(function () {
                        var row = this;
                        var tbl = $('');
                        $('td', $(this)).each(function (index) {
                            var tr = $('');
                            tr.append($('#<%=GridView1.ClientID %> th').eq(index).clone());
                            tr.append($(this).clone());
                            tbl.append(tr);
                        });
                        wiz.append($('').append(tbl));
                    });
					  $('#<%=GridView1.ClientID %>').remove();
To convert HTML Table:
If you have to convert HTML Table instead of asp.net gridview, replace <%=GridView1.ClientID %> with your table ID in above code.
To configure wizard:
				var setting = {
                        ctrls: $("#wizard li"), //Structure for Steps
                        nextButtonTitle: 'Go',
                        nextButtonCss: 'btnNext',
                        callBack: btnNextClicked,
                        previousButtonTitle: 'Back',
                        previousButtonCss: 'btnBack',
                        validateWizardStep: validateStep,
                        validateWizardByTitle: validateByTitle,
                        initStep: 0
                    };
                    showWizardScreen(setting);
Same setting is used in which btnNextClicked, validateStep and validateByTitle are functions. See this post for more details about functions.
Hope, It helps. Enjoy playing with jQuery !!!
Related posts:

Bind array to specific column of asp.net gridview
Displaying Total in ASP.NET Gridview Footer Row Without using Template Field
Grouping Data in ASP.NET Gridview Control
Anonymous Type LINQ Result and GridView Sorting in ASP.NET
Show ModalPopUp to Edit Asp.net Gridview Row Values Without using AjaxControlToolkit

How To Use SQL IN Statement to Select Data Having All Specified Values
Brij — Sun, 26 Feb 2012 11:29:49 +0000



Generally, We use SQL Where .. IN Statement to determine whether a specified value matches ANY value in a sub-query or a list. But sometimes we require to get data which have ALL specified values, not ANY value. In this post, we’ll see how to accomplish it. Let’s take an example, Consider following data in Orders table











OrderID
ProductID


1
1


1
2


1
3


2
1


2
3


3
2


3
3


4
3


5
2


5
4


——————————–
SQL Query:
Select distinct OrderID

From Orders

Where ProductID in (2,3)

——————————–

The above query selects OrderIDs which has any specified ProductID (2 or 3 or both)
Output:
1

2

3

4

5
Now, we want to select OrderIDs which have ALL specified values (2 and 3 both). See following SQL query:

——————————–

Select OrderID

From Orders

Where ProductID in (2,3)

group by OrderID

having count(*) = 2

——————————–

Output:

1

3
Which is expected. In above query, We are grouping by OrderID, counting and select if count is equal to total number of items in the specified values. If there are 5 items in IN condition then you have to set having count(*) = 5.
Hope, It saves your time. Let me know how you are doing to do this.
Related posts:

SQL Query To Check Money Data Type and Convert it to Decimal Dynamically
Implement Audit Trail Quickly for Microsoft SQL Server
3 Ways to implement CRUD (Select, Insert, Update, Delete) Operations
Moderate Google Docs Forms Data and Share Filtered Data Only to Public
Grouping Data in ASP.NET Gridview Control