ASPDotNetChamp.Com

HTML Attributes : readonly VS disabled

2018-06-11T13:44:00.001-07:00

Recently, i have encountered a problem, that is i need to “disable” some text boxes after it pre filled it’s data from server. As a normal developer i decided to use the “disabled” property of the text box like below:

It works for me. Good! But my requirement expects some more functionalities. That is, whenever the value prefilled in the above text box, after the user clicks the “submit” button which inturn validate the value in client side and fire up the validation messages.

Here is what i stumbled! The problem arised! The “disable” property won’t allow you to edit. It will completely lock the control from edit. After that i come to know about the alternate property called “readonly”, which acts nearly like “disable” property, but one small exception you can fire the client side validations without any problem.

So my learning here is, if you want to lock the control entirely you can go with “disabled” property. If you want to just lock the control and wants to enable the validations means you can go with “readonly”! The above points are opt only for “text boxes” alone!

Below list provides a detailed difference between these 2 properties:

disabled	readonly
values not passed while submitting the form	values will be passed while submit the form
tabbing navigation not possible	allow tabbing navigation.
Unable to get focus.	Will get focus
Max. HTML controls support “disabled” property like <select>, <option> and <button>.	Not all form elements have readonly attribute suppor.

Hope this helps!

How to Start My Final Year Project in .Net?

2017-07-09T11:47:00.000-07:00

Most of the college students who are doing their final year projects (especially computer science students) and beginners are asked about the below questions:

How to start an ASP.Net Projects?
What are the basic Software I need to code .Net?
What are the books I referred to become better programmer?

In this post I just want to guide those people by providing some basic tips.

Prerequisite – Skills:
The below are the must have skill sets that are required for every beginner in ASP.Net.

.Net Architecture (CLR and BaseClass Library)
C# or VB.Net Language
ASP.Net (Web Form, Worker Process, AppDomain, Session, Cache, Authentication etc)

It is better how the .Net frameworks works which helps to the developer to grasp the rest of the things easily. If you want to go with ASP.Net you should learn any one of the .Net compatible language such that C# or VB.Net. ADO.Net always deals with Database related objects like Datasets, Datatables etc. In beginner level choosing Web Form will give an easy to move, way in ASP.Net. The above lists are specific to .Net.

Prerequisite – Software

Before start your project you need the below softwares:
1. Visual Studio
2. .Net Framework
3. SQL Server
For students and beginners express version of visual studio is enough. While this writing Microsoft released Visual Studio 2013. You can download the Visual Studio 2013 express for web development here. With that installation, .Net framework 4.5 also installed. So there is no separate download is not necessary.
In the meantime, Microsoft also introduced Visual Studio Community Edition, which is a complete set of IDE. So instead of going with Express Edition, you can try it. You can start download it from here.
Each and every website that are developed are data centric or data driven. That are data are stored and retrieved from a database like SQL Server. So you must need that one also. For SQL Server also Microsoft provide express version. You can get it SQL Server 2008 Express with SP2 here and SQL Server 2012 here.
For the above software installation you must need Windows 7 with SP1 or Windows 8.

Some Good Books for ASP.Net:
Below are my personal suggestion to sharpen your skills in ASP.Net as well as .Net Languages such as C# and VB.Net in some extend.

1. Programming ASP.Net By Dino Espotio (From Microsoft Press)
2. Professional ASP.Net 2.0/3.5/4.5 (from wrox publications)
3. C# 4.0 – The Complete Reference By Herbert Schildt

Online Tutorials & Trainings for ASP.Net:
For ASP.Net technology, there are so many good online tutorial sites available. Some of them for your reference:

www.asp.net/getstarted
http://www.c-sharpcorner.com/1/224/Asp-Net-programming.aspx
http://www.codeproject.com/KB/aspnet/
http://channel9.msdn.com/Tags/asp.net

What do you think?
The above are my personal experience. Did i miss anything or do you want to say something, please let me know you thoughts as comments.

ASP.Net MVC : TempData - A Closer Look

2016-10-12T13:43:00.001-07:00

As an ASP.Net MVC developer, you may frequently involved with these terms like Tempdata, viewdata and viewbag. In this post, I’m going to take a close look about TempData and how it works.

Read: ViewBag, ViewData and TempData

For explanation purpose, I’m going to create a small MVC project with 3 views and a controller.

Index.cshtml – This is the default view, which is loaded by the default action method.
Page1.cshtml
Page2.cshtml

And the controller named as:

DefaultController.cs

TempData:

We will start with TempData. I will set the value of TempData in the Action method “Index”, like below:

using System.Web.Mvc;
namespace SessionHandlingInMVC.Controllers 
{ 
    public class 
DefaultController : Controller 
    { 
        // GET: Default         
public ActionResult Index() 
        {             
          TempData["MyTempDataValue"] = "Value initialized in Index Action Method"; 
          return View(); 
        } 
        
public ActionResult Page1() 
        { 
            return View("Page1"); 
        }
public ActionResult Page2() 
        { 
      return View("Page2"); 
        } 
    } 
}

In the “Index” view, we can get the value of the initialized “Tempdata” value as below:

<h2>Index Page</h2>
<p> 
   @{ 
       string strTempDataValue = 
(string)TempData["MyTempDataValue"]; 
    } 
    @strTempDataValue 
</p>

Please take a close look how the value is retrieved from the “TempData”.You can’t directly assigned to it the specific type. A typecasting is needed, when you retrieved the value from Tempdata. The above snippet just get the value from TempData dictionary and print it on.

In the next snippet, I’m going to change the above snippet a little bit like below:

<h2>Index Page</h2> 
<p> 
   @{ 
       string 
strTempDataValue = (string)TempData["MyTempDataValue"]; 
    } 
@strTempDataValue
    @{ 
        string strAnotherRead = 
(string)TempData["MyTempDataValue"]; 
    } 
    @strAnotherRead 
</p>

In the above snippet, we have read the TempData value as twice. As a result the value also printed twice in the view.

The above result confirm that, you can read the TempData value inside the current request as much time as possible.

In the following snippet, I’m going to read the value of the TempData in the next view, which is rendered by the action method “Page1”.

<h2>Page1</h2> 
<p> 
    @{ 
        string 
strTempDataValueInPage1 = (string)TempData["MyTempDataValue"]; 
    } 
    
@strTempDataValueInPage1 
</p>

In order to test the above scenario, first you must render the view “Index” (since in that action method alone the tempdata value is initialized) and then you call the “Page1” view. As you can see that, TempData value is not available in the next request.

Wait! The conclusion is not yet over. I want to try some thing more. That is, as per the above codes:

1. First I render the “Index” page, where the Tempdata value is read and print it.
2. After I call the action method “Page1”.

What will happens if I didn’t read the value of Tempdata in “Index.cshtml” view and try to read the “Page1.cshtml” view. In order to test, I made the below changes in Index view.

Index.cshtml:

<h2>Index Page</h2> 
<p> 
    No Temp Data read here 
in Index.cshtml 
</p>

Page1.cshtml:

<h2>Page1</h2> 
<p> 
    @{ 
        string 
strTempDataValueInPage1 = (string)TempData["MyTempDataValue"]; 
    } 
    
@strTempDataValueInPage1 
</p>

Now, you got the value in the value of Tempdata in the next request. That means, your first request render the “Index” page, and the next request render the “Page1”.

If you refresh the above page, you will get the result as below: that is, the Tempdata is unavailable once it read. So you get the Tempdata value as empty.

So the conclusion is : After Tempdata value is initialized and it’s not yet read in the current request, then it will be available in the next request. Once it is read, it will not available.

Few words about Keep() and Peek() method:

After you read the tempdata, if you call the keep method, it will marks the all tempdata keys or specific key for retention.

If you want to fetch the key and mark the key for retention (keep the key for the next request) then you can go with Peek method.

Connection between Session and Tempdata:

Yes, Tempdata uses “Session” object in the backend. That is, whenever you use a tempdata it will handled by session. But the main difference is, the Tempdata will be removed (by default) after the first read.

At the same time, you may have the doubt, that either tempdata is specific to the user as like as “Session”? The answer is Yes. Since the Tempdata, is backed up with Session, Tempdata is also specific to user, like Session object.

Also, the another question is, since the Tempdata backed up with Session, what will happened if we go with same key for session and Tempdata as like below:

The answer is it won’t colloid. It will considered as a different one and it will serve its own purpose as per the convention.

In summary:

TempData store the value using key.
TempData backed up with Session.
Need type casting when the stored value retrieved.
The life time of tempdata is little bit tricky. It will be available till you read it first time. After you read it, it will be marked for deletion. So in the next request, it won’t available. However, you can extend it’s life time by using keep and peek method.

Readers, did i missed anything? Share your feedback as comments.

ASP.Net : Binding Dropdown in ASP.Net

2016-10-10T19:55:00.000-07:00

Binding dropdown is a common need in ASP.Net. The below code snippet is used to bind the datatable values to the dropdown list.

Markup:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:DropDownList runat="server" ID="ddlCity">
            </asp:DropDownList>
        </div>
    </form>
</body>
</html>

Code behind:

        protected void Page_Load(object sender, EventArgs e)
        {
            if(!IsPostBack)
            {
                //Substitute your DB and Server name below
                string conString = @"Data Source=Your_DBServer_Name;Initial Catalog=Your_DB_Name;Integrated Security=True";
                DataTable dtCity = new DataTable("City");
                // Create Connection and get the DB values
                using (SqlConnection connection= new SqlConnection(conString))
                {
                    SqlCommand command = new SqlCommand(conString,connection);
                    command.CommandText = "Select city_code,city_description from tblCity";
                    SqlDataAdapter adapter = new SqlDataAdapter(command);
                    adapter.Fill(dtCity);
                }
                // Set the Datasource
                ddlCity.DataSource = dtCity;
                ddlCity.DataValueField = "city_code";
                ddlCity.DataTextField = "city_description";
                // Finally Bind it
                ddlCity.DataBind();
            }
        }

ASP.Net MVC - ViewBag, ViewData and Tempdata

2016-08-02T21:08:00.001-07:00

As an ASP.Net MVC developer, you may frequently involved with these terms like Tempdata, viewdata and viewbag. In this post, I’m going to discuss about what are they and what are the main difference between them.

ViewBag:

ViewBag is dynamic in nature.
There is no type casting needed.
Life time lasts only for the current request.

View Data:

ViewData is stored as a dictionary. You can store a value using a key.
Type casting is needed, when you retrieve.
Life time lasts only for the current request.

Tempdata:

It’s also store the value using key.
Need type casting when the stored value retrieved.
The life time of tempdata is little bit tricky. It will be available till you read it first time. After you read it, it will be marked for deletion. So in the next request, it won’t available. However, you can extend it’s life time by using keep and peek method.

Hope this helps!

Visual Studio 2015 : Unable to open .CSHTML files

2016-07-17T01:19:00.000-07:00

                                 Visual studio 2015 is very cool IDE. It offers more and more benefits to increase the productivity of a developer. For my local development I’m using VS 2015 “Community” Edition. Also, I have updated with latest “Update 3” from here.

The Problem:
                         But after some days, when i want to open a .cshtml file in my solution, VS throws some strange isssue, that is a pop up throws with the message “"Operation could not be completed. Invalid Pointer."

The Solution:
                     I’m not pretty much sure, this error is because of “Update 3”. But i soloved this issue by following the below steps:

Close your VS instance
Open the “Run” dialog (by pressing the short cut Windows Key +R).
Type “%LocalAppData%” (without quotes).
It will open the path “C:\Users\YOURUSERNAME\AppData\Local” in that navigate to “Microsoft –> Visual Studio –> 14.0 –>ComponentModelCache”.
It contains some “cache” files, just delete them all.
Now open the VS 2015 again. You can open the .cshtml files, without any problem.

The above trick, worked for me. This issue also discussed in this github thread. There are various solutions disscused over there, but i found this one is working for me, which is among one they discussed.

If you are one of the victim, hope this post may be useful for you!

WCF : Service Configuration Editor

2016-07-13T15:44:00.001-07:00

                  Windows Communication Foundation involves lot of configuration apart from service coding. Configuring the WCF service is a tedious process also. In order to configure the WCF Services, we need to put our hand mostly on the web.config file, where all the configuration elements resides. As a WCF service developer, I know it is little bit tedious process to configure an simple binding element in the configuration section.

In order to simplify (as much as possible) the configuration process, Microsoft provides an utility to configure the WCF service called “WCF Service Configuration Editor”, which is available as a built –in utility with Visual Studio.

In this particular post, i’m going to explain how to use the WCF Service Configuration editor and how to set different end points with it.

Open WCF Configuration Editor:
                             You can open the WCF Configuration Editor using the menu “Tools –> WCF Configuration Editor”. Otherwise, you can right click on the Web.config file and select “Edit WCF Configuration” on the context menu.

Create Binding:

1. In the WCF Config Editor, select “Bindings” in the left “Configuration” tree view and click the “New Binding Configuration” link button.

Add Binding Configuration

2. It will open the “Create a new binding” dialog. In this select the respective binding you want. For this, example i will go with “Basic Http Binding” option and then click “OK”.

3. WCF Cofig Editor, will provide the all the attributes in the table format
under the “Binding” tab. You can configure the attribute by setting the valid values. I have set the “Name” as “Sample Http Binding”.

Configure Binding Attribute

4. If you select “Security” tab, security related attributes are populated as a table format,where you can set the values related to security.

Security Settings

Create End Point:

1. Select the "Endpoints” node in the “Configuration” treeview. Then click “New Client Endpoint” link button.

2. Previously we have created “Basic Http Binding”, So we need to select the “binding” as “Basic Http Binding”.

3. For “Contract” attribute value, click the browse button and select the WCF service’s dll location. It will extract the Contract from the dll and put it there. Otherwise, you can manually set it.
4. Set the “Address” attribute as the web service location, that is the url, where the WCF service was hosted.
I have set the mandatory attribute alone in the above steps. There are lot of options will be available under the “Identity” tab. if you need any one of these you can set it.

So we are good with our configuration, just save it using “File –> Save”. As a result, the “Web.config” file will be updated with the values which we have configured just now.

Web.config with configured binding and endpoint

As a whole, if you are going to configure some complex binding at this time “WCF Configuration Editor” really helpful!

Readers! I hope this article is helpful. Please let me know your thoughts as comments!

Conventional File Uploading in ASP.Net

2016-05-03T17:12:00.000-07:00

This post is going to give some basic ideas about file uploading in ASP.Net. Mostly every data driven web site will provide this feature. Also, every ASP.Net developer face this kind of requirement at least once in his/her developer life.

Note:
The file upload control renders slightly/completely different from browser to browser. If you want to give a consistent UI, you can check my previous post here.

If you want to upload a file in ASP.Net, it is very simple. You need to include “File Upload” control on your form and place a command button, which triggers the upload process and save the respective file in the specified location on the server.

<div> 
           <asp:FileUpload runat="server" ID="fileUploader" AllowMultiple="false" /> 
           <br /> 
           <asp:Button runat="server" Text="Upload" ID="btnUpload" OnClick="btnUpload_Click" /> 
</div>

On the code behind you should include the below lines:

protected void btnUpload_Click(object sender, EventArgs e)    
       {     
           if(fileUploader.HasFile)     
           {     
               fileUploader.SaveAs(Server.MapPath(@"~\UploadedFile\")+ fileUploader.FileName);     
           }     
       }

Note:
In the above code snippet, when you click the button, it will save the file in a specified location on the server. As per the above code, it looks for the directory “UploadedFile” in the server. So you need to create the directory on your application, before executing the code, otherwise the application will throw an error while run.

Upload specific File Types:
In some cases, we may want to force the user upload only the specific file types. This is an inevitable scenario for the professional programmers. In this case, we should validate the file types, if it pass then we can go with upload. Otherwise, the user will be notified by an “error” message. In order to validate, I’m going to use the built-in ASP.Net validation control.

<div> 
            <asp:FileUpload runat="server" ID="fileUploadExcel" AllowMultiple="false" /> 
            <br /> 
            <asp:Button runat="server" Text="Upload" ID="btnUploadExcel" OnClick="btnUploadExcel_Click" /> 
            <asp:RegularExpressionValidator runat="server" ControlToValidate="fileUploadExcel" 
                ValidationExpression="^.*\.xls[xm]?$" 
                ErrorMessage="Please upload excel file only"></asp:RegularExpressionValidator> 
</div>

The code behind not much changed compare to the previous one.

protected void btnUploadExcel_Click(object sender, EventArgs e)    
        {     
            if (fileUploadExcel.HasFile)     
            {     
                fileUploadExcel.SaveAs(Server.MapPath(@"~\UploadedFile\") + fileUploadExcel.FileName);     
            }     
        }

Restrict File Size:
In some cases, we need to restrict the file size. Say for example, we may need to force the user to upload an excel file not more than 1 MB. At this case, we should validate this one from the server as shown below:

protected void btnUploadExcel_Click(object sender, EventArgs e)    
      {     
          if (fileUploadExcel.HasFile)     
          {     
              int fileSize = fileUploadExcel.PostedFile.ContentLength;     
              if (fileSize <= 1048576)     
                  fileUploadExcel.SaveAs(Server.MapPath(@"~\UploadedFile\") + fileUploadExcel.FileName);     
              else     
              {     
                  lblError.Text = "File size exceeds more than 1 MB.";     
              }     
          }     
      }

Upload Multiple Files:
In some cases, we may need to upload multiple files. ASP.Net gives an easy way to achieve this. The file upload server controls had a property called “AllowMultiple”, which is a boolean value (either true or false). By turn it as “true”, the file upload control control allows you to select multiple files.

<div> 
<asp:FileUpload runat="server" ID="fileUploadMultiple" AllowMultiple="true" /> 
<br /> 
<asp:Button runat="server" Text="Upload" ID="btnUploadMultiple" OnClick="btnUploadMultiple_Click" /> 
<asp:RegularExpressionValidator runat="server" ControlToValidate="fileUploadMultiple" 
ValidationExpression="^.*\.doc[x]?$" ID="RegularExpressionValidator1" 
ErrorMessage="Please upload word file only"></asp:RegularExpressionValidator> 
<asp:Label runat="server" ID="Label1" Style="color: red;"></asp:Label> 
</div>

In the code behind, the code like below. It get the files and loop thru the selected files and check the file size then store it in the particular path.

protected void btnUploadMultiple_Click(object sender, EventArgs e)    
{     
    if (fileUploadMultiple.HasFile)     
    {     
        HttpFileCollection files = Request.Files;     
        for (int i=0;i < files.Count;i++)     
        {     
            HttpPostedFile file = files[i];     
            if(file.ContentLength >0)     
            fileUploadMultiple.SaveAs(Server.MapPath(@"~\UploadedFile\") + file.FileName);     
        }     
    }     
}

I hope this post gives an some basic understanding and standard validations during the File upload in ASP.Net. Let me know your thoughts as comments. Happy Coding!

Identify the ASP.Net Version of an ASP.Net Application from Browser

2016-03-13T14:12:00.001-07:00

In my previous article, i explained about how to use IE Developer tool bar. As a web developer, whenever I browse a “cool” website, i always want to know about what type of technology behind this. As an ASP.Net developer, in this post, i’m going to discuss about how to identify a particular website is built with ASP.Net or Not from the popular browsers like IE, Chrome and Firefox. There are various ways exist, I’m here listed few of them.

Analyze the Source Code:

If a website is built with ASP.Net Webforms you can identify it by review the “markup” source code from the browser. If the website built with web form then you can find the hidden element called “viewstate” in the source code. This will hint that the page you are viewing is developed using ASP.Net Web Form.

This is the easiest way to find whether the website you are viewing built with ASP.Net web form or not. But this technique, will not tell the version of the ASP.Net. If you want, to know about the version information also then you need to follow any one of the below ways.

Use third party plugins:
Yes! There are third party browser plugin also available for this purpose. You can find the one in the below url: http://builtwith.com/toolbar
This plugin is available for most of the popular browsers like Firefox, Chrome and Safari except IE, when i write this post. Just include this on your browsers and you can find out the technology behind with the currently rendered on the browser.

Using Built with Addon

Using Developer Toolbar:
IE doesn’t require any plugins or add-ons. You can find the technology behind this using the built-in tool called “IE Developer Toolbar”. This toolbar, contains a tab called “Network”. In this tab, you can find the necessary detail.

Read : How to use IE Developer Toolbar.

Using Fiddler:
As all of us know that Fiddler is a famous Web Debugger, which is also provide the facility to analyse the response header elements as the previous one. If you don’t have Fiddler you can download it from this url: https://www.telerik.com/download/fiddler

Readers, hope you enjoy this post. Let me know your thoughts as comments!

F12 Developer Toolbar in IE– A Good Rescuer

2016-03-10T20:25:00.000-08:00

As a web developer, every one will dealt with Internet Explorer. Since our ultimate final output will be render the proper “angle brackets” in browser. In some cases, we may find difficult to debug the rendered HTML. At that time, F12 developer toolbar comes as a rescuer. In this tutorial i have used Internet Explorer Version 10. If you are using the next versions of IE, the look and feel of the toolbar vary slightly, but there is no functional changes that are discussed here. :)

So what is F12 Developer Toolbar:
F12 Developer Toolbar is a built-in add-on with Internet Explorer. It will popup from IE when you press F12 Key on your keyboard. Alternatively you can get it by clicking “Tools –> F12 developer tools”. By default, it will be stick with the bottom of IE. In the following section I have mentioned the the uses of F12 Developer toolbar.

F12 Developer Toolbar

Using F12 Developer Toolbar:
There are lot of uses of F12 Developer Toolbar. In this article I am going to highlight few of them. With F12 Toolbar you can:
1) Select DOM Elements
2) Debug Javascript
3) Identify the Javascript errors or missing HTML tag errors on your files.
4) Trace the applied CSS classes.
5) Analyze the Network Timing

Set up the code:
In order to explain the above functionalities I have used the below HTML markup. It’s a simple ASPX file with a textbox and a button. The text box accepts an integer value and validate it and show the alert box accordingly.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="SessionDemo.Home" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Home.css" rel="stylesheet" />
    <script type="text/javascript">
        function validateAge()
        {
            var age = document.getElementById("txtAge").value;
            if(isNaN(age))
            {
                alert("You have entered valid age");
            }
            else {
                alert("You have entered invalid age");
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            Enter Age: 
            <input type="text" id="txtAge" />
            <input type="button" id="btnValidate" value="Validate Age" onclick="validateAge();" class="btn"/>
        </div>
    </form>
</body>
</html>

Select DOM Elements:
This is an important feature of Developer Toolbar. You can easily navigate the particular DOM elements by clicking on it on the IE. So that you can easily spot the respective "piece of markup" for that element in the whole page. This facilitate to easily fix the issues related to design.In order to select the DOM element, you need to do the following:

Select the Arrow mark icon (Select Element by click) on the top left in Developer toolbar.
Now you can select any element in the page(Elements are highlighted with the rectangle boxes).
When you select the element, soon the IE Developer toolbar will highlight the particular markup. Refer the below screen shot.

Select DOM Element

Debug JS using F12 Toolbar:
In order to debug the JS, just run the above HTML page in IE and follow the steps:
1) Open F12 Toolbar
2) Go to “Script” tab, where the entire markup listed.
3) Place the breakpoint on the javascript. (Please refer the below screen how to set the breakpoint)
4) Click on the “Start debugging” button.
5) Since the Js function is triggered when you click the button. Just click the button to start the debugging.

Setup the Breakpoint

Debug JS in IE Developer Toolbar

Identify the Javascript errors:
In some case as a developer we may do some mistakes typo error. As an example, refer the below code at line no 10, wrongly typed as value() instead of value (which is get the text box value). There is no such method is available in JS. It will be easily identified by IE developer toolbar. The point here is, these type of Javascript related issues easily identified by IE Developer tool bar.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="SessionDemo.Home" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Home.css" rel="stylesheet" />
    <script type="text/javascript">
        function validateAge()
        {
            var age = document.getElementById("txtAge").value();
            if(isNaN(age))
            {
                alert("You have entered valid age");
            }
            else {
                alert("You have entered invalid age");
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            Enter Age: 
            <input type="text" id="txtAge" />
            <input type="button" id="btnValidate" value="Validate Age" onclick="validateAge();" class="btn"/>
        </div>
    </form>
</body>
</html>

In order to identify these kind of issues, you should follow the below steps:
1) Render you page in IE.
2) Open F12 toolbar.
3) Select the “Console” tab.
4) Since this JS function is called when you hit the button “Validate Age”. So just click on it.
5) You can see the error messge and when you click on the hyper link detail it will point out the repective line that causes the error.

Identify Javascript Error

Identify missing HTML tag errors:
Most of the time we may not closed the end tag of the HTML element. Most of the time it will not cause any issues luckily. In some worst cases, it will collapse all the design of your page. IE Developer tool bar is very much helpful in this case also. It will throw a warning message in the “Console” if your markup missed out anything like missing closing tag.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="SessionDemo.Home" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Home.css" rel="stylesheet" />
    <script type="text/javascript">
        function validateAge()
        {
            var age = document.getElementById("txtAge").value();
            if(isNaN(age))
            {
                alert("You have entered valid age");
            }
            else {
                alert("You have entered invalid age");
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            Enter Age: 
            <input type="text" id="txtAge" />
            <span><span>
            <input type="button" id="btnValidate" value="Validate Age" onclick="validateAge();" class="btn"/>
        </div>
    </form>
</body>
</html>

As you see the above code missing a closing tag in the “span” element at the line no 26. When you run the page you can see the warning message in the console like below:

Identify Missing HTML Tags using Developer Toolbar

Trace CSS:
In some cases, we may require the to change the applied css, in the page to achieve the exact design as per requirement we have. Normally, as a developer we render the page in browser and comes to the source code and adjust the CSS classes then again go to and run the page in browser to check the changes.
In these kind of scenario, F12 developer tool bar plays a vital role to save developer’s time. With the help of F12 developer tool bar, you can edit your applied CSS classes and see the result immeditately in the browser.This feature always helps a lot in terms of saves our time.
For demo purpose, i have used a simple CSS file and included in the ASPX file.In order to edit/trace the applied CSS classes, you need to follow the below steps:
1) Render you page in IE.
2) Open F12 toolbar. (by press F12 toolbar)
3) Select the “CSS” tab, it will list all the CSS elements used in the page.
4) You can remove the applied style by uncheck the check box. Also, you can create your own rule and apply and view it the browser itself.

Trace CSS using IE Developer Toolbar

Analyze Network Timings:

In some scenario, you may need to want to know about the network timings that took for each requests. These kind of analysis are helpful to do performance related improvements on the browser end. In such case, the "Network" tab in the IE Developer toolbar plays a vital role. You need to follow the below steps to work with network tab:
1) Render you page in IE.
2) Open F12 toolbar. (by press F12 toolbar)
3) Select the “Network” tab.
4) Click “Start debugging” (When you click, the button text will be modified as “Stop debugging”).
5) Then you need reload the page (by pressing F5). This is because whenever the page loads at that time only the files are downloaded from the server.

Network Tab in IE Developer Toolbar

About Other Browsers:

Other popular browsers also provide these kind utilities. Chrome offers in the name of "Developer Tools" and Firefox provide as "Inspect Element". These tools also provide the same kind of facilities like IE Developer Toolbar.

I hope you enjoyed this tutorial. For beginners it will give some good idea about the IE Developer toolbar. Let me know your thoughts as comments. :)

Visual Studio Tips and Tricks -13 : Debugging with Visual Studio

2016-02-07T15:15:00.000-08:00

Visual Studio is a great IDE for developing all type of Microsoft desktop/web stack applications. There is no doubt on that!. One of the main feature provided in Visual Studio is it’s capability provide more options to debugging the applications. In this post I explained some basic concepts about debugging in Visual Studio.

You can also check my other Visual Studio Tips here.

Setup the environment:

In this post I’m using Visual Studio 2015 Community edition. Based on your version of Visual studio some options may differ. For simple and neat explanation, here I’m going to use a simple for loop C# code snippet.

So What is breakpoint?
When you run the program in Visual Studio IDE, if you want to check the execution of a particular routine or function at that time you can set the breakpoint. Probably, it set before to run the application. So when the program executes, the breakpoint hits and the program waits there. So that you can step into the program and take a deep look into the code and check the values there itself. This is the main advantage of breakpoints.

Set normal Breakpoint:
Set the breakpoint in an application is very simple. You can hit the F9 key or you can click on the left most border in Visual Studio. It will keep the break point on the particular line.
After setting the break point, Visual Studio indicate the particular line with the Red color and preceded with a dot like below.

Breakpoint-in-VisualStudio

In these kind of break points, it will hit without any conditions. So whenever, the execution cross the line it will simply hit there.

Set Conditional Breakpoint:
So as we discussed in the previous section,say for example, if we set the break point with in a loop it will hit the break point without any condition. So the break point is hit often. Instead of this, we may want to set some conditions. Let’s see how we can do it.

1. Right click on the break point and select “Conditions…” in the context menu.

Conditional-Breakpoint-Menu

2. Visual Studio 2015 offers the below “Breakpoint Settings” window to set up the condition.

Conditional-Breakpoint-Window

3. Here I’m going to set the “Conditions” as : When the counter value(i) is greater than 5 at that time it will hit the break point. That means, till the value of the counter value is 5, it will not hit. After that it will hit.

Set-Conditions

In some cases you may want to track based on some process id or thread id etc. Visual studio also give options for this.

In some cases, we want to count the “Hit count”,meant whenever the break point hits it will consider as a hitcount. You can specify it by selecting “Hit Count” list item as below:

Breakpoint-Window-HitCount

Set Actions:
“Breakpoint Settings” window also offers that log message to Output window. At that you can make use of “Actions”. There are some special keywords are there, which have a special meaning when you use in the “Action” text box.

Breakpoint-Window-Action-SpecialKeyword

When you specify Action alone, there is a checkbox named “Continue execution”, if you check this the breakpoint will not hit. You can see the message in the “Output Window”.

Breakpoint-Window-Specify-Action

Breakpoint-Window-Result-in-OutputWindow

In the above action, we specify the special keyword "$Function", which prints the current function name as you see in the above screen shot.

Disable Break points:
In some cases, you may want to continue the execution of your program without hitting the breakpoints and later cases you may need them. At that time you can use the "Disable Breakpoint" option by using the short cut key "Ctrl + F9" key. Later cases, you can use the same short cut key to "Enable Breakpoint". You can make use of these options during run time also.

Disabled-Breakpoint

Readers, hopefully this tutorial helps you to understand about the various debugging options provided by Visual Studio. Let me know your thoughts as comments. Happy programming!

Replace Special character from string using Regular expression in C#

2016-01-06T18:04:00.001-08:00

In one of the forum post, the poster asked to

Remove all the special character
Then Remove the space and replace with _ (underscore) character

Say for example, if he gave, the input string as “Levi Jeans (Blue) & yellow 101 – 150Ah” and the output he wants as “Levi_Jeans_Blue_yellow_101_150ah”.
Solution:

            string yourInput = "Levi Jeans (Blue) & yellow 101 - 150Ah"; 
            Regex rgx = new Regex(@"[^a-zA-Z\d\s]"); 
            // Replace Special Charater and space with emptystring 
            string finalOutput = rgx.Replace(yourInput,""); 
            Console.WriteLine(finalOutput); 
            Regex rgx1 = new Regex("\\s+"); 
            // Replace space with underscore 
            finalOutput = rgx1.Replace(finalOutput, "_");

Open Live Writer–An alternative for Windows Live writer

2016-01-04T16:55:00.000-08:00

                     For the last couple of year, i have used a windows essential tool called “Windows Live Writer” for blogging. Yes! It’s made my job easier. It reduces huge amount of work regarding formatting, insert images etc., in my blog post. Literally, I’m a big fan of it.
                        But most recently, Google changed it’s authentication mode and adopt a new authentication technique. So whenever you tried to post/publish a draft you will get the below error:

As a remedy, I Googled and Binged a lot and find an another alternative called “Open Live Writer”. You can download it from here. It’s a opensource editor, developed by a group of people inside and outside (.NetFoundation) Microsoft. If you want to participate you can get the source from: https://github.com/OpenLiveWriter/OpenLiveWriter. If you want to know about more Scott Hanselman’s post is very much helpful, which discusses removed features and features on the way in OLW etc.,

One of the main draw back that I found in OLW(Open Live Editor) is, it missed out the “Automatic spell check”, which I thought all bloggers love that. Another good news is you can run OLW and Windows Live Editor side by side.As a tweak for the “Spell Check Issue”, I’m still uses Windows Live Editor to draft my blog and publish it by OLW. Hope this tweak is still worth mentioning!

Hope this post will help for someone!

December Month Winner in C# Corner

2016-01-04T11:37:00.000-08:00

I’m very much happy to announce that, I’m also one of the monthly winner in C#Corner for the month December 2015. This month award is something special to me since third time in a row, I received this award. I’m very much happy and thankful to all of my readers,friends and colleague who are all always improves me a lot!

Got My New Year Gift : Officially CSharpCorner MVP

2016-01-03T10:57:00.000-08:00

                            I’m very much happy to announce that I got awarded as C# Corner MVP for 2016. I officially received a mail from C# Corner on 2nd Jan 2016. I believe this is one of my biggest milestone achievement in my carrier, since this is my first MVP award. This award really induce me more to achieve new heights within ASP.Net community. Without my family support this award is not possible, especially my Mother, Dad, “Lovely” Wife and my Son “LittleMaster” Subin. My hearty thanks to C# Corner Team, Friends and my colleagues!!! Congrats to all the other winners also,
                   Personally, I want to dedicate this award to my close “late” friend SathyaSeelan. Really i miss you Sathya, I believe you are always with me!

CRUD Operation - ASP.Net MVC with ADO.Net

2015-12-25T06:58:00.000-08:00

In this post, I’m going to discuss about the CRUD(Create, Read, Update and Delete) Operation in an ASP.Net MVC application by using raw ADO.Net. Most of the new learners, who started to learn MVC asked this frequently. That’s the main reason behind this tutorial.

Configuration:
For this particular application, I have used the below configuration:
1. Visual Studio 2015
2. SQL Server 2008
In order to keep my hand clean, I have used a simple table to do the CRUD operation.

Step 1:
Execute the below script on your DB

SET ANSI_NULLS ON 
GO

SET QUOTED_IDENTIFIER ON 
GO

SET ANSI_PADDING ON 
GO

CREATE TABLE [dbo].[tblStudent]( 
    [student_id] [int] IDENTITY(1,1) NOT NULL, 
    [student_name] [varchar](50) NOT NULL, 
    [stduent_age] [int] NOT NULL, 
    [student_gender] [varchar](6) NOT NULL, 
CONSTRAINT [PK_tblStudent] PRIMARY KEY CLUSTERED 
( 
    [student_id] 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

SET ANSI_PADDING OFF 
GO

Step 2:
Create an “Empty” ASP.Net.MVC 4 application in Visual Studio 2015.

Step 3:
Add an “Empty” Controller by right clicking on the “Controller” folder select “Add” then select “Controller..”. In the popup select “MVC 5 Controller” then click “Add”. In the next popup you should give the name of the as “CRUDController”.

After add the controller, you may noticed as per the “convention” in ASP.Net MVC under the “Views” folder, a new folder named “CRUD” also created.

Step 4:
Our DB access code are going to be placed inside the “Models” folder. Model is just a “Class” file. So we are going to create a Model class for our purpose as below:
1. Right click on the “Model” folder. In the context menu select “Add” then choose “New item..”.
2. In the popup, select “Code” then choose “Class” and name the class file as “CRUDModel” then click “Add”. That’s all!

Step 5:
Till now we created classes for “Controller” and “Model”. We didn’t create any views till now. In this step we are going to create a view, which is going to act as a “home” page for our application. In order to create the view:
1. Right click on the “CRUD” folder under the “Views” folder in the context menu select “Add” then choose “View..”.
2. In the popup, give “View Name” and uncheck the “Use a layout page” checkbox. Finally click “Add” button.

Step 6:
We don’t have a controller named “Default”, which is specified in the “RouteConfig.cs” file. We need to change the controller’s name as “CRUD”, in the default route values.

Route.config:

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 
using System.Web.Routing;

namespace MVCWithADO 
{ 
    public class RouteConfig 
    { 
        public static void RegisterRoutes(RouteCollection routes) 
        { 
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute( 
                name: "Default", 
                url: "{controller}/{action}/{id}", 
                defaults: new { controller = "CRUD", action = "Index", id = UrlParameter.Optional } 
            ); 
        } 
    } 
}

After the above change, just press F5 in visual studio, to verify that our application works fine without any error.
Step 7:
In order to achieve the complete CRUD operation, I’m going to add number of views as described in the Step 5. Here is the complete list of views and it’s purpose.

View	Purpose
Home.cshtml	This is the default view. Loaded when the application launched. Will display all the records in the table
Create.cshtml	Displays control’s to insert the record. Will be rendered when the “Add New Record” button clicked on the “Home.cshtml” view.
Edit.cshtml	Displays control’s to edit the record. Will be rendered when the “Edit” button clicked on the “Home.cshtml” view.

Step 8:
The model class, contains the all the “Data Access” logic. In other words, it will interact with Database and give it back to “View” thru “Controller”.

using System.Data; 
using System.Data.SqlClient;

namespace MVCWithADO.Models 
{ 
    public class CRUDModel 
    { 
        ///  
        /// Get all records from the DB 
        ///  
        /// Datatable 
        public DataTable GetAllStudents() 
        { 
            DataTable dt = new DataTable(); 
            string strConString =@"Data Source=WELCOME-PC\SQLSERVER2008;Initial Catalog=MyDB;Integrated Security=True"; 
            using (SqlConnection con = new SqlConnection(strConString)) 
            { 
                con.Open(); 
                SqlCommand cmd = new SqlCommand("Select * from tblStudent", con); 
                SqlDataAdapter da = new SqlDataAdapter(cmd); 
                da.Fill(dt); 
            } 
            return dt; 
        }

        ///  
        /// Get student detail by Student id 
        ///  
        ///  
        ///  
        public DataTable GetStudentByID(int intStudentID) 
        { 
            DataTable dt = new DataTable();

            string strConString = @"Data Source=WELCOME-PC\SQLSERVER2008;Initial Catalog=MyDB;Integrated Security=True";

            using (SqlConnection con = new SqlConnection(strConString)) 
            { 
                con.Open(); 
                SqlCommand cmd = new SqlCommand("Select * from tblStudent where student_id=" + intStudentID, con); 
                SqlDataAdapter da = new SqlDataAdapter(cmd); 
                da.Fill(dt); 
            } 
            return dt; 
        }

        ///  
        /// Update the student details 
        ///  
        ///  
        ///  
        ///  
        ///  
        ///  
        public int UpdateStudent(int intStudentID, string strStudentName, string strGender, int intAge) 
        { 
            string strConString = @"Data Source=WELCOME-PC\SQLSERVER2008;Initial Catalog=MyDB;Integrated Security=True";

            using (SqlConnection con = new SqlConnection(strConString)) 
            { 
                con.Open(); 
                string query = "Update tblStudent SET student_name=@studname, student_age=@studage , student_gender=@gender where student_id=@studid"; 
                SqlCommand cmd = new SqlCommand(query, con); 
                cmd.Parameters.AddWithValue("@studname", strStudentName); 
                cmd.Parameters.AddWithValue("@studage", intAge); 
                cmd.Parameters.AddWithValue("@gender", strGender); 
                cmd.Parameters.AddWithValue("@studid", intStudentID); 
                return cmd.ExecuteNonQuery(); 
            } 
        }

        ///  
        /// Insert Student record into DB 
        ///  
        ///  
        ///  
        ///  
        ///  
        public int InsertStudent(string strStudentName, string strGender, int intAge) 
        { 
            string strConString = @"Data Source=WELCOME-PC\SQLSERVER2008;Initial Catalog=MyDB;Integrated Security=True";

            using (SqlConnection con = new SqlConnection(strConString)) 
            { 
                con.Open(); 
                string query = "Insert into tblStudent (student_name, student_age,student_gender) values(@studname, @studage , @gender)"; 
                SqlCommand cmd = new SqlCommand(query, con); 
                cmd.Parameters.AddWithValue("@studname", strStudentName); 
                cmd.Parameters.AddWithValue("@studage", intAge); 
                cmd.Parameters.AddWithValue("@gender", strGender); 
                return cmd.ExecuteNonQuery(); 
            } 
        }

        ///  
        /// Delete student based on ID 
        ///  
        ///  
        ///  
        public int DeleteStudent(int intStudentID) 
        { 
            string strConString = @"Data Source=WELCOME-PC\SQLSERVER2008;Initial Catalog=MyDB;Integrated Security=True";

            using (SqlConnection con = new SqlConnection(strConString)) 
            { 
                con.Open(); 
                string query = "Delete from tblStudent where student_id=@studid"; 
                SqlCommand cmd = new SqlCommand(query, con); 
                cmd.Parameters.AddWithValue("@studid", intStudentID); 
                return cmd.ExecuteNonQuery(); 
            } 
        } 
    } 
}

Controller:
Controller

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 
using System.Data; 
using System.Data.SqlClient; 
using MVCWithADO.Models; 
namespace MVCWithADO.Controllers 
{ 
    public class CRUDController : Controller 
    { 
        ///  
        /// First Action method called when page loads 
        /// Fetch all the rows from DB and display it 
        ///  
        /// Home View 
        public ActionResult Index() 
        { 
            CRUDModel model = new CRUDModel(); 
            DataTable dt = model.GetAllStudents(); 
            return View("Home",dt); 
        }

        ///  
        /// Action method, called when the "Add New Record" link clicked 
        ///  
        /// Create View 
        public ActionResult Insert() 
        { 
            return View("Create"); 
        }

        ///  
        /// Action method, called when the user hit "Submit" button 
        ///  
        /// Form Collection  Object 
        /// Used to differentiate between "submit" and "cancel" 
        ///  
        public ActionResult InsertRecord(FormCollection frm, string action) 
        { 
            if (action == "Submit") 
            { 
                CRUDModel model = new CRUDModel(); 
                string name = frm["txtName"]; 
                int age = Convert.ToInt32(frm["txtAge"]); 
                string gender = frm["gender"]; 
                int status = model.InsertStudent(name, gender, age); 
                return RedirectToAction("Index"); 
            } 
            else 
            { 
                return RedirectToAction("Index"); 
            } 
        }

        ///  
        /// Action method called when the user click "Edit" Link 
        ///  
        /// Student ID 
        /// Edit View 
        public ActionResult Edit(int StudentID) 
        { 
            CRUDModel model = new CRUDModel(); 
            DataTable dt = model.GetStudentByID(StudentID); 
            return View("Edit", dt); 
        }

        ///  
        /// Actin method, called when user update the record or cancel the update. 
        ///  
        /// Form Collection 
        /// Denotes the action 
        /// Home view 
        public ActionResult UpdateRecord(FormCollection frm,string action) 
        { 
            if (action == "Submit") 
            { 
                CRUDModel model = new CRUDModel(); 
                string name = frm["txtName"]; 
                int age = Convert.ToInt32(frm["txtAge"]); 
                string gender = frm["gender"]; 
                int id = Convert.ToInt32(frm["hdnID"]); 
                int status = model.UpdateStudent(id, name, gender, age); 
                return RedirectToAction("Index"); 
            } 
            else 
            { 
                return RedirectToAction("Index"); 
            } 
        }

        ///  
        /// Action method called when the "Delete" link clicked 
        ///  
        /// Stutend ID to edit 
        /// Home view 
        public ActionResult Delete(int StudentID) 
        { 
            CRUDModel model = new CRUDModel(); 
            model.DeleteStudent(StudentID); 
            return RedirectToAction("Index"); 
        } 
    } 
}

Views:
Create.cshtml

<!DOCTYPE html>

<html>    

<head>     

    <meta name="viewport" content="width=device-width" />     

    <title>Insert</title>     

</head>     

<body>     

    <form id="frmDetail" method="post" action="@Url.Action("InsertRecord")">     

        Enter Name:<input name="txtName" />     

        <br />     

        Enter Age:<input name="txtAge" />     

        <br />     

        Select Gender: <input type="radio" name="gender" value="male" checked>Male     

        <input type="radio" name="gender" value="female">Female     

        <br />     

        <input type="submit" value="Submit" name="action" />     

        <input type="submit" value="Cancel" name="action" />     

    </form>     

</body>     

</html>

Home.cshtml:

@using System.Data    

@using System.Data.SqlClient     

@model System.Data.DataTable     

@{     

    Layout = null;     

}

<!DOCTYPE html>

<html>    

<head>     

    <meta name="viewport" content="width=device-width" />     

    <title>Home</title>     

</head>     

<body>     

    <form method="post" name="Display">     

        <h2>Home</h2>     

        @Html.ActionLink("Add New Record", "Insert")     

        <br />     

        @{     

            if (Model.Rows.Count > 0)     

            {     

                <table>     

                    <thead>     

                        <tr>     

                            <td>     

                                Student ID     

                            </td>     

                            <td>     

                                Name     

                            </td>     

                            <td>     

                                Age     

                            </td>     

                            <td>Gender</td>     

                        </tr>     

                    </thead>     

                    @foreach (DataRow dr in Model.Rows)     

                    {     

                        <tr>     

                            <td>@dr["student_id"].ToString()  </td>     

                            <td>@dr["student_name"].ToString()  </td>     

                            <td>@dr["student_age"].ToString()  </td>     

                            <td>@dr["student_gender"].ToString()  </td>     

                            <td>@Html.ActionLink("Edit ", "Edit", new { StudentID = dr["student_id"].ToString() })</td>     

                            <td>@Html.ActionLink("| Delete", "Delete", new { StudentID = dr["student_id"].ToString() })</td>     

                        </tr>     

                    }

                </table>    

                <br />     

            }     

            else     

            {     

                <span> No records found!!</span>     

            }     

            }

    </form>    

</body>     

</html>

Edit.cshtml

@using System.Data    

@using System.Data.SqlClient     

@model System.Data.DataTable     

@{     

    ViewBag.Title = "EditView";     

}     

<html>     

<head>     

    <script type="text/javascript">     

    </script>     

</head>     

<body>     

    <form id="frmDetail" method="post" action="@Url.Action("UpdateRecord")">     

        Enter Name:<input name="txtName" value="@Model.Rows[0]["student_name"]" />     

        <br />     

        Enter Age:<input name="txtAge" value="@Model.Rows[0]["student_age"]" />     

        <br />     

        Select Gender:

        @if (Model.Rows[0]["student_gender"].ToString().ToLower() == "male")    

        {     

            <input type="radio" name="gender" value="male" checked /> @Html.Raw("Male")     

            <input type="radio" name="gender" value="female" />            @Html.Raw("Female")     

        }     

        else     

        {     

            <input type="radio" name="gender" value="male">  @Html.Raw("Male")     

            <input type="radio" name="gender" value="female" checked />            @Html.Raw("Female")     

        }     

        <input type="hidden" name="hdnID" value="@Model.Rows[0]["student_id"]" />     

        <br />     

        <input type="submit" value="Submit" name="action" />     

        <input type="submit" value="Cancel" name="action"/>     

    </form>     

</body>     

</html>

November Month Winner In C# Corner

2015-12-06T10:00:00.001-08:00

I'm very much excited to announce that I am again in the monthly winners list of C# Corner. This is second time in a row I'm really happy about that! This recognition really boost me up towards more community contribution as well as increase my responsibility in the ASP.Net Community. I want to thank my friends, colleagues who are all always encourage me! Thanks to every one! :)

October month winner in C#Corner

2015-11-10T18:27:00.003-08:00

I’m very much delight to announce that, I have selected one of the monthly winner for the month October 2015.

I’m very much happy and thankful to all of my readers,friends and colleague who are all always improves me a lot! :)

Visual Studio : How to install Nuget packages in your project?

2015-10-25T02:00:00.000-07:00

               In this article I’m going to explain about how to install/uninstall Nuget packages for your application in Visual Studio using “Nuget Package Manager” and “Package Manager Console”. I assume that you have Visual Studio 2013/2015 on your machine.
                    Before that, if you are not aware about “Nuget” means, the below sentence is for you:
                  “NuGet is the package manager for the Microsoft development platform including .NET. The NuGet client tools provide the ability to produce and consume packages. The NuGet Gallery is the central package repository used by all package authors and consumers.”
Install Nuget Package using ‘Nuget Package Manager’:
Step 1:
Rightclick on your project and select “Manage Nuget Packages”.

Step 2:
Now the “Nuget Package Manager” window will appear with the list of nuget packages.

Step 3:
In the search box, type the package you look for and hit enter. In this example, I just searched for “routedebugger” package and installed it by clicking the “Install” button.

Step 4:
While installing if the downloaded package tries to change the files in the solution/project it will popup the dialog to warn us. Just click “OK” for it and you can see the “installation progress” in the Output window.

Step 5:
Now you can just expand the “Solution Explore” window, see in the “Reference” to check that particular reference is added or not.

Uninstall NuGet Package using ‘Nuget Package Manager’:
Step 1:
If you want to uninstall, again go to the “Nuget Package Manager” and search for the particular package.Visual Studio automatically finds that particular package is installed on not and now you can see the “Uninstall” button.

Step 2:
Since it made some changes in the project while installing, so it will automatically revert the changes in the file. So again it will popup the dialog. just click “OK”. Also in output window you can see the uninstall status.

Install NuGet Package using ‘Package Manager Console’:
Alternatively, you can use the “Package Manager Console” in Visual studio to install the necessary packages by running the respective command.
Step 1:

Go to www.nuget.org and type the package name in the search box and go to the particular package’s page, there you can find the “Package Manager Console” command.

Step 2:
To open the Package Manager Console, Tools –>NuGet Package Manager –> Package Manager Console.

Just copy the command from above website and paste it on the package manager console and hit enter.

Note : Before hit enter key, just check the project name in the “Default project” dropdown. Incase, if you have lot of projects, you must pay attention on this by selecting correct project.
Uninstall NuGet Package using ‘Package Manager Console’:
Step 1:
In order to uninstall, just type the below command in the “Package Manager Console” and hit enter, it will uninstall the package: Uninstall-Package routedebugger.

That’s all! Hope this will helpful for someone!! Let me know your thoughts as comments!

Various ways to Inject JS into ASP.Net Controls

2015-09-20T18:07:00.000-07:00

There are various ways to inject Javascript to the ASP.Net Controls. In this post we are going to discuss those techniques.

For simple illustrative purpose, normally in an ASP.Net Webform, in the controls like Text box, whenever you press enter key it will submit the page. In other words, it will posted the page back to the server. In this post, we are going to see how to avoid this by using Javascript.

Technique 1: Inject Javascript directly to the markup.
In this way, you need to include the “onkeydown” event on each text box control.
Markup:

 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="DemoWebForm.WebForm1" %>  
  
<!DOCTYPE html>  
  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
    <title></title>  
</head>  
<body>  
    <form id="form1" runat="server">  
        Enter First Name:   
         <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="false" onkeydown="return (event.keyCode!=13);"></asp:TextBox>  
        <br />  
        Enter Last Name:   
         <asp:TextBox ID="TextBox2" runat="server" AutoPostBack="false" onkeydown="return (event.keyCode!=13);"></asp:TextBox>  
        <br />  
  
        <asp:Button runat="server" ID="btnSubmit" Text="Submit" />  
    </form>  
</body>  
</html>

Technique 2: Inject Javascript thru server side code.
If you want to achieve the above one in server side, that is you loop thru the controls and inject the same javascript snippet. For this, you can use the following markup and code behind:
Markup:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="DemoWebForm.WebForm1" %>  
  
<!DOCTYPE html>  
  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
    <title></title>  
</head>  
<body>  
    <form id="form1" runat="server">  
        Enter First Name:   
         <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="false" ></asp:TextBox>  
        <br />  
        Enter Last Name:   
         <asp:TextBox ID="TextBox2" runat="server" AutoPostBack="false" ></asp:TextBox>  
        <br />  
  
        <asp:Button runat="server" ID="btnSubmit" Text="Submit" />  
    </form>  
</body>  
</html>

Codebehind:

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
using System.Web.UI;  
using System.Web.UI.WebControls;  
  
namespace DemoWebForm  
{  
    public partial class WebForm1 : System.Web.UI.Page  
    {  
        protected void Page_Load(object sender, EventArgs e)  
        {  
            DisableEnterKey(Page.Controls);  
  
        }  
  
        public void DisableEnterKey(ControlCollection ctrls)  
        {  
            foreach (Control c in ctrls)  
            {  
                foreach (Control ctrl in c.Controls)  
                {  
                    if (ctrl is TextBox)  
                        ((TextBox)ctrl).Attributes.Add("onkeydown", "return (event.keyCode!=13);");  
                    else if (ctrl is DropDownList)  
                        ((DropDownList)ctrl).Attributes.Add("onkeydown", "return (event.keyCode!=13);");  
                }              
            }  
        }  
    }  
}

Technique 3: Using JQuery
In the above 2 techniques, either we need to include the same line in each controls or we need to loop thru the controls and inject the JS. In some cases you may want to achieve the same using the JQuery

Markup:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="DemoWebForm.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){ 
            $('input[type=text]').on("keydown", "", function () { return (event.keyCode != 13); });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        Enter First Name: 
         <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="false"></asp:TextBox>
        <br />
        Enter Last Name: 
         <asp:TextBox ID="TextBox2" runat="server" AutoPostBack="false"></asp:TextBox>
        <br />
        <asp:Button runat="server" ID="btnSubmit" Text="Submit" />
    </form>
</body>
</html>

The above one is so simple, that is no repetition of code.

Hope this helps!

How to improve the performance of an ASP.Net Web page?

2015-09-14T21:22:00.001-07:00

                     This is the most common question from asp.net forum to any interview. In this post I’m going to point out some of the important points that may help to improve the performance.
                      Here I used the word “improve performance” in the sense to decrease the loading time of the page. There are various reason behind. Some of them we look into from the “backend side” (Database side) and rest of them we need to take care in “front-end” ((UI) side.
For illustrative purpose, you have a ASP.Net Web site, one of the aspx page take much time to load. Also as a backend I assume that you are using SQL Server. Through out this article, we are going to see how to decrease the loading time.
Back End (DB):
Below are the points that you need to consider to fine tune the DB:
1) Try to check the Query performance, that is how much time the query will take to execute and pull the records from DB. The Use SQL Server Profiler and Execution plan for that query. So that you can come to the conclusion in which part it took much time.
2) Check in every table (who are all part of the query) Index is created properly.
3) If your query involves an complex Stored procedure, which in turn use lot of joins, then you should focus on every table. In some cases, sub-query perform better than the joins.
4) If your web page, involves paging concepts, try to move the paging concepts to SQL Server. I meant that based on the page count the SP will return the records, instead of bring the records as a whole.
Front End (UI):
1) If your page displays a lot of records, try to introduce “paging”. Say for example your page displays 1000 record in a page. Instead of pulling 1000 records as a whole, by introducing paging such that page size as 10, you need to pull 10 records only!
2) Try to choose “tabless” design, that is try to avoid “table” to design the webpage. In order to achieve this use should use “div” tag.
3) If you want to design responsive pages, try to use existing (proved) frameworks such as Bootstrap, instead of trying your own code.
4) Also if your webpage deals with lot of images or videos to display, then consider to use appropriate CDN (Content Delivery Network).
5) Use bundling and minification techniques, which reduce the server calls to load the javascript and CSS files, which in turn reduce the loading time.

Readers!! Do you thing that I have missed out anything? Let me know your thoughts in comments!

How to publish ASP.Net Web application using Visual Studio 2015

2015-09-09T18:52:00.000-07:00

In this post, we are going to see a step by step procedure using the custom profile option. In other words, this post is going to explain how to publish the website in local file system.

The main purpose of publish dialog is provide an simplified way to take the file list which need to be publish on your website. In this article I’m going to explain how to publish a MVC web application using the “publish” dialog provided in VS 2015.

Step 1 : Open Publish Dialog

You can open the publish dialog by “Right Click” on the project then select “Publish” on the floating menu.

Step 2: Create Profile

As a first step, you should create a profile before publishing. This is just one kind of grouping, say for example you can create multiple profile one for Azure and one for local. So when next time you open this dialog you can see the profiles and select from them.

I have selected “Custom” as a “Publish Target” and gave profile name as “LocalPublish”.

Step 3: Select the Connection

In this step, we need to tell where our published files are going to be. You can publish the files directly on your server also by selecting “Web Deploy” publish method or you can use FTP too.

Since I’m going to publish files in local file system so I selected “File System”.

Step 4: Select Configuration and other settings

In this step, you can choose “Configuration” mode and other settings like delete files before publishing in the specific folder, precompile etc.

Step 5: Preview & Publish

You are about to complete your publishing. Click publish to start the publishing.

In the output window you can see the result of the publish.

Hope this post is useful who are all using the “Publish” option in Visual Studio 2015.

Happy Coding!!

How to Hosting Asp.net MVC Web Application in Local Machine?

2015-09-07T14:32:00.001-07:00

In this post I’m going to discuss about how to host an ASP.Net MVC Application in your local machine. Most of the steps to deploy a web form application and MVC applications are equivalent.

Prerequisite:

In order to explain the steps, I assume you have a complete ASP.Net MVC Application that is ready to build with out any error.

Step 1:

Publish you MVC application in a local file path, using publish option in Visual Studio.

For this example, I have published my application in the below path like : C:\MVCDemo

Step 2:

Create a Virtual directory in IIS and mapped the above published file path to it.

If you have any doubts in creating virtual directory refer my below blog posts:

Create virtual directory on IIS using Visual Studio.

Create Virtual directory on IIS

Step 3:

You are almost done! The only thing pending is you need to browse the website, that just published. This is where most of the ASP.Net developer (especially who is a newbie to ASP.Net MVC), what they were doing : Expand the Virtual directory –> Views –> Switch to content view –> select the cshtml file –> right click on it and click “Browse”, which throws 404 Error in browser.

The above issue is common to all ASP.Net developers, who are all comes with ASP.Net WebForm background. In order to browse the mvc application, you need to mention the path in the form like “http://localhost/YourControllerName/YourActionMethod", which is the url routing pattern specified by default.

Hope this helps!

Daily Interview Questions #15 : What is the difference between the C# keywords ‘ref’ and ‘out’?

2015-09-03T05:26:00.001-07:00

ref	out
Parameters passed with the prefix “ref”. By using “ref” C# implements the concept called “Call by reference”.	Parameters passed with the prefix “out”.
An argument passed by ref must be assigned with a value before the call.	‘out’ parameter must assigned with some value prior to the termination of the function.

How to Send SMS From ASP.Net Web Application?

2015-08-18T19:14:00.001-07:00

Disclaimer:
            In this article I have used a Third party SMS Gateway service provider, which is I have personally used and experienced.
Introduction:
                    In my previous article I explained SMS Gateways and the various schemes available for them. This article explains how to integrate those SMS gateways into an ASP.Net web application.
What a "SMS Gateway" is?
                   A SMS Gateway allows a computer to send or receive SMS to or from a telecommunications network. This Wikipedia URL provides more detail.
Some “facts” about SMS Gateways
                  When I did some experimentation and Googling of SMS gateways some of the tutorials suggested use of “free” SMS gateways. But nothing worked for me. Latter I understood that “Nothing comes free”. Also most people asked the same question: “Is there any free SMS service is available to send SMS from my website?”. In my experience the answer is no. So my point here is, don’t waste your time searching for the free API. Instead, find a well-suited SMS Gateway provider and sign up with them.

What’s next?
                 Well you want to send a SMS from your ASP.Net web application. So as a first step, you need to sign up with a SMS Gateway provider to get the SMS credits. Normally all SMS gateway providers provide at least 10 free SMS credits to check their services. Also they will provide details of the Application Programming Interfaces (APIs) and explain in detail how to integrate those API codes into your application.
For demo purposes I have signed up an account with mvaayoo SMS gateway providers and will use their services in this tutorial.

Markup
                For the simple illustrative purposes, I’m going to develop a simple UI in a web-form as in the following. I have a textbox to accept mobile numbers and a button to send the message. That’s all!

<html xmlns="http://www.w3.org/1999/xhtml">    
   <head runat="server">    
      <title></title>    
   </head>    
   <body>    
      <form id="form1" runat="server">    
         <div>    
            <asp:Label runat="server" Text="Enter Mobile Number"></asp:Label>    
            <asp:TextBox runat="server"></asp:TextBox>    
            <br />    
            <asp:Button runat="server" ID="btnSent" Text="Sent SMS" OnClick="btnSent_Click"></asp:Button>    
         </div>    
      </form>    
   </body>    
</html>

Code behind
In the code behind file, we need to copy and paste the API code provided by the SMS Gateway. As I already explained, every SMS Gateway service provider provides the API code to be used in your application. In mvaayoo, they provide the API code for ASP.Net, ASP, VB and PHP too. You need to substitute the user name password and sender id in the respective places in the URL. You need to also specify the mobile number too in the URL. If you want to send the SMS to multiple numbers then you need to provide those numbers in comma-separated format.

protected void btnSent_Click(object sender, EventArgs e)  
{  
     // use the API URL here  
     string strUrl = "http://api.mVaayoo.com/mvaayooapi/MessageCompose?user=YourUserName:YourPassword&senderID=YourSenderID&    receipientno=1234567890&msgtxt=This is a test from mVaayoo API&state=4";  
     // Create a request object  
     WebRequest request = HttpWebRequest.Create(strUrl);  
     // Get the response back  
     HttpWebResponse response = (HttpWebResponse)request.GetResponse();  
     Stream s = (Stream)response.GetResponseStream();  
     StreamReader readStream = new StreamReader(s);  
     string dataString = readStream.ReadToEnd();  
     response.Close();  
     s.Close();  
     readStream.Close();  
}

That’s all! You have successfully created an application to send SMS messages.
Happy coding!