ASP.NET MVC 5.2 Hosting - HostForLIFE.eu :: How to Combine Angular with ASP.NET MVC 5.2

Angular is a great tool, but it took some time to find a way to combine it with ASP.NET MVC 5.2. This is basically how I did it. First, create a new ASP.NET MVC 5.2 application. Next, install the Angular package via NuGet.

The objective is to use the normal ASP.NET MVC 5.2 navigation, unless for certain URLs, when we'll let Angular take over. So http://www.example.com/Account/Login would be handled by ASP.NET ("ASP.NET-mode"), but http://www.example.com/#/Customers would be handled by Angular ("Angular-mode"). Of course, it's ASP.NET serving us the Customers page, but after that, we want to use Angular for data-binding, navigation, routing, the forms, etc.

Then, Add a new Controller with one method, Index(), that returns View(). Standard ASP.NET up until now. I named mine AngularController. Next, add a View in the corresponding folder (in my case: /Angular/Index.cshtml). In this view, set up your main Angular view. Something like:
@{
ViewBag.Title = "Index";
}
<div ng-app="app">
<div ng-controller="main as vm">
<div ng-view class="shuffle-animation"></div>
</div>
</div>
@section scripts {
@Scripts.Render("~/bundles/angular")
}

So when we're in "Angular-mode", we want ASP.NET MVC 5.2 to include our Angular scripts. The angular bundle looks something like this (in /App_Start/BundleConfig.cs):
undles.Add(new Bundle("~/bundles/angular").Include(

"~/Scripts/angular.js",
"~/Scripts/angular-animate.js",
"~/Scripts/angular-route.js",
"~/Scripts/angular-sanitize.js",
"~/Scripts/app/app.js",
"~/Scripts/app/config.js",
"~/Scripts/app/main.js",
"~/Scripts/app/customers/customers.js"));

The reason I'm not using a ScriptBundle is because we don't want ASP.NET 4.5.2 to minify the Angular scripts. This causes errors because Angular sometimes depends on function arguments to be specific strings.  For now, minification isn't important, but in a production-environment, you would want to use the minified Angular scripts.

In app.js, config.js and main.js, I have put the necessary code to get Angular running. The most important part is the getRoutes function in config.js:

function getRoutes() {
return [
{
url: '/customers',
templateUrl: '/Scripts/app/customers/customers.html'
}
];
}

Finally, the customers.html and customers.js contain my Angular logic and HTML markup for this specific page. This now allows you to navigate to http://localhost:1748/Angular/#/ (your portnumber may vary of course).

There you have it. ASP.NET MVC 5.2 is serving the HTML page that includes references to Angular scripts and templates, the browser downloads all that, and then Angular wires it all together!

Adding this to your navigation is as simple as adding this tag to your _Layout.cshtml file:
<li><a href="https://www.blogger.com/Angular/#/customers">Customers</a></li>

Don't forget the hash.  Now lets add a second page. This will make the difference between what I've been calling "ASP.NET-mode" and "Angular-mode" more clear.

Add a new html file and a new javascript file to the /Scripts/app/customers/ folder, add the route to config.js and add the javascript file to the Angular bundle in BundleConfig.cs. The link in my case would now be:
<a href="https://www.blogger.com/Angular/#/customers/create">Create new customer</a>

Now, when you run the app, navigating from /Angular/#/customers to, say, /Account/Login will load the entire new page. But navigating from /Angular/#/customers to /Anguler/#/customers/create stays within Angular, and just loads the new template, "staying inside" your SPA. You can sort of notice it because loading a new page "inside" the SPA feels faster. So we've effectively combined classic ASP.NET MVC with Angular, allowing us to choose where we want/need which.

Free ASP.NET MVC 5 Hosting - HostForLIFE.eu :: Using Flags Enumeration With ASP.NET MVC & CodeFluent Entities

Enumeration support

CodeFluent Entities provides full support of “enumeration” types and multi value enumerations (flag enumeration) in ASP.NET MVC Hosting.

 

To declare a multi value enumeration, go to the enumeration type properties and set the, go to the enumeration type properties and set the Multi Value property to True.

And since the build version (646) you can set an enumeration value as the combination of other values (by their name).

Using enumeration values with ASP.NET MVC

Let’s use these concepts on an ASP.NET MVC application, I will use the model above as an example. I also have a MediaController with an Index action to list all Medias and an Edit action (Get and Post).

The default template for an enumeration value is a textbox, so if I write something like this:

@Html.EditorFor(m => m.MediaType)

I will get a textbox for my enumeration value.

 

This will work but the user will have to write a correct enumeration value, and unless each user knows all the possible enumeration values, this is not an acceptable solution.

It would be better to display a dropdown list instead. Let’s create a template named Choice.cshtml on the Views\Shared\EditorTemplates folder.

@model Enum

@{

var items = from object value in Enum.GetValues(Model.GetType())

select new { Value = value, Text = value.ToString() };

SelectList list = new SelectList(items, "Value", "Text", Model);

}

@Html.DropDownList("", list)

And now if we choose this as the template for our enumeration:

@Html.EditorFor(m => m.MediaType, "Choice")

 

 

This works fine and we can use the Choice.cshtml template for any enumeration type.  

Using multi enumeration values with ASP.NET MVC

Let’s now do the same work for a multi value enumeration (flag enumeration). First we create a template named MultiChoice.cshtml on the Views\Shared\EditorTemplates folder.

@model Enum

@{

var items = from object value in Enum.GetValues(Model.GetType())

select new { Value = value, Text = value.ToString() };

IEnumerable selected = CodeFluent.Runtime.Utilities.ConvertUtilities.SplitEnumValues(Model);

MultiSelectList list = new MultiSelectList(items, "Value", "Text", selected);

}

@Html.DropDownList("", list, new { multiple = "multiple" })

We use here a method on the CodeFluent.Runtime.Utilities namespace to split a flag value into a list of enumeration values. Let’s try it for our multi value enumeration.

@Html.EditorFor(m => m.ReleaseFormat, "MultiChoice")

 

 This seems to work but it doesn’t, when I try to save my form, not all values are saved (from the flag multi value enumeration). This is because MVC does not bind correctly the multi value enumeration to my model.

We need to add a custom model binder (System.Web.Mvc.IModelBinder) and a value provider (System.Web.Mvc.IValueProvider). I will use some utilities classes that are used for the ASP.NET Web Site V2 producer, they can be found under the Templates folder in the CodeFluent Entities installation location (Program Files (x86)\SoftFluent\CodeFluent\Modeler\Templates\UI\AspNetMvc\Code\Utilities.cs.tpl). I will copy the content of the file in my ASP.NET MVC project filling the correct namespace. Don’t forget to add a reference to the CodeFluent.Runtime.Web assembly.

Finally, we register the EntityBinder and the EntityValueProviderFactory classes that we have just added. On the Application Start:

ValueProviderFactories.Factories.Add(new EntityValueProviderFactory());

ModelBinderProviders.BinderProviders.Add(new EntityBinder());

This time everything works great. This post was inspired by the CodeFluent Entities templates when wondering what the ASP.NET Web Site V2 producer generates

ASP.NET MVC FREE UK Hosting - HostForLIFE.eu :: Social Login Buttons for ASP.NET MVC 5

Register OAuth providers

We start of by creating a new with ASP.NET MVC 5 application & hosting and enabling the various OAuth providers we would like to use in the App_Start\Startup.Auth.cs

app.UseTwitterAuthentication(

    consumerKey: "x",

    consumerSecret: "x");

app.UseFacebookAuthentication(

    appId: "x",

    appSecret: "x");

app.UseGoogleAuthentication();

Add Social Buttons CSS
The next step is to get a set of good looking social login buttons.  I decided to use the Zocial CSS social buttons which you can grab directly from the Github repository available at http://github.com/samcollins/css-social-buttons/. Add them to the project by copying the CSS file and the font files into the Content folder of your project. Next we need to add the CSS file to your CSS bundle, by updating the relevant lines in the App_Code\BundleConfig.cs file as follows:
 

bundles.Add(new StyleBundle("~/Content/css").Include(

            "~/Content/bootstrap.css",

            "~/Content/site.css",

            "~/Content/zocial.css"

            ));

To use the Zocial CSS social buttons you can use any HTML such as a, div, span, button etc. and add a CSS class of “zocial” as well as the class for the service that you want to style the button for.  For example the HTML code

<a href="#"

    class="zocial facebook">

    Sign in with Facebook

</a>

will render the button




Customizing ASP.NET MVC Output
The final step required is to customize the output of the partial view which was created by the ASP.NET MVC Internet project template.  Microsoft changed the standard template a bit from the way it worked in MVC 4, so this time around we only need to edit the _ExternalLoginsListPartial.cshtml file which is found under Views\Account.
_ExternalLoginsListPartial.cshtml and is used to display the list of available logins on the Login page as well as the Account Management page.  We alter this view by rendering the correct CSS class which will allow the Zocial CSS classed to render the button correctly.  We are lucky in that the provider names in ASP.NET MVC corresponds to the correct CSS classes in Zocial, but remember that CSS is case sensitive, so we force the provider name to lower case using AuthenticationType.ToLower():

<button

   type="submit"

   class="zocial @p.AuthenticationType.ToLower()"

   id="@p.AuthenticationType" name="provider"

   value="@p.AuthenticationType"

   title="Log in using your @p.Caption account">@p.AuthenticationType</button>

With this simple change the login page will display the login buttons using the new style:

FREE ASP.NET MVC 5 Spain Hosting - HostForLIFE.eu :: Building your first ASP.NET MVC 5 Application

Model-View-Controller is a software pattern for achieving isolation between different application components. Its always desirable for software applications (especially web-based applications) that there must be clear separation between business logic and the user interface. We can achieve this requirement by using MVC (Model View Controller) design that makes our application more flexible to change.

ASP.NET MVC is a framework based on MVC (Model View Controller) design pattern for building web applications. Microsoft has released the latest version of this framework as MVC 5 now, with new features and enhancing existing features as well.

Let's understand a bit about MVC i.e. Model, View and Controller.

• Model:- a representation of our data structure in a data source e.g. database.
• View:- a user interface for model that is presented to end-user.
• Controller:- Translating input from a user to an action on model and preparing appropriate view in response.

We will follow below steps to build a simple ASP.NET MVC5 application:

1. Creating MVC5 project in VS 2013
2. Preparing a Model
3. Add a Controller
4. Add simple View

1. Creating MVC5 project in Visual Studio 2013

• Open Visual Studio Express 2013 for Web and create "New Project" as "File --> New Project.
• Choose "ASP.NET Web Application" template as shown in following figure. Name the project as "MyFirstMVC5App", choose location and press "OK" button.

• In next dialog, choose "MVC" as template and again press "OK" button.

• A new ASP.NET MVC 5 project will be created as follows. You can easily find the "Controllers", "Models" and "Views" folder in solution explorer.

2. Preparing a Model

• In order to prepare a model, right click on "Models" folder and choose "Add", then "Class".
• Name the class as "Employee.cs".

 

public class Employee

     {

             public string EmpID { get; set; }

             public string EmpFirstName { get; set; }

             public string EmpLastName { get; set; }

      }

• As we discussed earlier that "Model" is the representation of data structure in our Data Source, so you can assume this "Employee" class represents an Employee table in our database with columns as "EmpID", "EmpFirstName", "EmpLastName" and so on.

Note: In order to keep this ASP.NET MVC5 tutorial simple and straight forward, I am not going to perform any CRUD operation. We will use this Employees.cs class in later articles on this blog.

3. Add a Controller

• To add a controller to our project, right click on "Controllers" folder, choose "Add", then "Controller". 
• From "Add Scaffold" dialog, choose "MVC 5 Controller - Empty" and press "Add" button as follows:

• Name the controller as "EmployeeController" in next dialog and press "Add". A new controller will be added to "Controllers" folder. Controller code generated will be as follows:

  namespace MyFirstMVC5App.Controllers

    {

        public class EmployeeController : Controller

       {

           // GET: /Employee/

           public ActionResult Index()

          {

              return View();

           }

       }

     }

There are few important things need to understand here:

1. EmployeeController inheriting from base Controller class has a method named Index(). This Index() method will be the default method called when accessing this controller as (http://localhost:xxxx/Employee/).
2. In order to generate HTML response, above Index() method uses a view template i.e. represented in code as "return View();"
3. As we create a controller, a new folder will be created under "Views" named as "Employee".

4. Add a View

• Finally for adding a view, right click on newly created "Employee" folder under views, choose "Add", then "MVC 5 View Page (Razor)". Specify the name for the view "Index" as follows:

• A new file with the name "Index.cshtml" will be added under "Views->Employee" folder. I have added meaningful some text to this page as shown in below figure.

 

Now, we are done with creating a simple ASP.NET MVC 5 application. To run the application, click CTRL + F5. Result will be as follows:

Now change the URL in browser from above to http://localhost:11517/Employee/ and press enter, still the output remains the same.Now it will be clear that request actually comes to controller i.e. EmployeeController in our case and controller renders a view (Index.cshtml we created under Views->Employee folder) for us in browser.

In later web development articles, we will try to explore interaction between Model, Controller and Views in more details

FREE ASP.NET MVC 5 Germany Hosting - HostForLIFE.eu ASP.NET MVC 5 Authentication Breakdown

I've been inspecting the new bits of ASP.NET MVC 5 and trying to make sense of the new paradigm that me, as .NET developer, is going to be working in. This new shift will probably be known as the Open Web Inerface for .NET era or more succinctly the OWIN era. OWIN is a middleware implementation for .NET that will allow developers, like me, to hook into a deeper pipeline to perform tasks like logging, exception handling, authentication, and more that my imagination can't contemplate just yet. This post isn't about OWIN and the possibilities, but it is about the new authentication found in ASP.NET MVC 5.

Registering the Middleware

I started by creating a new ASP.NET MVC 5 project using the existing templates that come with Visual Studio 2013 and picked the individual user accounts option for authentication. This means my user information will be stored locally in a data storage. The default data storage is SQL Server. Looking in the App_Start folder, I find Startup.Auth.cs. The file contents looks like this:

    public partial class Startup
    {
        // For more information on configuring authentication, please visit http://go.microsoft.com/fwlink/?LinkId=301864
        public void ConfigureAuth(IAppBuilder app)
        {
            // Enable the application to use a cookie to store information for the signed in user
            app.UseCookieAuthentication(new CookieAuthenticationOptions
            {
                AuthenticationType = DefaultAuthenticationTypes.ApplicationCookie,
                LoginPath = new PathString("/Account/Login")
            });
            // Use a cookie to temporarily store information about a user logging in with a third party login provider
            app.UseExternalSignInCookie(DefaultAuthenticationTypes.ExternalCookie);

            // Uncomment the following lines to enable logging in with third party login providers
            //app.UseMicrosoftAccountAuthentication(
            //    clientId: "",
            //    clientSecret: "");

            //app.UseTwitterAuthentication(
            //   consumerKey: "",
            //   consumerSecret: "");

            //app.UseFacebookAuthentication(
            //   appId: "",
            //   appSecret: "");

            //app.UseGoogleAuthentication();
        }
    } 

I also found this in the web.config of the application.

<system.web>
    <authentication mode="None" />
    <compilation debug="true" targetFramework="4.5" />
    <httpRuntime targetFramework="4.5" />
  </system.web>
  <system.webServer>
    <modules>
      <remove name="FormsAuthenticationModule" />
    </modules>
  </system.webServer> 

With these two files, I realize that the old forms authentication model has been replaced by the OWIN pipeline. Diving deeper into the calls found in the startup app, I also realize that each of the calls just registers a new middleware class to handle that particular auth provider. This is the google registration.

public static IAppBuilder UseGoogleAuthentication(this IAppBuilder app, GoogleAuthenticationOptions options)
    {
      if (app == null)
        throw new ArgumentNullException("app");
      if (options == null)
        throw new ArgumentNullException("options");
      app.Use((object) typeof (GoogleAuthenticationMiddleware), (object) app, (object) options);
      return app;
    }

nothing really fancy here, just instantiating the middle ware, then registering it with the application. The next step is to use the middleware.

AccountController

The AccountController is where ASP.NET MVC 5 gets confusing, because there is the noise introduced by the UserManager implementation. Ignore this, it is simply a Entity Framework implementation allowing you to save user information. I would most likely remove this, as I don't use Entity Framework myself.

The more interesting part of the AccountController is the IAuthenticationManager property.

private IAuthenticationManager AuthenticationManager
{
    get
    {
        return HttpContext.GetOwinContext().Authentication;
    }
} 

The IAuthenticationManager is being pulled from the OWIN implementation built on top of ASP.NET. When I start looking for uses of this property, I find the next generation of the things I've grown fond of with the FormsAuthentication class: SignIn and SignOut.

// Sign In
 AuthenticationManager.SignIn(new AuthenticationProperties() { IsPersistent = isPersistent }, identity);

// Sign Out
AuthenticationManager.SignOut(DefaultAuthenticationTypes.ExternalCookie);

The interesting part, is now I can create cookies with the distinction of whether they are internally generated, or generated by a third party provider: Twitter, Facebook, or Google.

The final piece of this is the ChallengeResult class, which looks to be optional to implement.

private class ChallengeResult : HttpUnauthorizedResult
{
    public ChallengeResult(string provider, string redirectUri) : this(provider, redirectUri, null)
    {
    }

    public ChallengeResult(string provider, string redirectUri, string userId)
    {
        LoginProvider = provider;
        RedirectUri = redirectUri;
        UserId = userId;
    }

    public string LoginProvider { get; set; }
    public string RedirectUri { get; set; }
    public string UserId { get; set; }

    public override void ExecuteResult(ControllerContext context)
    {
        var properties = new AuthenticationProperties() { RedirectUri = RedirectUri };
        if (UserId != null)
        {
            properties.Dictionary[XsrfKey] = UserId;
        }
        context.HttpContext.GetOwinContext().Authentication.Challenge(properties, LoginProvider);
    }
}

The only thing it does, is make a call to the IAuthenticationManager.Challenge to trigger the challenge built into the OWIN pipeline. This will redirect to a login page for the external auth providers.

Summary

All I need to get authentication working using OWIN is the following:

• The contents of App_Start/Startup.Auth.cs.
• The **IAuthenticationManager*.
• Optionally, ChallengeResult, which is a nice helper Result.

How they work together:

1. The authentication providers are registered with the app in startup.
2. Cookies are handled by OWIN and the middleware.
3. Each external auth provider's login challenge can be triggered using the ChallengeResult.
4. Cookies are managed using IAuthenticationManager.SignIn and IAuthenticationManager.SignOut.
5. Auth is based on Claims.

So after dissecting the start template, I found out what is basically important and what is just "helpful" stuff Microsoft gives me out of the box. There are definitely things that are still foggy to me, but I think I have a good understanding now of what it takes to do authentication in the OWIN era of ASP.NET MVC.