Book: Visual Studio 2013 and .Net 4.5 Expert Cookbook


Let’s start with a very short story. Oh ! It’s about you. You bought a latest mobile phone from the market that you haven’t used earlier. Excited to use it. Did some phone calls and text messages. What’s so exciting about it? After all, every mobile phone is supposed to provide those basic functionality. What else? How to learn other features? Yes, you need a guide or references or help manual.

Earlier this month, I got installed Visual Studio 2013 in my laptop and found this particular book to be my true guide in application development and learning new features introduced with Visual Studio 2013 & .Net framework 4.5. It has uncovered many exciting and time saving new features of VS 2013.

News: You can download Visual Studio 2013 Community Edition for free [from here]

The book is authored by Abhishek Sur, a Microsoft MVP since last 4 years who is also a renowned public speaker and also the author of book Visual Studio 2012 and .NET 4.5 expert Development Cookbook. You can purchase the book from Packtpub or Amazon.in . You can even view few pages for free [here] .

If you want to be more productive and upgraded to the changes in .Net 4.5 & VS 2013 then this is just that perfect book you are looking for.

 

With the first chapter the book teaches, how to debug better with your new IDE. You’ll find a great in-depth analysis of each features. Debugging is a very essential part of Application Development and one can definitely use these tips to sharpen their debugging skill.
For Example, I was unknown about
“The debugger stores the information of the line number and source code file inside the DB file (known as the program database)

Second chapter is about the Enhancements to WCF. It also teaches to write RESTful services with WCF with few simple and excellent examples. There is a separate chapter on developing Windows Phone 8 apps . Again there is also a separate chapter on “Extending the Visual Studio IDE” which teaches procedure to extend the IDE by applying your changes. From other chapters, you can learn about TFS enhancements, Testing using VS2013, Windows Azure with in-depth analysis and suitable examples.

It was a very good learning experience for me and if you are a passionate .Net developer who loves to learn more then my recommendation is to get it quickly.

Thanks !

JQuery: Synchronize two ASP.Net text boxes


jquery1

“The central concept behind jQuery is – find something, do something. More specifically, select DOM element(s) from an HTML document and then do something with them using jQuery methods. This is the big picture concept.” ___________________________Cody Lindley(jQuery Succinctly)

Introduction:

As the title suggests, this post is about interacting with two ASP.Net text boxes. If any change/interaction happens to one of the text boxes then we’ll try to do the same to the other text box, programmatically.

Live Demo & Code

Live demo here
Download code hereDownload

Designing the UI:

Let’s start with a new WebForm. The UI in this case requires only two multiline text boxes separated by some white spaces. To keep things simple we’ll concentrate on ‘how it works’ rather than ‘how it looks’. Now, the above quotation indicates that we need to find something and do something and thus it is a two step process. Here the ‘something’ is the text boxes and we can find them by their ids, class, tag, type etc. Particularly for this example we’ll employ the find by class trick. So, we need to mention same CssClass for both the text boxes and thing to notice is- this class may not exists at all.

<div>
     <asp:TextBox runat="server" ID="TextBox1" CssClass="sync" TextMode="MultiLine" Height="100px" />&amp;nbsp;&amp;nbsp;
     <asp:TextBox runat="server" ID="TextBox2" CssClass="sync" TextMode="MultiLine" Height="100px" />
</div>

Writing the Code:

In the script part, we’ll code for two things-

  • Synchronizing the text typed in to one text box with the other
  • Synchronizing the scrolling in both the text boxes

So, we will write two functions for these two specific actions. The first operation can be done on keyup event and the second with scroll event.

<script>
        $(document).ready(function () {
            $(".sync").keyup(function () {
                $(".sync").val($(this).val());
            });
            $(".sync").scroll(function () {
                $(".sync").scrollTop($(this).scrollTop());
            });
        });
</script>

Result:

As I already have said, we can demonstrate two operations

  • Typing anything in to one of the text box will result in displaying same text in the other text box, simultaneously.
  • Type few lines of code so that the scroll bar is visible. Now when we scroll any of the text boxes using either keyboard or mouse, other one will be scrolled automatically.

Explaination:

We have embedded our code inside $(document).ready() function as this function is executed after the DOM is loaded and before the page contents are rendered in to the browser. We can define a common function for both the textboxes with the use of CssClass name. The first action is defined inside the keyup event so that when we release the key the action will be performed. The action here is nothing but copying the content of the current text box to the other. The val() with no argument returns the value of the text box and when some argument is passed to it, sets the argument as value of that text box. I hope this made the thing very clear and further explanation is not required. Now consider about the second action. The scroll() event is fired when we try to scroll the content of text box either through key board or mouse. Again, scrollTop() with zero argument returns the current scroll position but, sets the scroll positions to a value same as the argument if called with an argument.

Conclusion:

Now we are able to develop a page with two text boxes which are synchronized upon typing text in to them or using the scroll bar. We can use more than two text boxes and it will still work as long as we use a common CssClass for them.

I hope you have enjoyed reading this post. Your feedback is very important to me.

JQuery: Consuming Page Method in ASP.Net


jquery1

Introduction: Page Method is an easy way to communicate with the code behind and JQuery functions for simple operations. Although it can be done using web services or WCF but, for simple operations there is no need to complicate things. This post is a simple demo of how we can consume page methods in ASP.Net using AJAX. Note: This example produces summation of two inputted integers as result and I know in real life this logic is not going to help you but, as I already said my intention is to show only a way to consume page methods with JQuey using AJAX so, you can definitely replace your logic here.

Demo:
1. Place two Textbox(ID: txtNum1, txtNum2) and a Button (ID: btnSum) in the page.

<div>Enter two integers and click <strong>SUM</strong> button to get the result
<div style="padding: 5px;">First Number</div>
<div style="padding: 5px;">Second Number</div>
</div>

2. Create a page method (SumIntegers()) in code behind with two integer parameters named num1 and num2. Don’t forget to assign [WebMethod()] attribute to it for which you need to add namespace System.Web.Services and to call the page method directly make it static.

using System;
using System.Web.Services;

public partial class WebMethodDemo : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e){}

    [WebMethod()]
    public static int SumIntegers(int num1, int num2)
    {
        return num1 + num2;
    }
}

3. Now the last thing to do is to write the JQuery section where we will be able to call the ajax method to get the desired result.

<script type="text/javascript">// <![CDATA[
        $(document).ready(function () {
            $("#btnSum").click(function (e) {

                var num1 = $("#txtNum1").val();
                var num2 = $("#txtNum2").val();
                $.ajax({
                    type: "POST",
                    url: window.location.href + "/SumIntegers",
                    data: '{"num1":"' + num1 + '","num2":"' + num2 + '"}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (msg) {
                        alert(num1+"+"+num2+"="+msg.d);
                    },
                    error: function () {
                        alert("Error occured. Please check inputs !");
                    }
                });
            });
        });

// ]]></script>

Explanation: As you may know, $(document).ready() function gets executed as soon as DOM is loaded and before the page contents are rendered in to the browser. We need to embed all the JQuery markup inside this function. Define an event handler for click event of button ‘btnSum’. Rest of the logic is written inside this event handler as we want to execute our logic on clicking the button. First retrieve the values from the textboxes. Now to perform the asynchronous HTTP(ajax) request, call the .ajax() method of JQuery with the url and necessary settings. If the ajax call succeeds then we can get the returned result using msg.d as the result will always be enclosed within the ‘d’ (since ASP.Net 3.5, which prevents direct execution of the string as script).

Downloads: Demo Project Download

I hope this is useful.

Thanks for reading and please don’t forget to add a comment.

Book: Visual Studio 2012 and .NET 4.5 Expert Development Cookbook


book
Book Title
: Visual Studio 2012 and .Net 4.5 Expert Development Cookbook
Author: Abhishek Sur (www.abhisheksur.com)
About Author: Abhishek Sur is a Microsoft MVP in Client App Dev since 2011. He is an architect in the .NET platform.  He is also a renowned public speaker and owns one of the most active  Microsoft user group named Kolkata Geeks.  His website abhisheksur.com guides both budding and experienced developers to understand the details of languages and latest technology. You may also follow him at Facebook or Twitter .

The very first thing I like about this book is its conciseness. Even though it is a 380 pages book you will find every aspect of the enhancement & new features introduced with Visual Studio 2012 and .Net 4.5 has been  explained extensively with proper examples. Starting with the Visual Studio IDE features, author marches us through the enhancement to ASP.Net, WPF etc. It has a dedicated chapter on memory management too.


I always go for the shortcuts while developing applications and also love to use features provided by my IDE for faster development. This book is a good educator of  IDE features and shortcuts introduced in Visual Studio 2012 which will help you in saving development time.
The key component of the book is, everything comes with a proper example. With this book, one can also learn –

  • In-depth memory management helps to to grasp under the hood happenings.
  • Asynchronous programming has become very important in the last few years and the book explains all about the necessity and usage of Asynchronous Programming in .Net
  • Enhancement to ASP.Net includes support for HTML5, Web Socket, JQuery and been explained beautifully.
  • Enhancement to WPF
  • Building Windows 8 style applications and communication & sharing between apps and devices.

In case you want to check it out before buy, you can download Chapter-1: Introduction to Visual Studio IDE features for free.

You can buy it from packtpub.com or amazon.com

Honestly speaking, I have been immensely benefited from C# internal series by the author on his blog DOT NET TRICKS and this book further helped me to discover the roots.
It is not conclusive by any means and there is a much more to grab. At last, if you are a .Net developer and a technology loving person then you’ll definitely love to add this book to your bookshelf.

HTML: Design table with thin single line border


SingleLineBorder_2

In this quick tips, we will see a way to render an HTML table with single line(thin) border.

Generally when we write mark-up for HTML table with border specified, it renders as Fig. A which looks ugly with a very thick border. In Fig. A I have used markup starting with following line

 
<table border="1" cellpadding="0" cellspacing="0" width="200px">

Figure A & Figure B

Now, to have the HTML table to be rendered as Fig. B with thin border, we need to add style attribute with css property border-collapse set to collapse.

<table border="1" cellpadding="0" cellspacing="0" width="200px" style="border-collapse:collapse;">

I hope, it’s useful.

SQL Server: Custom Sorting


AscDescThis is one of the many custom sorting we do with SQL queries. In few cases we may need to sort all records of a result set in a particular order except one specific row containing some specific value, which we may want to keep on the top of all other rows or we may like to move it to the bottom. Now, let’s relate this to few real time scenarios.

Scenario-1:

Sometimes we need an element to be placed at bottom in the list. For example, a Dropdownlist containing educational qualifications may contain  an item with text as “Other”. While showing all these educational qualifications from database we may need this particular element (i.e, “Other”) to move to the bottom in the list. If we try to sort this list in the SELECT query by normal ORDER BY keyword (like ORDER BY Qualification) then we may not get the desired sequence.

To get the desired result we need to use CASE WHEN keyword along with ORDER BY. Let’s illustrate this with following example-

Simple ORDER BY :


SELECT * FROM
(
 SELECT 'I.Sc.' AS Qualification
 UNION
 SELECT 'B.Sc.' AS Qualification
 UNION
 SELECT 'Other' AS Qualification
 UNION
 SELECT 'P.G.' AS Qualification
 UNION
 SELECT 'MCA' AS Qualification
 UNION
 SELECT 'DCA' AS Qualification
 UNION
 SELECT 'P.H.D' AS Qualification
) AS TBL
ORDER BY Qualification

OUTPUT:

5

ORDER BY with CASE WHEN :


SELECT * FROM
(
 SELECT 'I.Sc.' AS Qualification
 UNION
 SELECT 'B.Sc.' AS Qualification
 UNION
 SELECT 'Other' AS Qualification
 UNION
 SELECT 'P.G.' AS Qualification
 UNION
 SELECT 'MCA' AS Qualification
 UNION
 SELECT 'DCA' AS Qualification
 UNION
 SELECT 'P.H.D' AS Qualification
) AS TBL
ORDER BY CASE WHEN Qualification='Other' 
THEN 'ZZZZZ' ELSE Qualification END

OUTPUT:

6

EXPLAINATION:

Here we have set the value of item “Other” as “ZZZZZ” while the sorting is being done. Generally “ZZZZZ” will be the last item in any real world list and hence will move to the last.

Scenario 2:

In some other cases we may need the desired item to be moved to top of the result set. An example for this situation can be, a Dropdownlist containing items for Book Category. The list may have an item with text “General” , which is meant for those books whose category is not clearly known. Let’s assume that most of the books are supposed to belong this category. Then we have to place this item in the first index of the Dropdownlist so that it will be easier for user to pick the item. Now, we need a little modification in the ORDER BY clause as follows.


ORDER BY CASE WHEN Qualification='General' THEN NULL ELSE Qualification END

I’ll love to hear from you.

Thanks

You may also like :

Dynamic ORDER BY in SQL Server

CodeProject

ASP.Net: Disable TabIndex Focusing


If you need to disable/restrict focusing on one or more controls in a page then just mention TabIndex=”-1″.

This is useful particularly when you have some read only controls in your WebForm and you don’t want the control to move(focus) to those controls.

This is known to most of the web-developers but hopefully it will be useful to others.

Javascript: Thousand separator


We may use following javascript function to show numbers formatted with thousands separator.

Definition

function formatThousandPlace(orgNum) {
    arr = orgNum.split('.');    //split integer part &amp; fractional part
    intPart = arr[0];           //store integer part in a variable
    fractionPart = arr.length > 1 ? '.' + arr[1] : '';  //store fractional part in a variable
    var rgx = /(\d+)(\d{3})/;   //regexp to find thousand place
            
    while (rgx.test(intPart)) { 
        intPart = intPart.replace(rgx, '$1' + ',' + '$2');  //replace integer part after inserting a comma in the thousandth place
    }
    
    document.write(intPart + fractionPart); //write final value to the document
}

Function Call
Now, we can use it anywhere in the document where we want to show those numbers. For example: it may inside normal html elements or some dynamic ASP.Net controls like GridView, DataList, FormView etc.

<script language="javascript">formatThousandPlace('10000000.00')</script>

While calling this from ItemTemplate of an ASP GridView the syntax will be

<asp:TemplateField HeaderText="Price">
    <ItemTemplate>
       <script language="javascript">formatThousandPlace('<%#Eval("SalePrice") %>')</script>
    </ItemTemplate>
</asp:TemplateField>

I hope this is helpful.

ASP.Net : DropDownList containing category – sub category hierarchy


Introduction:

This article will provide us a way to embed both categories and sub-categories hierarchy in a single DropDownList exactly same as the image on the left.

I searched the web for this but did not find exactly what I needed. So, I planned to write my own logic for this. If somebody has a better idea then I really appreciate and request to share.

Description:

Lets take an example where we need to show states and districts of India in a single DropDownList with their hierarchy. Here state will behave as category and districts can be considered as sub-categories.

In DB part we need two tables i.e, States and Districts may be like following structure.

  • State       –> (StateId int pk, StateName varchar(50))
  • Districts –> (DistrictId int pk, StateId int fk, DistrictName varchar(50))

Or, this script may help you creating the tables


CREATE TABLE [dbo].[States](
 [StateId] [int] IDENTITY(1,1) NOT NULL,
 [StateName] [varchar](50) NULL,
 CONSTRAINT [PK_States] PRIMARY KEY CLUSTERED
(
 [StateId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

GO

CREATE TABLE [dbo].[Districts](
 [DistrictId] [int] IDENTITY(1,1) NOT NULL,
 [StateId] [int] NOT NULL,
 [DistrictName] [varchar](50) NULL,
 CONSTRAINT [PK_Districts] PRIMARY KEY CLUSTERED
(
 [DistrictId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

GO

ALTER TABLE [dbo].[Districts] WITH CHECK ADD CONSTRAINT [FK_Districts_States1] FOREIGN KEY([StateId])
REFERENCES [dbo].[States] ([StateId])
GO

ALTER TABLE [dbo].[Districts] CHECK CONSTRAINT [FK_Districts_States1]
GO

Now insert some sample data or you can execute this script.


/****** Object: Table [dbo].[States] ******/
SET IDENTITY_INSERT [dbo].[States] ON
INSERT [dbo].[States] ([StateId], [StateName]) VALUES (1, N'Odisha')
INSERT [dbo].[States] ([StateId], [StateName]) VALUES (2, N'West Bengal')
INSERT [dbo].[States] ([StateId], [StateName]) VALUES (3, N'Bihar')
INSERT [dbo].[States] ([StateId], [StateName]) VALUES (4, N'Jharkhand')
SET IDENTITY_INSERT [dbo].[States] OFF
/****** Object: Table [dbo].[Districts] ******/
SET IDENTITY_INSERT [dbo].[Districts] ON
INSERT [dbo].[Districts] ([DistrictId], [StateId], [DistrictName]) VALUES (1, 1, N'Mayurbhanj')
INSERT [dbo].[Districts] ([DistrictId], [StateId], [DistrictName]) VALUES (2, 1, N'Keonjhar')
INSERT [dbo].[Districts] ([DistrictId], [StateId], [DistrictName]) VALUES (3, 1, N'Khorda')
INSERT [dbo].[Districts] ([DistrictId], [StateId], [DistrictName]) VALUES (4, 1, N'Balasore')
INSERT [dbo].[Districts] ([DistrictId], [StateId], [DistrictName]) VALUES (5, 2, N'Hoogly')
INSERT [dbo].[Districts] ([DistrictId], [StateId], [DistrictName]) VALUES (6, 2, N'Howrah')
INSERT [dbo].[Districts] ([DistrictId], [StateId], [DistrictName]) VALUES (7, 2, N'Jalpaiguri')
INSERT [dbo].[Districts] ([DistrictId], [StateId], [DistrictName]) VALUES (8, 3, N'Aurangabad')
INSERT [dbo].[Districts] ([DistrictId], [StateId], [DistrictName]) VALUES (9, 3, N'Patna')
INSERT [dbo].[Districts] ([DistrictId], [StateId], [DistrictName]) VALUES (10, 4, N'Bokaro')
SET IDENTITY_INSERT [dbo].[Districts] OFF

Place a DropDownList in your page.


<asp:DropDownList ID="drpDistricts" runat="server"></asp:DropDownList>

Lastly do the coding required to bind the DropDownList. Things to remember are we have a single DropDownList and it should be meant for choosing a sub-category(District), which means categories should be disabled for clicking. Although there may be several ways like looping the sub-categories and inserting categories in-between etc. but, I personally prefer to query both of them in a single query.


SELECT '- '+DistrictName AS TextField,DistrictId AS ValueField,StateId FROM DBO.Districts UNION SELECT UPPER(StateName),0,StateId FROM dbo.States ORDER BY StateId,DistrictId

Put DataTextField =”TextField” and DataValueField=”ValueField”

Now, lets do the coding to disable the categories (States).



foreach (ListItem item in drpDistricts.Items)
 {
 if (item.Value.ToString() == "0")
 {
 item.Attributes.Add("Style", "color:maroon");
 item.Attributes.Add("Disabled", "true");
 }
 }

That’s all.
Thanks for reading.
Feedback or suggestion are most welcome.

ASP.Net: Download files from server with their original name


Introduction :

Purpose of writing this post is to share a way to resolve a very common but important issue with uploading-downloading file in ASP.Net. I don’t claim it to be the most efficient way but it works for me.

Problem:

While uploading a file to the server we may save it with its original file name and may code like-


FileUploader1.SaveAs(Server.MapPath("UploadedFiles/" + FileUploader1.FileName));

But, problem is if we upload another file with same name as previous file then the previous one will be replaced with the latest one. Now all the links for downloading both theses files will reference to the same file on the server.
Again we may resolve this issue by saving files with unique name on the server and may code like-

FileUploader1.SaveAs(Server.MapPath("UploadedFiles/" + DateTime.Now.ToString("yyyyMMddhhmmssfffffff") + System.IO.Path.GetExtension(FileUploader1.FileName);));

By doing this we will lose the original file name forever. But, in some or, more scenarios user may expect the file to be downloaded to his/her hard-disk with the original file name with which he/she uploaded the file to the server. (Example: Uploading-Downloading multiple resumes of a candidate).

We can solve this issue by storing both the names of a file i,e original & unique name on server.

The actual headache now comes in to picture. File is saved on the server with some unique name but we want the to change it’s name to the original name while user downloading it to his/her hard-disk.

Solution:

[View Demo]

The above said problem can be solved by following few steps. For the illustration I am taking a Gridview to show files for downloading and LinkButton for the download links.

  • Store both actual and unique names of the file in Database
  • Use a Hidden Field to store actual(unique) file name in the gridview
    <asp:TemplateField HeaderText="Uploaded File">
     <ItemTemplate>
     <asp:LinkButton ID="lnkDownload" Text='<%#Eval("FileNameOriginal")%>' runat="server" OnClick="lnkDownload_Click" />
     <asp:HiddenField ID="hfDownload" runat="server" Value='<%#Eval("FileNameActual")%>' />
     </ItemTemplate>
     </asp:TemplateField>
    
    
  • Now, put following code in the link button click event
    LinkButton lnkDwnload = (LinkButton)sender;
     GridViewRow grow = (GridViewRow)lnkDwnload.Parent.Parent;
     HiddenField hfDownload = (HiddenField)grow.FindControl("hfDownload");
     Response.AddHeader("Content-Disposition", "attachment;filename=" + lnkDwnload.Text);
     Response.ContentType = GetContentType(Server.MapPath("~/UploadedFiles/" + hfDownload.Value.ToString()));
     Response.TransmitFile(Server.MapPath("~/UploadedFiles/" + hfDownload.Value.ToString()));
     Response.End();
    
    

Note that I have used a method GetContentType() to get the content type/MIME type of the file to be downloaded.


private string GetContentType(string fileName)
 {
 string contentType = "application/octetstream";
 string ext = System.IO.Path.GetExtension(fileName).ToLower();
 Microsoft.Win32.RegistryKey registryKey = Microsoft.Win32.Registry.ClassesRoot.OpenSubKey(ext);
 if (registryKey != null && registryKey.GetValue("Content Type") != null)
 contentType = registryKey.GetValue("Content Type").ToString();
 return contentType;
 }

Note : Microsoft.Win32 is OS specific MSDN

For a universal solution we may use another way of getting the MIME type.


private string GetContentType(string fileName)
 {
 string ext = System.IO.Path.GetExtension(fileName).ToLower();
 switch (fileName)
 {

//add as many extensions of file types you expect to be uploaded

//for a complete list you may visit http://stackoverflow.com/questions/1029740/get-a-mime-from-an-extension

case ".doc": return "application/msword";

case ".docx": return "application/vnd.openxmlformats-officedocument.wordprocessingml.document";

case ".jpeg": return "image/jpeg";

case ".jpg": return "image/jpeg";

case ".bmp": return "image/bmp";

default: return "application/octet-stream";

}
}

Conclusion:

This works very fine for me. If you are facing problem then drop a comment, it will be my pleasure to help you. Any better idea is welcome.

Thanks for reading !