How to know the version of MVC of an Existing Project

Hello All,

This is one of the common questions which we see often in various forums. Even I have struggled to find the exact version of the MVC earlier. It becomes more tricky as Micrososft releases new MVC versions at regular interval. Earlier each new release was a major release with release number like MVC 1, MVC 2, MVC 3, MVC 4,MVC 5 but recently we see new releases with minor version like MVC 5.1, MVC 5.2 and even now with build number like the upcoming one ASP.NET MVC 5.2.4 (while previous one 5.2.3). It also become more problematic sometimes when we upgrade the mvc version.

Note – The version of a software is normally denoted by four number separated by dots as x.x.x.x which is as Major.Minor.Build.Revision.

There are many ways to find the specific version. We will discuss few common ones here

1- The simplest way to open Web.Config file and look for System.Web.Mvc, you could see similar as

Here 5.2.3 is the current version.

2- We can check the references in the solution explorer, find out the System.Web.Mvc, right click on it and select properties as

3- If your project contain packages.config (normally every project has it), then we can find the version from here easily.     Search for Microsoft.AspNet.Mvc and you should find something as

4- We can get the MVC version programatically based on the need as

5- There is a nuget package available which provides lots of useful information named MVCDiagnostics which adds a     page  named mvcdiagnostics.aspx which displays other useful information along with MVC version. This package could be   very useful if you are upgrading to new version and facing issues. The page looks as

I have not included the complete page for brevity but lot more details are availble on this page.

Package can be installed from here

This is quick post on of the common questions. Hope you find it useful.

Cheers,
Brij

Advertisements

User Name availability check with AngularJS, ASP.NET MVC and ASP.NET Web API


User Name availability check is required in most of the registration forms where we allow user to choose a user name that one can use to login later. In some other scenarios, we allow user to use his/her email as login id/user name. In both the scenarios, we require to make sure that user name or email is not used earlier. In this post, I am going to discuss, how to achieve this feature in an application which is developed using AngularJS, ASP.NET MVC and ASP.NET Web API. I wont discuss in detail the Data Access part, where one can use any approach like Entity Framework, Identity Framework , Membership provider or ADO.NET.

In this post, we will create an empty ASP.NET project with MVC and Web API. We’ll start working on Web API  part where an API will be exposed which will take user’s entry for user name as input and return true and false based on its existence. After that we will work on MVC part where we will create a registration form where user will put its information. In last, we will focus on AngularJS and create the basic infrastructure including a Service which will call the Web API to check the user name existence then how will do the check on view we will discuss at later section.

I created an API folder under Controller and created an empty Web API controller (RegistrationController) which exposed an API IsUserNameAvailable which takes an username and returns true if available else returns false. It is as

  [RoutePrefix("api/Register")]
    public class RegistrationController : ApiController
    {
        [Route("IsUserNameAvailable")]
        [HttpGet]
        public bool IsUserNameAvailable(string userName)
        {
            IRepository rep = new SQLRepository();
            IList<UserAccount> users = rep.GetUser(userName);
            return users.Count == 0;
        }
    }

 

Inside the API, I have used a SQLRepository which connects to the database and returns a list of users based on it. If there is no match then list contains no items. Let’s have a look that our table in database form where the account is getting matched.

table

Now let’s just quickly check that whether our API is working properly. The simplest way to check any API Get request via browsing the URL itself. So let’s check the URL

http://localhost:4077/api/Register/IsUserNameAvailable?userName=Brij

So as we see that Brij exists in the database so it returns false.

WebAPIResult

Now let’s create an empty MVC controller (UserRegistrationController) and View for the Index action which has an input control to enter the username.

Now its time to introduce the AngularJS into the application. Let’s see that what all the AngularJS components we need to create to implement the feature.

  1. Angular Module – To bootstrap the application.
  2. Service – This service will connect to exposed Web API to check the user name availability. It will initiate the AJAX (http) call and get the appropriate response accordingly.
  3. Angular Controller- To add some logic
  4. Custom Directive – We will discuss it in later section

I have created a new folder Registration in scripts folder to put all the angular resources. I created an angular module (file name as RegModule) which has currently

var registrationModule = angular.module('registrationModule', []);

Now it time create a service which will connect to the server to check the user availability and return true or false accordingly. I am using Factory method for creating service as

registrationModule.factory("RegService", function ($http, $q) {
    return {
        IsUserNameAvailablle: function (userName) {
            // Get the deferred object
            var deferred = $q.defer();
            // Initiates the AJAX call
            $http({ method: 'GET', url: 'api/Register/IsUserNameAvailable?userName=' + userName }).success(deferred.resolve).error(deferred.reject);
            // Returns the promise - Contains result once request completes
            return deferred.promise;
        }
    }
});

Now to handle the UI part, we have two options

1- Either we do all the UI manipulation using Angular controller and add the required code. Or

2- We can create an custom directive where all the logic will be put to check the uniqueness of the username and updating the UI.

Lets quickly see first option, where we will write the logic in Angular Controller  as

    $scope.checkUserAvailable = function () {
        RegService.IsUserNameAvailablle($scope.Registation.username).then(function (userstatus) {
            $scope.registrationForm.username.$setValidity('unique', userstatus);
        }, function () {
            alert('error while checking user from server');
        });
    };

Here we are using $setValidity of for the model and add the unique attribute and set it true/false based on the service response. This will set the validity of the input as true/false and we can show some messages based on that. So let’s see the form


<div class="container" ng-app="registrationModule">

<div class="row" ng-controller="regController">

<form name="registrationForm" role="form">
            <label for="username">User Name:</label>

<div class="form-group">
                <input type="text" name="username" id="username" ng-model="Registation.username" class="form-control" placeholder="Username" ng-blur="checkUserAvailable()" />
                <span class="alert alert-danger" ng-show="registrationForm.username.$dirty && registrationForm.username.$error.unique">
                    User name is not available
                </span>
            </div>

        </form>

    </div>

</div>

We are calling checkUserAvailable function in blur event so that it gets fired when user moves focus from the control after entering the data. We also added a span (p) to show the error message which checks the input control state and unique attribute that we added. Now let’s run the application and see

sample

As Brij is already exists in the database so it is not available and if you enter any other username which is not available in database, it wont show the message.

Second option is much cleaner so we will create a custom directive (I have written 19 posts on AngularJS, you can go here to learn all the topics or for custom directives refer the Part -9 and Part -10)

So let’s create our custom directive. Here it will use the RegService and add an onblur event to the input which will be fired once user goes out of the control after entering the some data as

registrationModule.directive('useravail', ['RegService', function (RegService) {
    var directive = {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModel) {
            element.on('blur', function (evt) {
         
                if (!ngModel || !element.val()) return;
                var curValue = element.val();

                RegService.IsUserNameAvailablle(curValue)
                .then(function (response) {
                        ngModel.$setValidity('unique', response);
                }, function () {
                    //If there is an error while executing AJAX
                    ngModel.$setValidity('unique', true);
                });
            });
        }
    }
    return directive;
}]);

Here we have used similar code that we wrote in angular controller. Here we added blur event to the input control in directive. So let’s see the form


<div class="container" ng-app="registrationModule">

<div class="row">

<form name="registrationForm" role="form">
            <label for="username">User Name:</label>

<div class="form-group">
                <input type="text" name="username" id="username" ng-model="Registation.username" class="form-control" placeholder="Username" useravail />
               // later code is same as first option so removed forbrevity

We have set the ng-model and added our custom directive useravail as an attribute at the end in the input element. When we will run this application, it will have same as first option.
So we have implemented User name check using AngularJS, ASP.NET MVC and Web API. We can change the look n feel based on our need. Complete code is attached with this post.

Cheers
Brij

A Great unification of Controllers: ASP.NET 5

This is another post on one of the cool features of ASP.NET 5. Microsoft introduced One ASP.NET concept with ASP.NET 4.5 which allows us to use MVC, Web API, Web forms in one project without any pain. But as we know that MVC and Web API follow the same coding constructs like controller, action but inherently they were different. There were some features like OutputCache (Refer one of my earlier post ) is available only with MVC not with Web API. Microsoft has redesigned ASP.NET MVC and Web API framework and made it truly one ASP.NET with vNext (ASP.NET 5). Now we can use the same controller to expose as an web-api endpoint and for returning the MVC views as well. As these are using the same framework now, all the features available with MVC can be seamlessly used with web api as well and vice versa.  Let’s have a pictorial look

Earlier versions of ASP.NET

All the MVC controllers are derived from Controller class under the name space System.Web.Mvc.

ControllersEarlier Continue reading

Learning {{AngularJS}} with ASP.NET MVC – Part 3


This post is third part in the series on AngularJS. In first part, we created a simple Hello World application using AngularJS and in second part, we created a page which displays data in tabular format and used some directives to generate that. We also discussed one of the very important components, Module and provided a proper structure to our application. Please find the link of my earlier posts below

Learning {{AngularJS}} with Examples–Part 1

Learning {{AngularJS}} with Examples–Part 2

Let’s see that in last two post what have we covered and what will we be discussing today.

Structure

So we have covered three components in our earlier posts and will be using two more components in today’s post as in the above image.

Continue reading