Monthly Archives: January 2015

Understanding ASP.NET MVC using real world example, for beginners and intermediate

You can download the sample at Dropbox.

ASP.NET presented developers with a new framework for website development, in which they would easily distinguish between data layer, business layer and the methodology they would use to render these objects on the screen. They called this framework ASP.NET MVC, in which MVC stands for Model, View, Controller.I will elaborate these items in this blog post as well as other objects and technologies I am going to use too. First lets talk about what is MVC pattern itself, and what ASP.NET MVC offers us as compared to other ASP.NET frameworks; which include and are well-known, Web Pages and Web Forms, and all other web-scripting frameworks.

ASP.NET MVC

First thing is to understand the ASP.NET MVC framework itself, once we’ve gotten enough understanding of the ASP.NET MVC framework, then it would be a lot easy for us to understand why ASP.NET team provided us with this framework. In web development, there are different schemes used to create web sites and web applications, which at a minor age don’t seem to cause a problem. Solving a bug might take hours of headscratching and some other help too. It is harder to find the problem that is scripted inside the HTML web page. In these scenarios, it is always found helpfull to seperate your code from your data and from your HTML markup. This would make it a lot easier to find and solve the problem. Because, now all of the code has been seperated and finding the problem at exact location won’t be a harder task. These three fields are divided and make up the MVC; Model, View and Controller pattern for web development.

Actually this is not a pattern, specific to the web development. If you go to Wikipedia’s web page for this, you will find that it is actually a framework used for software development, meaning that it can be applied anywhere, where you want to distinguish between your application’s data link layer, business logic layer and the rendering code.

MVC-Process.svg

The link between these three objects of MVC pattern have been depicted in this image above.

Controller

The Controller in the MVC comes at the last, but is the most used part of the MVC pattern. It is used to work with the HTTP requests, coming from the clients; from the browsers  or from any other application that can generate an HttpRequest (not to be confused with the .NET’s HttpRequest object; but a simple HTTP Request). Each request, when comes, is handled by the Controller and then Controller, according to the request makes decisions to load the data, create the response and then sends the data back to the client.

It should also be noted here, that your Controller acts as a bridge between your Model and the View. Because they, as themself, cannot perform any action. Controller triggers their events and makes them do something, like return data from Model, or to render the HTML document from the View etc. All of the resources and errors are also handled by the Controller. Making it the heart of the pattern, because the response is also sent back from a controller. You can think of an example of a Controller to be the entire Business-logic-layer. The code that is used to run the application’s back-end processing, like creating accounts, managing solutions etc, would make up the Controller section of this pattern.

View

Next comes the part of the View, this is the actual web page that is being displayed to the user. It contains the HTML codes that are to be sent back to the data as a response to his request. Correct, Controller sends this response back to the client, View – its self – doesn’t send this response to client whereas Controllers takes this data, and sends back to the client.

View, can also be created dynamically. As already said, all of the requests are handled by Controller, so any parameter (including QueryStrings) can also be handled by Controllers. Using these parameters, we can generate dynamic Views. So dynamic content in our view, change their layouts or show some other error messages if the data sent is not of our own choice. View, generally depends on the Model that is being used to create the View and these dynamic data objects are capture from the Model (Model is discussed in the next section).

Point to be noted here is that while section-in-action is View, still Controller is playing a vital role for passing the values and for retrieving the data to be sent to client. 

Model

As the name suggests, it is a model of some object. The object in this case is our application’s data. It can be of any type, like extracted from a database; no matter which one, SQL Server, MySQL or MS Access etc, or it can be a simple data that comes from a Reporting, or from a Spreadsheet etc. Model is never shown to the user (actually, the client) because he is supposed to see the data and the results we want him to see, that is why, it is a good approach to keep a great abstraction layer between Model and the user (the client).

Model doesn’t only store the data, it – at the same time – keeps the View and the Controller updated or any change being made to it. Models are designed, just like Controllers and Views are designed, just so that there is no ambiguity between three of them and it  is easy for them to communicate to make the web application fluent. Everytime a change is made, View is update by the Controller, because Controller is informed about the change (this informing event is also raised by Controller; as I already said, Controller handles the events). To store anything in the Model, the user has not been provided with any form that is directly connected to the Model, instead a form is generated in the View by the Controller for the user to fill in. Once the form is filled, the form values are then passed to the model for storing purposes. All kinds of data validations (most special type of which are SQL Injections) can be checked at the Controller level rather than loosing (important) data.

The user must be allowed to interact with Model himself, instead a Controller must be used to connect to the Model to get the data for the user's View that would be shown to him.

The user must be allowed to interact with Model himself, instead a Controller must be used to connect to the Model to get the data for the user’s View that would be shown to him.

Until now, we’ve been discussing the ASP.NET MVC itself, in the next section we will be discussing a real-world example of an ASP.NET MVC Application, and I will show how to create custom Controllers, Views and Models. In an ASP.NET MVC project a user triggers the Controller, the controller then reads and manipulates the requests, Requests the Model for data, gets the data and then Updates the View to be sent back to the client.

Overview of MVC pattern.

Overview of MVC pattern.

Real world example of ASP.NET MVC Application

In this blog  post, I am going to explain creating an MVC application to control your client’s data. For that, I am going to use the Model, View and Controller architecture, so that I can easily distinguish between the data of my application (which would be the data for the clients), code for the requests and responses (which would constitute the controller) and how the data is shown to the users (views of my application). I am going to create everything from scratch, to make every thing understandable for you. For that I am going to start from creating every single  object in my application, every controller, every view and model in my project.

One thing you should think about here is that I am going to use JSON files as data source, because database field has already been covered by the ASP.NET team at its best. I don’t think there is any need to re-write the same thing, that is why I am going to explain how to use anything as your model. If you want to read that one, and want to stick to SQL Server database you can go to ASP.NET MVC’s tutorial website to learn that. You’re right, Entity framework won’t be supported here! That is why I am saying I am going to create everything from scratch, to explain every bit of the MVC pattern for you and how you can create actions that respond to your actual processes, not just to the built-in ones.

Real-life example

Let’s have an example of a simple office, where a person gets different clients, whose name, address is stored. Just to distinguish them all, an ID is also stored. Whether the client is trusted or not, is also stored along with him. Office manager wants to be able to, create new clients, modify the existing ones, and once he is done with them he wants to be able to delete the previous ones. To implement this basic example in ASP.NET MVC, we will start off by creating a simple ASP.NET MVC application. To do so, you can either press CTRL+SHIFT+N, or you can click on File, then New and a Project. Like this,

Creating a new project - in Visual Studio 2013

Creating a new project – in Visual Studio 2013

After this, please select the Web and inside select ASP.NET Web Application, then name it as you want. I named it, ASPNET_MVC_Application. You can use any name that you want.

Selecting an ASP.NET web application.

Selecting an ASP.NET web application.

Then you will be required to make the selections for your application in the next tab. You shouldn’t make any change for now, keep the selected options selected and click Next on this tab.

Screenshot (160)

This would then create your application, with the default content for your application settings. You might see this web page inside your Visual Studio.

ASP.NET MVC read me page viewed inside the Visual Studiom 2013 - application's first run.

ASP.NET MVC read me page viewed inside the Visual Studiom 2013 – application’s first run.

This is the tutorial until creation of the application. This web page is also a sign of success, if you still want to make sure that everything runs, just press the green button (with a Browser’s name on it; mine had Google Chrome) to see your application runs in the browser. In the next section, I will be creating the application’s objects (MVC) and then showing you how they can interact and in the end I will give some tips for making your application better.

Customizing the ASP.NET MVC Application

Once all of the things are set, and your application runs. You can continue to make changes to it, so that it would reflect your own application and not the default ASP.NET MVC application that is a sample. First thing to do is to create a controller which we’re going to be using inside our application to control all of the requests and is going to send back the response (view). How to create views and what would be the model will be covered in coming sections. For now, just make up your mind to understand the Controller in MVC.

Required package: Since we’re going to use JSON data, Newtonsoft.Json package is a very usefull package to use, so before you go any further open your NuGet package manager console (inside the Tools) and run the following command to download and include it in your project. It is required.

Install-Package Newtonsoft.Json

Creating a custom Controller

A custom controller is something that you can use to create your custom controllers for your application, that would handle the requests coming for them and they will provide the user with a view filled in with the data from the model. You can name them as you would like to name them, there is no convention; but just one convention which is to append “Controller” to the name of the class. Controller is a class in real which inherits from System.Web.Mvc.Controller class, making it able to inherit all of the functions and members of the Controller (parent) class. Let us create a Controller. Inside your Source code, there is a folder named as Controllers. If you open it, there would be 3 controllers by default, you can create your own.

Default controllers in ASP.NET MVC application

Default controllers in ASP.NET MVC application

Right click on Controller folder and inside the Add option, click Controller to create a new one.

Creating a new Controller

Creating a new Controller

Give a custom name to your controller; remember to have that Controller at the end of your class’ name. You must create an empty controller, because for the sake of this post we’re not going to use anything built-in but just scratch classes.

Screenshot (170)

We just need an Empty controller, to create our own functions (actions in MVC) for it to handle and perform.

We just need an Empty controller, to create our own functions (actions in MVC) for it to handle and perform.

At this stage, your basic Controller has been created and you’re now ready to customize it. Before we move on to create actions that this Controller would perform. I wanted to remind you about (automatic) changes that were made in your Views folder. What Views folder is about, is – yes, well – self-explainatory but we’ll be talking about it too in the coming section. Right now, there is a new Client (or what ever Controller you create’s named) folder inside your View folder. Now it does start to make some sense, doesn’t it? Every controller has its own particular view to display data for, and each time the request would initiate from client (not our class, but the user of course) the Controller would be used (you can think like an instance of that class would be created) and then the Action of Controller would be checked against (inside the URL; which would then trigger the function of the Controller, which we’re going to create next). Like every class, we can create different functions for our Controllers, which are known as Actions. Let us think what we’re supposed to let our manager do with the client, he wants to

  1. Create a new client – Create
  2. Modify current client’s data – Update or Edit
  3. Delete clients when he has finished the work – Delete

We can use above logic to create our functions for the Client Controller. Open your ClientController.cs file and edit it, to write this code in it.

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

using ASP.NET_MVC_Application.Models;
using Newtonsoft.Json;

namespace ASP.NET_MVC_Application.Controllers
{
   public class ClientController : Controller
   {
      // GET: Client
      public ActionResult Index()
      {
         // Load the data for the client
         var clients = Client.GetClients();

         // Return the view.
         return View(clients);
      }

      public ActionResult Create()
      {
         ViewBag.Submitted = false;
         var created = false;
         // Create the Client
         if (HttpContext.Request.RequestType == "POST")
         {
            ViewBag.Submitted = true;
            // If the request is POST, get the values from the form
            var id = Request.Form["id"];
            var name = Request.Form["name"];
            var address = Request.Form["address"];
            var trusted = false;
 
            if(Request.Form["trusted"] == "on") {
               trusted = true;
            }

            // Create a new Client for these details.
            Client client = new Client()
            {
               ID = Convert.ToInt16(id), 
               Name = name,
               Address = address,
               Trusted = Convert.ToBoolean(trusted)
            };

            // Save the client in the ClientList
            var ClientFile = Client.ClientFile;
            var ClientData = System.IO.File.ReadAllText(ClientFile);
            List<Client> ClientList = new List<Client>();
            ClientList = JsonConvert.DeserializeObject<List<Client>>(ClientData);

            if (ClientList == null)
            {
               ClientList = new List<Client>();
            }
            ClientList.Add(client);

            // Now save the list on the disk
            System.IO.File.WriteAllText(ClientFile, JsonConvert.SerializeObject(ClientList));

            // Denote that the client was created
            created = true;
         }

         if (created)
         {
            ViewBag.Message = "Client was created successfully.";
         }
         else
         {
            ViewBag.Message = "There was an error while creating the client.";
         }
       return View();
     }

     public ActionResult Update(int id)
     {
        if (HttpContext.Request.RequestType == "POST")
        {
           // Request is Post type; must be a submit
           var name = Request.Form["name"];
           var address = Request.Form["address"];
           var trusted = Request.Form["trusted"];

           // Get all of the clients
           var clints = Client.GetClients();

           foreach (Client client in clints)
           {
              // Find the client
              if (client.ID == id)
              {
                 // Client found, now update his properties and save it.
                 client.Name = name;
                 client.Address = address;
                 client.Trusted = Convert.ToBoolean(trusted);
                 // Break through the loop
                 break;
              }
           }

           // Update the clients in the disk
           System.IO.File.WriteAllText(Client.ClientFile, JsonConvert.SerializeObject(clints));

           // Add the details to the View
           Response.Redirect("~/Client/Index?Message=Client_Updated");
       }


       // Create a model object.
       var clnt = new Client();
       // Get the list of clients
       var clients = Client.GetClients();
       // Search within the clients
       foreach (Client client in clients)
       {
          // If the client's ID matches
          if (client.ID == id)
          {
              clnt = client;
          }
          // No need to further run the loop
          break;
       }
       if (clnt == null)
       {
           // No client was found
           ViewBag.Message = "No client was found.";
       }
     return View(clnt);
   }

   public ActionResult Delete(int id)
   {
      // Get the clients
      var Clients = Client.GetClients();
      var deleted = false;
      // Delete the specific one.
      foreach (Client client in Clients)
      {
        // Found the client
        if (client.ID == id)
        {
          // delete this client
          var index = Clients.IndexOf(client);
          Clients.RemoveAt(index);

          // Removed now save the data back.
          System.IO.File.WriteAllText(Client.ClientFile, JsonConvert.SerializeObject(Clients));
          deleted = true;
          break;
       }
    }

     // Add the process details to the ViewBag
     if (deleted)
     {
        ViewBag.Message = "Client was deleted successfully.";
     }
     else
     {
        ViewBag.Message = "There was an error while deleting the client.";
     }
     return View();
    }
  }
}

Done! That was our controller, if you have a look at the code above you will find a few functions, a few ViewBags and a few Views etc. I will explain them in the end, because they’re built-in functions of ASP.NET MVC for the application and which we are bound to use them for application to run. Each time you’re going to create a request to your application to load data about clients, this controller would take action, and will provide with the data that user (in case here, you) want from the application. In the above code Create, Update, Delete and Index are the functions of the class, in MVC application they will act as Actions of the application’s Controller. You will use them to tell the application what to do, when user triggers such a particular action in your application. They’re just average functions in a simple class; which inherits from System.Web.Mvc.Controller.

Creating a custom View

Now that back-end code (Controller code) has been done, and you can now create the Views for your application. Views are used to show the content (data) of your application to the client (user) in HTML markup. Because browser can only render HTML content, we will be using that markup, and Views are used for that. Each controller has its own particular view. One thing to note here, is that to return a View, the name of the View must match the Action’s name. You can put it, like each of the Action (function) in the Controller is meant for a particular View (HTML document to be returned) in the application. We, need four Views, for our four Actions; Index, Create, Update, Delete. To create a View you can click on the Views folder, and create a new folder; but remember, here you don’t need to create any new folder, because as I already said when you created the Controller a new folder was already created with the name of the Controller “Client”. Right-click that folder, and inside the Add click on the MVC 5 View with Layout and click Next to go to the next step.

Creating a new View (with Layout)

Creating a new View (with Layout)

Now name the View, I named it Index because we need a view for Index page.

Screenshot (172)

Now select the layout, layout is applied across the pages (Views) to design them a like. You can use your own views too, but for this I am going to use the default layout. Screenshot (173)

This is the step-by-step method to create the View in ASP.NET MVC using Visual Studio. ASP.NET uses Razor syntax to create HTML pages, which shortens the codes for the developers. Update the code inside this page and write this following code,

@model IEnumerable<ASPNET_MVC_Application.Models.Client>

@{
   ViewBag.Title = "All Clients";
   Layout = "~/Views/Shared/_Layout.cshtml";
}

<h3>Following table shows the Clients detail</h3>
<p>You will find their details, as well as other links to other actions that can be performed and operated over the client objects. </p>

<p>You can also create a new client <a href="~/Client/Create">here</a>. </p>

<table class="clients-table">
   <tr>
   <th>ID</th>
   <th>Name</th>
   <th>Address</th>
   <th>Trusted</th>
   <th>Actions</th>
</tr>

 @if(Model != null && Model.Count() > 0)
 {
   foreach (var client in Model)
   {
     // Create the list of these clients
     <tr>
       <td>@client.ID</td>
       <td>@client.Name</td>
       <td>@client.Address</td>
       <td>@client.Trusted</td>
       <td>
         <a href="~/Client/Update/@client.ID">Update</a>
         <a href="~/Client/Delete/@client.ID">Delete</a>
       </td>
     </tr> 
   }
 }
</table>

In the above page’s source code, you will find one new thing. @model IEnumerable<ASPNET_MVC_Application.Models.Client> that is the type of the data that has to be used inside this View; Yes, it is the model being used here. After that it is just simple razor syntax, to create the HTML document (View) and to return to the client (user). The Model object (the one used in the foreach loop) is having the value of what ever is passed for the @model thing.

You should create next three Views yourself (as a test) and write this content to them.

For Create View:

@{
   ViewBag.Title = "Create";
   Layout = "~/Views/Shared/_Layout.cshtml";
}

<div>
   <h3>Fill in the following form</h3>
</div>
<form method="post" style="margin: 5% 0 0">
   <div class="float-left">
     <p>Client ID</p>
     <p>Name</p>
     <p>Address</p>
     <p>Trusted</p>
   </div>
   <div class="float-right">
     <input type="text" style="margin: 1px 0 2px" name="id" /><br />
     <input type="text" style="margin: 1px 0 2px" name="name" /><br />
     <input type="text" style="margin: 1px 0 2px" name="address" /><br />
     <input type="checkbox" style="margin: 1px 0 2px" name="trusted" /><br />
     <input type="submit" value="Save" />
   </div>
</form>

<p>
   @if (ViewBag.Submitted)
   {
     // If the form was submitted
     @ViewBag.Message
   }
</p>

For Update View:

@model ASP.NET_MVC_Application.Models.Client

@{
   ViewBag.Title = "Update the Client";
   Layout = "~/Views/Shared/_Layout.cshtml";
}


<div>
  <h3>Update the following form</h3>
</div>
<form method="post" style="margin: 5% 0 0">
  <div class="float-left">
     <p>Name</p>
     <p>Address</p>
     <p>Trusted</p>
  </div>
  <div class="float-right">
     <input type="text" style="margin: 1px 0 2px" name="name" value="@Model.Name" /><br />
     <input type="text" style="margin: 1px 0 2px" name="address" value="@Model.Address" /><br />
     <input type="checkbox" style="margin: 1px 0 2px" name="trusted" 
          @if (Model.Trusted) { <text>checked="checked"</text> } 
     />
 <br />
     <input type="submit" value="Save" />
  </div>
</form>

<p>
   @if (ViewBag.Submitted != null && ViewBag.Submitted)
   {
      // If the form was submitted
     @ViewBag.Message
   }
</p>

For Delete View:

@{
   Layout = "~/Views/Shared/_Layout.cshtml";
}

<p>@ViewBag.Message</p>

You will find, that in Create view I am not passing any model. That is because, for a View, to have a model is not obligatory. Model is just to allow dynamic content to it, if you don’t want to use any model, fair enough, you don’t have to use a model in every view to create it an MVC application. These are just simple HTML pages, that are being made update-to-the-content by the razor syntax and then sent back to the browser in an HTML markup, for rendering purposes. _ViewStart.cshtml page is used as the first page to check for any layouts. If you don’t want to set any layout for all of the pages themself and want a unique look across the web app, you can set that in this page and it will be applied to all of the pages.

Creating the custom Model

As far as Model is concerned, ASP.NET MVC allows you to use any kind of data (coming from a data source; server or what so ever) to be used as a Model. You can pass the data from the model to the view from the Controller, which will be then rendered as a simple HTML markup and will be displayed inside the browser to the user.

I have already mentioned, and in-case you missed it above, if you want to use SQL Server database as your Model for application, then ASP.NET team has provided a very good tutorial for that and you might want to join them on their journey here. They used Entity Framework for their Actions. In our project, we will be using JSON files and custom created Actions to perform CRUD operations. This would (try to) remove ambiguity in our minds about this MVC pattern and its extensiveness for other technologies and frameworks.

A Model, like a Controller,  is just a class file, that we can instanitiate and get different objects from, when working with a request from a client. A model is a representation of the real-world objects in our own context; which here is the ASP.NET MVC Application. Think of it like there is a Client model. He would have a ClientID, Name, Address and a Trusted as a flag (you should recall our scenario if you have no idea of where these came from). What would you write as a class for this Client? Look at the following class code and have understanding of the Model we’re going to have.

using System;
using System.IO;
using System.Collections.Generic;
using System.Linq;
using System.Web;

using Newtonsoft.Json;

namespace ASP.NET_MVC_Application.Models
{
   public class Client
   {
     public static string ClientFile = HttpContext.Current.Server.MapPath("~/App_Data/Clients.json");

     public int ID { get; set; }
     public string Name { get; set; }
     public string Address { get; set; }
     public bool Trusted { get; set; }

     public static List<Client> GetClients()
     {
        List<Client> clients = new List<Client>();
        if (File.Exists(ClientFile))
        {
           // File exists..
           string content = File.ReadAllText(ClientFile);
           // Deserialize the objects 
           clients = JsonConvert.DeserializeObject<List<Client>>(content);

           // Returns the clients, either empty list or containing the Client(s).
           return clients;
        }
        else
        {
           // Create the file 
           File.Create(ClientFile).Close();
           // Write data to it; [] means an array, 
           // List<Client> would throw error if [] is not wrapping text
           File.WriteAllText(ClientFile, "[]");

           // Re run the function
           GetClients();
        }

        return clients;
      }
   }
}

A simple C# class file, that would serve our application as a Model. You will find one other major change, which is the namespace this class is location in. The name is having an extra .Models attached to our project’s name. That makes up our different fields. ASP.NET and Visual Studio do these things for us, although they’re not required but just conventions to be followed. Let us create a Model for our application, click on the Models folder in your app, and inside Add click on Class file and name it Client.cs and click Next to continue.

Select a new class file to be created as a Model

Select a new class file to be created as a Model

Screenshot (175)

Name it what-ever-you-want, but I would be using Client.

These were the three major fields in the MVC that are used to create an application. However, there are a few other minor fields that work and run our application, that I will be covering here for you to atleast know how to kick-start your project.

As far, we have covered what is Controller (controls the HTTP requests coming our going to client), what is a View (it is rendered as HTML output in the browser, the response that is returned to the client in HTML markup can be said to be the View) and finally what is a Model (the representation of the real-world data in our application is called a model). Now, we can go and have a look at the classes and objects which run our application. Like all other apps, that run over .NET framework, ASP.NET also exposes some functions for its developers to use, to perform different actions when the app starts, when the app crashes etc. If you open the folder App_Start in your application, you will find a few classes there. BundleConfig is used to configure your JavaScript libraries, ASP.NET also enables the developers to perform some client-side actions. IdentityConfig configures the Identity service (user authortization servicer), but the main file that I wanted to talk about here, which needs our attention too, is the RouteConfig.cs file.

In ASP.NET, you do not need to have a physical path fixed in order for the client to send a request to its virtual location to read it. Instead, you can now create custom URLs to let your users visit your application, without you having to have a specified file at that location. You create different routing techniques, to allow different data values inside the URL to create dynamic web pages for the clients.

If you open up this file, you will find the following code in it, (I am going to use a partial part of the file)

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

This defines a route, for your application. It has been named “Default” and has the default configurations for the URL, any URL that comes will be matches against this scheme. First value would match for a Controller second to an action (the function inside the Controller class) and then an optional field (see the default values field). You can change this sequence of arragement, to make sure that the URLs are website and user-friendly for your context.

Every ASP.NET can have as many routes enabled in it, every one will be used but the best possible route would be used, but at least one route must be present for the app to run. Let us now run the app and test, for anything that might need our attention.

Running the application (Optional part; if you want to download and test the app, skip this section)

This application was run over the app named “ASP.NET MVC Application” but I created a new app named “ASPNET_MVC_Application”, there is a huge different between these two, usually only difference is the namespace naming one so if you were following the blog post you might find this a bit of confusion; so my apologies for that. 🙂

In the beginning, the table is empty.

In the beginning, the table is empty.

Now let us, start adding a few objects; at this instance, let us just take one object under consideration.

Fill in this form and click Save, the application would save this client's information.

Fill in this form and click Save, the application would save this client’s information.

Message showing the success of our operation.

Message showing the success of our operation.

If you go back to the main page of the Client’s directory (controller), you will find a record available there.

Screenshot (149)

Let us, now try to update this client’s value, in the Actions attribute of table, you will find two hyperlinks, they actually are just Actions (functions) of our controller, we will pass (optional) ID of our client to it, and then we will update the value. We will update our value as,

Screenshot (151)

Let’s go back and see if our View now reflects any change.

Screenshot (152)

Voila! It does reflect our change, which proves that a Model updates the View for any new change that we make. Try using the second hyperlink, it would delete the object from the collection.

Screenshot (153)

That was up, for the working process. Now our application runs fine enough, our manager can add clients, remove clients or modify their data as per his requirements. As far as now, this application is running and our clients can visit and use it as per their requirement.

This was a basic overview of ASP.NET MVC application, that contains the Model for our data, View for the users to visit and see and a Controller that controls the HTTP data coming or going to the client.

Points of Interest

ASP.NET MVC pattern contains a Controller for controlling all of the HTTP requests coming, and responses going to the clients. A view for generating HTML web pages, Razor view engine is used for creating the HTML markup from C# objects. A Model is a simple C# class that contains the object’s properties. Each time the application is run, Controller gets the data from the Model and populates the View for the user to read the result in his/her browser.

Every real-world object can be used in ASP.NET MVC application as the data source. To create a model, C# files are used (if you’re using C#, otherwise you would be creating a file related to your language). The properties and members act as properties that you would be using inside your HTML markup for rendering purposes.

You can control what kind of URLs are being used in your application by creating routing techniques. These define the structure of your application’s URLs. You must define at least one route in your application for it to run, otherwise you can define as many as you want.

MVC pattern removes the ambiguity between the data and the code-behind of your application. Your code-behind is now a part of the Controller of your application and is written inside the Controllers. The data is stored inside the Model (actually which is just the representation of the data, actual data is stored in somewhere like a file or database) and the what user sees is written in the View. This way, any error can be fixed as soon as possible without having to worry about any other bug, because every field is now controlled and written in a different part.

Model part of this pattern must always not perform any kind of business-logic, because that would entirely kill the actual purpose of this MVC pattern. That is why, all of the logic code is written in the controller; even the creation of data or the manipulation of data should be done in controller through functions, since user has no connection with Model, it provides an extra layer of safety as the user is totally oblivious to the schema of the database.

ViewBag and the View are special objects in ASP.NET used to manipulate the View (HTML markup), you can pass any member (which is dynamic) to this ViewBag from the Controller, to be used inside the View page (.cshtml in these cases) for rendering; like I did for showing some messages like an error or a success message.

How to connect ASP.NET website to Remote Database for CRUD operations

Download the attachment for this blog post

Introduction

This article is an overview for connecting an ASP.NET website or a web application to a remote SQL Server database. This article also covers what is the Database class inside the ASP.NET library to help the developers. Also, this post also covers how to create the XML notation for the configuration of websites to automatically connect to the database, through Database class objects.

Furthermore this post would cover the basics about CRUD operations over database and how ASP.NET can allow the users to perform these actions over databases using SQL language and send the commands to the database (data source) to load data, edit data, create data and delete the data if no longer required. These actions are generally the short form for: Create, Read, Update, Delete (making up CRUD).

ASP.NET Database object

In WebMatrix, a tool by Microsoft for the web developers to create ASP.NET web sites instantly, there was a special class designed for the developers to write less code to connect and perform other SQL commands on the database connected to their systems. This was written over .NET framework, making all of the SqlConnection class code shorter so that the developer can only focus on the actual command instead of maintaining and sustaining the objects and the memory etc.

Database object lets the users to simply call a function Open and connect to the database to perform tasks like SELECT, INSERT INTO and complete the procedures etc. The actual work in done inside the web.config file where the settings and the connectionString for the database an the server (collectively the data source). The name of the database connection is set in that connectionString node in the web.config file. Which is then used inside the ASP.NET server-side code to open the connections for the database at that connectionString.

An example of this connectionString can be as the following code,

<connectionStrings>
   <add name="MyDatabase"
        providerName="System.Data.SqlClient"
        connectionString="Data Source=.\SQLEXPRESS; 
                          Initial Catalog=MyDatabase; 
                          Trusted_Connection=true" />
</connectionStrings>

In the above code the providerName is the name for the library (namespace) to be used to call operations on this database. Since I am going to use SQL Server, I will use this one. If you’re going to use any other namespace (library) then use that one. Inside the connectionString attribute, Data source is the address for the server, and the Initial Catalog is the name of the database I am going to use. Since I used Windows Authentication, so that is why instead of User ID and Password, I am passing Trusted_Connection as a true field in the connectionString for the connection to my database.

Above connection is simple XML object placed inside the web.config file of your ASP.NET database and provides an attribute for you to specify for your website. The important point to note here is that the actual name of your database (actual database file; SQL Server file) does’t need to be the same as your XML object’s name attribute. Interesting thing in this is, that you can use any of the name inside the name attribute to be consumed inside the ASP.NET connection. But this doesn’t add anything to the security, but just a simplicity for the developers to not have to write entire connectionString everytime they have to write the code. But just to open the connection for the name that they’ve added inside the web.config file.

Using the Attachment

If you’re wanting to use the attachment that I’ve attached to this blog, then you can try first to download it and open it inside your IDE. You might consider creating a new solution and then adding these files to it.

Once done, you’re first required to have a database. You can name it as you want it to have a name, but the schema must be defined as this following schema of the table.

ASP.NET CRUD Table properties

Edit your table to look like this, and name it ‘Products’.

I am using SQL Server 2012, you can use your own version or download the SQL Server 2012 Express for development purposes and inside the Management Studio edit the table as the one above.

Once the table has been created inside your database server. You can add that database connection to your ASP.NET website, as in the connectionString setting above. Once the connection has been made, you will be able to query the database. If that doesn’t happen, then there is a problem inside your connectionString, try changing the properties of the connectionString to make it connect correctly. Possible issues might include passing a User Id and a Password instead of Trusted_Connection because of Database authentication mode and so on, possibly you will get your answers from the database engine (SQL Server; or what so ever data source server you’re using).

Performing operations

There are 4 operations that, we can perform for creating our applications, which include creating objects, reading their properties and data, updating them or deleting them once you’re done working with them.

Reading the data

Reading the data from the server is the most basic and usually the first step in the application’s cycle. You can use the SELECT clause to pass the data from server down to the client.

// Select all the rows
var result = db.Query("SELECT * FROM Products");
 
<table>
  <tr>
    <th>ProductID</th>
    <th>Name</th>
    <th>Description</th>
    <th>Price</th>
    <th>Actions</th>
  </tr>
  @foreach (var row in result)
  {
    <tr>
       <td>@row.ProductID</td>
       <td>@row.Name</td>
       <td>@row.Description</td>
       <td>$@row.Price</td>
       <td>
         <a href="~/application?view=update&id=@row.ProductID">Update</a>
         <a href="~/application?view=delete&id=@row.ProductID">Delete</a>
      </td>
    </tr>
  }
</table>

Above code would render all of the data from the database, in my case it gave me the rows that were present inside the table for the products. Following image depicts the example data.

Products ASP.NET

Available products inside the database.

Creating new objects

Creating new objects can be another state of application in which the user is provided with a form to fill in to create a new object for the database. Most of the validation can be performed here, to make sure that the data is accurate and according to the policies and conditions designed by the DBA. But I am not going to go deeper into them, and just I am going to provide a simple example of saving the data inside the database.

Note: I am going to make a user of the Database object so there won’t be any SqlConnection and SqlCommand objects inside it. 

if (IsPost)
{
  // Save the data inside the Database...
  db.Execute("INSERT INTO Products (ProductID, Name, Description, Price) 
                          VALUES (@0, @1, @2)",
  Request.Form["name"], Request.Form["description"], Request.Form["price"]);
  Response.Redirect("~/application?view=read&message=created");
}
 
// For the Create View
<form method="post">
  <input type="hidden" name="type" value="create" />

  Name <input type="text" name="name" /> <br />
  Description <input type="text" name="description" /><br />
  Price <input type="text" name="price" /> <br />
  <input type="submit" value="Submit" />
</form>
This is the form rendered in the HTML form in the browser.

This is the form rendered in the HTML form in the browser.

In ASP.NET web pages framework you can validly write the content inside the file as plain text and it will be rendered as valid HTML in the browser. Also you can have the ProductID to be an Identity field making it easier to update the field everytime a new record is added instead of updating the value yourself. 

Once this code would execute, it will return you with the following window. Displaying all of the records in the database including the new row that was added to the database by the user while submitting the form.

5th row is the new row in the table that we added. It depends on your data, the data you pass to the table.

5th row is the new row in the table that we added. It depends on your data, the data you pass to the table.

 Updating and Deleteing the data

Updating and deleting the data from the website doesn’t require any special web page to be generated (apologies, because you still need a form for the user to input the fields) for them to be worked. You can allow the user to enter the values that you want to get from him inside a form and then submit the data to the database for update purposes.

Update process of the data in the database, can be run through this example code,

var row = db.QuerySingle("SELECT * FROM Products WHERE ProductID = @0", Request.QueryString["id"]);

if (IsPost)
{
  db.Execute("UPDATE Products SET Name =@0, Description =@1, Price =@2 WHERE ProductID = @3", 
  Request.Form["name"], Request.Form["description"], Request.Form["price"], Request.QueryString["id"]);
Response.Redirect("~/application?view=read&message=updated");
}
 
// For the Create View
<form method="post">
  <input type="hidden" name="type" value="update" />

  Name <input type="text" name="name" value="@row.Name" /> <br />
  Description <input type="text" name="description" value="@row.Description" /><br />
  Price <input type="text" name="price" value="@row.Price" /> <br />
  <input type="submit" value="Submit" />
</form>

The above form will allow the user to pass values to the database. A simple query was performed in order to let the user know which data he is going to edit and what is the previous data that is currently stored inside the database. Upon successfull execution the user would be redirected to the default page for results. User is not interested in knowing how, when and where the data is stored. All he wants to read is that the data was stored and updated in the system.

Delete command, doesn’t even require a form so there is no need to write any other code. All you can do, is run a simple query and the data would be removed from the database, once that has been done you can redirect the user back to the default page (read) for the user to continue his work.

// For the Delete View
var id = Request.QueryString["id"];

db.Execute("DELETE FROM Products WHERE ProductID = @0", id);
Response.Redirect("~/application?view=read&message=deleted");

A parameter (id) was passed in order to let the database know only to delete the  objects with that particular condition. Otherwise all of the records from the database would be removed. 

Points of Interest

You can connect the ASP.NET applications and websites, not only to the databases present inside the directory of the website but to any other database, of whose authentication you can take care of, like server address, database name and credentials etc.

In ASP.NET, you can provide any name for the database object to be used inside the web application, keeping your database’s actual name hidden.

CRUD operations are simple command operations on database, such as SELECT, INSERT INTO. But in a different manner. You can create conditions inside the forms to use and then execute the command over the database using the SQL language. Which would perform the CRUD operations on the Database. CRUD operations stand for: Create, Read, Update, Delete.

It is not necessary to create a page for the Delete and Update messages, you can just execute the commands and come back to the default page (the page to Read the data) and just show the message returned from the server.

Connecting to the remote database will take some extra time depending on the network connection since the connection will be established remotely thus making the system a little heavier and connections a little slower. However, there is no difference in connecting the application’s own database or a remote database, assuming permissions do not come into action.

The provider for the connection of SQL Server is System.Data.SqlClient. For other database connections and types their provider must be provided instead of SqlClient namespace. It is required by ASP.NET to create the connections to the databases. You can learn creating connectionStrings for ASP.NET applications for SQL Server from any of the following links.

http://www.connectionstrings.com/sql-server/

http://www.asp.net/mvc/overview/getting-started/introduction/creating-a-connection-string

http://msdn.microsoft.com/en-us/library/jj653752(v=vs.110).aspx

MSDN and ASP.NET links have a +1 point for their clarity and their content.

History

First version of the post.

How is strong password, a strong password?

Introduction

Using the Internet, well, either that you’re a guest or you’re a member of the website that you’re visiting right now to read this post. If you’re a user, you must have logged in using a form, where you were asked to enter a password. That password is your key to your vault in the server, if misplaced, anyone can use your vault for any purpose. That is why it is mostly asked to use a Strong password and at the very same time a strong-o-meter or a secure-o-meter is also given for the user to understand whether the password that he’s using is a strong one, or not strong.

Password

A password is a set of alphanumeric characters used as a key to let the users authenticate them self to use a service. It can be a few letters long, containing a Capital case, any integer (such as numbers) or some special characters. Making it a stronger combination of the characters in a string which, no one other than himself can know to authenticate himself. Think of it just like the code combination of your locks for the safe. If you share that code with anyone else, he can (if not surely) use that code for some personal uses, might even steal things or read confidential content from your safe.

Websites are just like safe that you use in your houses. On websites you can store your personal data, your contacts or lists that contain a To-do list. The code for the website is known as a Password. At the time of creation of membership account, the users are asked to enter a password that will be used as their key which the user would have to enter before continuing to the service to be consumed by him.

Securing the Password

Once the password has been shared by the user now it is the time for the website owners, more like the developers to try their best to secure the password. The technique they use is called “Password Hashing” in which a hash of the password is generated, which is not identical to password in any way and also it is not-understandable by the humans in any way. This method makes the password secure, not only that any human user can never read and understand the string, but in a way that this string is not convertible back to its original form. There is no chance for the user, or hacker to convert the string saved inside the database to its original form to get the code.

Tips for a strong password:

The above mentioned things are the precautionary measures taken on the service side. User is not involved in this, in any way. The hashing process is completed on the server-side. Before that, the user comes into action and it is his responsibility to choose such a password that is not directly or indirectly guess-able by others but him. This might include special characters, numbers and other alphabets collectively.

Best method to create a strong password, is to avoid usage of words from dictionary and try to make up words from common language, chatters etc. Also you must include numbers, special characters to the password as much as you can. This is why, because most of the times when the hash is generated, it can be regenerated using the same password. Including special characters, numbers would minimize this problem to occur, to prevent cracking of the passwords.