European ASP.NET MVC 4 and MVC 5 Hosting

BLOG about ASP.NET MVC 3, ASP.NET MVC 4, and ASP.NET MVC 5 Hosting and Its Technology - Dedicated to European Windows Hosting Customer

ASP.NET MVC 6 Hosting - HostForLIFE.eu :: How to Call A C# Function With jQuery AJAX In ASP.NET MVC?

clock March 14, 2017 11:24 by author Peter

jQuery AJAX method is a very powerful function for doing asynchronous operations from the Web pages. It helps to update parts of a Web page without reloading the whole page. This increases the Website's speed and reduces the load. It can be used with any Web technology like HTML, ASP.NET, ASP.NET MVC, PHP, Ruby or any other. With jQuery AJAX method, you can create high performance features in our Website. Let me show you how to use this method in  ASP.NET MVC page.

ASP.NET MVC Page
To understand the working of jQuery AJAX, I will create a login feature in ASP.NET MVC page. The page will have 2 input controls to enter the username and the password. There will also be a button to submit the two values for checking from the database.
When the username and password are correct, the secured information of the user is shown, else the “wrong username and password” is shown.
The main attraction here is that I will use jQuery AJAX method to check the username and the password. There will be no page reloading during checking.
To start learning jQuery AJAX method, I would suggest you check – jQuery AJAX. Also, look for the syntax and the key-value pairs that can be passed to this method.

The Controller Code
Start with creating a “Controller” in your ASP.NET MVC Application. Now, add a C# function “GetSecuredData” into the controller.
[HttpPost] 
public string GetSecuredData(string userName, string password) 

    string securedInfo = ""; 
    if ((userName == "admin") && (password == "admin")) 
        securedInfo = "Hello admin, your secured information is ......."; 
    else 
        securedInfo = "Wrong username or password, please retry."; 
    return securedInfo; 
}
 

The C# function given above will be called by jQuery AJAX method. As you can see, this function has 2 parameters, “username” and “password”. In these 2 parameters, it receives the username and the password values. It then checks them and shows the secured information, if they are the correct ones.

You can also change the code given above to include the database operation, where the username and the password are checked against the ones stored in the database.

The View code
Now, create a view for the Controller. This view will contain the two input controls for the username and password. There will be a button, which when clicked will call jQuery AJAX function.
<h3>Enter the Username and Password:</h3> 
(enter "admin" for both username and password) 
<input type="text" id="usernameInput" placeholder="Username" /> 
<input type="text" id="passwordInput" placeholder="Password" /> 
<button id="submit">Submit</button> 
<div id="dataDiv"></div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script> 
    $(document).ready(function () { 
        $("#submit").click(function (e) { 
            if ($("#usernameInput").val() == "") 
                alert("Username cannot be empty"); 
            else if ($("#passwordInput").val() == "") 
                alert("Password cannot be empty"); 
            else { 
                $.ajax({ 
                    type: "POST", 
                    url: "/Home/GetSecuredData", 
                    contentType: "application/json; charset=utf-8", 
                    data: '{"userName":"' + $("#usernameInput").val() + '","password":"' + $("#passwordInput").val() + '"}', 
                    dataType: "html", 
                    success: function (result, status, xhr) { 
                        $("#dataDiv").html(result); 
                    }, 
                    error: function (xhr, status, error) { 
                        $("#dataDiv").html("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText) 
                    } 
                }); 
            } 
            return false; 
        }); 
    }); 
</script> 


The button click event will call jQuery AJAX event. We pass the “controller name/function name” to the URL field. The jQuery AJAX event will call the C# function which gets the username and password values in its parameters.

Finally in the success function we will show the returned value from the C# function.



ASP.NET MVC 6 Hosting - HostForLIFE.eu :: Dynamic And Friendly URL Using ASP.NET MVC

clock March 1, 2017 08:29 by author Peter

This post will tell you about Dynamic And Friendly URL Using ASP.NET MVC. Dynamic URL is a great feature working with MVC. Friendly URLs are even better. The following approach, I think, is the best way to work with friendly URL. So, let's define some premises. The URLs must be stored in a Repository. This means, I want to change and create new URLs in my repository. One or more URLs can be pointed to the same Controller/Action. This means, I want to have alias for URLs;
If a URL does not exist in my Repository, try to resolve it using MVC Controller/Action default behavior. It means, the MVC default behavior will still work;
The URL cannot contain an ID at the end. It means that the last segment of those URLs can be a long ID number.

First of all, MVC does not have a built-in feature for dynamic and friendly URLs. You must write your own custom code.

For solution, we will need the following.

  • An MVC project;
  • A class to handle route requests;
  • A route repository;
  • Controllers and Views;

PS-  I will not use a database to store those URLs but I will use the repository pattern and dependency resolver to configure it. So, you can create a database repository in future.

Class that identifies a URL -

Handlers/UrlHandler.cs
public sealed class UrlHandler { 
public static UrlRouteData GetRoute(string url) { 
    url = url ? ? "/"; 
    url = url == "/" ? "" : url; 
    url = url.ToLower(); 

    UrlRouteData urlRoute = null; 

    using(var repository = DependencyResolver.Current.GetService < IRouteRepository > ()) { 
        var routes = repository.Find(url); 
        var route = routes.FirstOrDefault(); 
        if (route != null) { 
            route.Id = GetIdFromUrl(url); 
            urlRoute = route; 
            urlRoute.Success = true; 
        } else { 
            route = GetControllerActionFromUrl(url); 
            urlRoute = route; 
            urlRoute.Success = false; 
        } 
    } 

    return urlRoute; 


private static RouteData GetControllerActionFromUrl(string url) { 
    var route = new RouteData(); 

    if (!string.IsNullOrEmpty(url)) { 
        var segmments = url.Split('/'); 
        if (segmments.Length >= 1) { 
            route.Id = GetIdFromUrl(url); 
            route.Controller = segmments[0]; 
            route.Action = route.Id == 0 ? (segmments.Length >= 2 ? segmments[1] : route.Action) : route.Action; 
        } 
    } 

    return route; 


private static long GetIdFromUrl(string url) { 
    if (!string.IsNullOrEmpty(url)) { 
        var segmments = url.Split('/'); 
        if (segmments.Length >= 1) { 
            var lastSegment = segmments[segmments.Length - 1]; 
            long id = 0; 
            long.TryParse(lastSegment, out id); 

            return id; 
        } 
    } 

    return 0; 

}

Route Handler that handles all requests.

Handlers/UrlRouteHandler.cs
public IHttpHandler GetHttpHandler(RequestContext requestContext)  

var routeData = requestContext.RouteData.Values; 
var url = routeData["urlRouteHandler"] as string; 
var route = UrlHandler.GetRoute(url); 

routeData["url"] = route.Url; 
routeData["controller"] = route.Controller; 
routeData["action"] = route.Action; 
routeData["id"] = route.Id; 
routeData["urlRouteHandler"] = route; 

return new MvcHandler(requestContext); 
}

The route handler configuration.

App_Start/RouteConfig.cs

public class RouteConfig  

public static void RegisterRoutes(RouteCollection routes)  

    routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); 

    routes.MapRoute( 
        "IUrlRouteHandler", 
        "{*urlRouteHandler}").RouteHandler = new UrlRouteHandler(); 

}


Repository/IRouteRepository.cs
public interface IRouteRepository: IDisposable  

IEnumerable < RouteData > Find(string url); 
}

Repository/StaticRouteRepository.cs

public class StaticRouteRepository: IRouteRepository 

public void Dispose() { 



public IEnumerable < RouteData > Find(string url) { 
    var routes = new List < RouteData > (); 
    routes.Add(new RouteData() { 
        RoouteId = Guid.NewGuid(), 
            Url = "how-to-write-file-using-csharp", 
            Controller = "Articles", 
            Action = "Index" 
    }); 
    routes.Add(new RouteData() { 
        RoouteId = Guid.NewGuid(), 
            Url = "help/how-to-use-this-web-site", 
            Controller = "Help", 
            Action = "Index" 
    }); 

    if (!string.IsNullOrEmpty(url)) { 
        var route = routes.SingleOrDefault(r => r.Url == url); 
        if (route == null) { 
            route = routes.FirstOrDefault(r => url.Contains(r.Url)) ? ? routes.FirstOrDefault(r => r.Url.Contains(url)); 
        } 

        if (route != null) { 
            var newRoutes = new List < RouteData > (); 
            newRoutes.Add(route); 

            return newRoutes; 
        } 
    } 

    return new List < RouteData > (); 

}


I have created 2 URLs. One URL will point to the Help Controller while the other one to the Articles Controller. For dependency resolver configuration, I used Ninject.
App_Start/NinjectWebCommon.cs
private static void RegisterServices(IKernel kernel) 

kernel.Bind < Repository.IRouteRepository > ().To < Repository.StaticRouteRepository > (); 
}



European ASP.NET MVC 6 Hosting - HostForLIFE.eu :: Angular 2 Contact Form Component for ASP.NET MVC 6

clock February 16, 2017 07:20 by author Scott

In this post, I will show you simple tutorial about how to create a simple contact form using Angular 2 and ASP.NET MVC 6. Ok, let’s get started.

The Component

Contact.cshtml

We’ll start off with a simple contact form. I’m asking the user for his name, e-mail address, a subject and of course the message itself. 
You’ll notice that I’m also using a bit of Bootstrap css classes. You however can of course use anything you want to style the contact form.

<div>
    <form #f="ngForm" (ngSubmit)="onSubmit(contact)">
        <div>
            <div class="form-group required">
                <label for="name">Name</label>
                <input type="text" [(ngModel)]="contact.Name" name="contact.Name" required="Please enter your name" class="form-control text-input" id="name" placeholder="Name"/>
            </div>
            <div class="form-group required">
                <label for="email">E-mail</label>
                <input type="email" [(ngModel)]="contact.Email" name="contact.Email" required="Please enter your e-mail address" class="form-control text-input" id="email" placeholder="E-mail"/>
            </div>
        </div>
        <div>
            <div class="form-group required">
                <label for="subject">Subject</label>
                <input type="text" [(ngModel)]="contact.Subject" name="contact.Subject" required="A subject is needed" class="form-control text-input" id="subject" placeholder="Subject"/>
            </div>
        </div>
        <div>
            <div class="form-group required">
                <label for="message">Message</label>
                <textarea type="text" [(ngModel)]="contact.Message" name="contact.Message" required="A message is needed" class="form-control" id="message" placeholder="Message..."></textarea>
            </div>
        </div>
        <div>
            <div>
                <button type="submit" class="btn btn-success">Send</button>
            </div>
        </div>
    </form>
</div>

Contact.ts

This the most important part of this post. I’ve written the code in Typescript. 
Due to an issue I couldn’t seem to resolve between MVC6 and Angular 2 I was forced to the URLSearchParams from Angular to send my data to the server. I hope to update this one day so I only have to send the complete object to the server.

import {Component} from '@angular/core';
import {Http, Headers, URLSearchParams} from '@angular/http';

@Component({
    selector: 'contact',
    templateUrl: '/angular/contact'
})

export class ContactFormComponent {
    http = undefined;
    contact = { Name: undefined, Subject: undefined, Email: undefined, Message: undefined };
    loading = true;

    constructor(http: Http) {
        this.http = http;
        this.loading = false;
    }

    onSubmit() {
        this.loading = true;
        let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
        var params = new URLSearchParams();
        params.set('Name', this.contact.Name);
        params.set('Subject', this.contact.Subject);
        params.set('Message', this.contact.Message);
        params.set('Email', this.contact.Email);
        this.http.post('/contact/send', params.toString(), { headers: headers }).subscribe(this.messageSend());
    }

    messageSend() {
        this.contact = { Name: undefined, Subject: undefined, Email: undefined, Message: undefined };
        this.loading = false;
    }
}

This was the biggest part, now what’s left is the connection on the server itself.

Start.cs

First we’ll setup the routes. This is very easy. I’ve set up a rout to go to the contact form itself and one for sending the information to the server.

public class Startup
{
                public void ConfigureServices(IServiceCollection services)
                {
                                //I'm using MVC... So I'm adding MVC.
                                services.AddMvc();
                }

                public void Configure(IApplicationBuilder app)
                {
                                //I have some static files, like images and css in my wwwroot folder. So I need to add these.
                                app.UseStaticFiles();
                                app.UseMvc(m =>
                                {
                                                //Route to open the page with the form.
                                                m.MapRoute("contact", "contact", new { controller = "Contact", action = "Contact" });
                                                //Route to post the data
                                                m.MapRoute("contact-send", "contact/send", new { controller = "Contact", action = "SendContact" });
                                });
                }

                // Entry point for the application.
                public static void Main(string[] args) => WebApplication.Run<Startup>(args);
}

ContactVm.cs

This is going to be the ViewModel. I use this to map the JSON request to a nice and easy model we can use on our controller.

public class ContactVm
{
                [Required]
                [DataType(DataType.Text)]
                public string Name { get; set; }
                [Required]
                [DataType(DataType.EmailAddress)]
                public string Email { get; set; }
                [Required]
                [DataType(DataType.Text)]
                public string Subject { get; set; }
                [Required]
                [DataType(DataType.MultilineText)]
                public string Message { get; set; }
}

ContactController.cs

The last part is our controller itself where the data is being received on the server. Nothing special here, I’m just using the above viewmodel as a parameter.

public class ContactController : Controller
{
                public ContactController() { }

                public IActionResult Contact()
                {
                                return View();
                }             

                [HttpPost]
                public void SendContact(ContactVm contact)
                {
                                //Do something with the contact form...
                }
}

By using the above code you’ll be able create a contact form in Angular 2 and make it interact with and MVC 6 server-side.
Keep in mind the both frameworks are still in development and can contain errors.



ASP.NET MVC 6 Hosting - HostForLIFE.eu :: Database Image Bank In ASP.NET MVC

clock February 2, 2017 08:41 by author Peter

The goal is to use a database to store images and use MVC to call those images, using custom routes. The premises are,
The URL must be something like this: “imagebank/sample-file” or “imagebank/32403404303“.
The MVC Controller/Action will get the image by an ID “sample-file” or “32403404303” and find out on some cache and/or database to display the image. If it exists in cache, get from cache if not get from database. So in HTML, we can call the image like this.

    <img src="~/imagebank/sample-file" />   

If you want to use another URL, for instance “foo/sample-file”, you can change the image bank route name in web.config.
If you do not want to display the image and just download the file, use - “imagebank/sample-file/download“.

So, let's get started!

The image bank route configuration

App_Start\RouteConfig.cs
public class RouteConfig 
    { 
        public static void RegisterRoutes(RouteCollection routes) 
        { 
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); 
 
            routes.MapRoute( 
                name: "ImageBank", 
                url: GetImageBankRoute() + "/{fileId}/{action}", 
                defaults: new { controller = "ImageBank", action = "Index" } 
            ); 
 
            routes.MapRoute( 
                name: "Default", 
                url: "{controller}/{action}/{id}", 
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional } 
            ); 
        } 
 
        private static string GetImageBankRoute() 
        { 
            var key = "imagebank:routeName"; 
            var config = ConfigurationManager.AppSettings.AllKeys.Contains(key) ? ConfigurationManager.AppSettings.Get(key) : ""; 
 
            return config ?? "imagebank"; 
        } 
    } 


The Image Bank Controller

Controllers\ImageBankController.cs 
public class ImageBankController : Controller 
    { 
        public ImageBankController() 
        { 
            Cache = new Cache(); 
            Repository = new Repository(); 
        } 
         
        public ActionResult Index(string fileId, bool download = false) 
        { 
            var defaultImageNotFound = "pixel.gif"; 
            var defaultImageNotFoundPath = $"~/content/img/{defaultImageNotFound}"; 
            var defaultImageContentType = "image/gif"; 
 
            var cacheKey = string.Format("imagebankfile_{0}", fileId); 
            Models.ImageFile model = null; 
 
            if (Cache.NotExists(cacheKey)) 
            { 
                model = Repository.GetFile(fileId); 
 
                if (model == null) 
                { 
                    if (download) 
                    { 
                        return File(Server.MapPath(defaultImageNotFoundPath), defaultImageContentType, defaultImageNotFound); 
                    } 
 
                    return File(Server.MapPath(defaultImageNotFoundPath), defaultImageContentType); 
                } 
                 
                Cache.Insert(cacheKey, "Default", model); 
            } 
            else 
            { 
                model = Cache.Get(cacheKey) as Models.ImageFile; 
            } 
 
            if (download) 
            { 
                return File(model.Body, model.ContentType, string.Concat(fileId, model.Extension)); 
            } 
 
            return File(model.Body, model.ContentType); 
        } 
 
        public ActionResult Download(string fileId) 
        { 
            return Index(fileId, true); 
        } 
 
        private Repository Repository { get; set; } 
 
        private Cache Cache { get; set; } 
    } 


The above code has two actions - one for displaying the image and the other for downloading it.

The database repository

Repository.cs
public class Repository 
    { 
        public static Models.ImageFile GetFile(string fileId) 
        { 
            //Just an example, use you own data repository and/or database 
            SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["ImageBankDatabase"].ConnectionString); 
 
            try 
            { 
                connection.Open(); 
                var sql = @"SELECT *  
                            FROM    dbo.ImageBankFile  
                            WHERE   FileId = @fileId  
                                    OR ISNULL(AliasId, FileId) = @fileId"; 
 
                var command = new SqlCommand(sql, connection); 
                command.Parameters.Add("@fileId", SqlDbType.VarChar).Value = fileId; 
                command.CommandType = CommandType.Text; 
                var ada = new SqlDataAdapter(command); 
                var dts = new DataSet(); 
                ada.Fill(dts); 
 
                var model = new Models.ImageFile(); 
                model.Extension = dts.Tables[0].Rows[0]["Extension"] as string; 
                model.ContentType = dts.Tables[0].Rows[0]["ContentType"] as string; 
                model.Body = dts.Tables[0].Rows[0]["FileBody"] as byte[]; 
 
                return model; 
            } 
            catch  
            { 
 
            } 
            finally 
            { 
                if (connection != null) 
                { 
                    connection.Close(); 
                    connection.Dispose(); 
                    connection = null; 
                } 
            } 
 
            return null; 
        } 
    } 


The repository is very simple. This code is just for demonstration. You can implement your own code. 

The image bank model class

Models\ImageFile.cs
public class ImageFile 
    { 
        public byte[] Body { get; set; } 
 
        public string ContentType { get; set; } 
 
        public string Extension { get; set; } 
    }  

Create table script

USE [ImageBankDatabase] 
GO 
 
/****** Object:  Table [dbo].[ImageBankFile]    Script Date: 11/16/2016 12:36:56 ******/ 
SET ANSI_NULLS ON 
GO 
 
SET QUOTED_IDENTIFIER ON 
GO 
 
SET ANSI_PADDING ON 
GO 
 
CREATE TABLE [dbo].[ImageBankFile]( 
    [FileId] [nvarchar](50) NOT NULL, 
    [AliasId] [nvarchar](100) NULL, 
    [FileBody] [varbinary](max) NULL, 
    [Extension] [nvarchar](5) NULL, 
    [ContentType] [nvarchar](50) NULL, 
 CONSTRAINT [PK_ImageBankFile] PRIMARY KEY CLUSTERED  

    [FileId] 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  

The Cache provider class

Cache.cs

public class Cache 
    { 
        public Cache() 
        { 
            _config = ConfigurationManager.GetSection("system.web/caching/outputCacheSettings") as OutputCacheSettingsSection; 
        } 
         
        private OutputCacheSettingsSection _config; 
         
        private OutputCacheProfile GetProfile(string profile) 
        { 
            return !string.IsNullOrEmpty(profile) ? _config.OutputCacheProfiles[profile] : new OutputCacheProfile("default"); 
        } 
         
        private object GetFromCache(string id) 
        { 
            if (string.IsNullOrEmpty(id)) throw new NullReferenceException("id is null"); 
            if (System.Web.HttpRuntime.Cache != null) 
            { 
                lock (this) 
                { 
                    return System.Web.HttpRuntime.Cache[id]; 
                } 
            } 
 
            return null; 
        } 
         
        public Cache Insert(string id, string profile, object obj) 
        { 
            if (System.Web.HttpRuntime.Cache != null) 
            { 
                if (string.IsNullOrEmpty(id)) 
                { 
                    throw new ArgumentNullException("id", "id is null"); 
                } 
 
                if (string.IsNullOrEmpty(profile)) 
                { 
                    throw new ArgumentNullException("profile", string.Format("profile is null for id {0}", id)); 
                } 
 
                var objProfile = GetProfile(profile); 
                if (objProfile == null) 
                { 
                    throw new NullReferenceException(string.Format("profile is null for id {0} and profile {1}", id, profile)); 
                } 
 
                lock (this) 
                { 
                    System.Web.HttpRuntime.Cache.Insert(id, obj, null, DateTime.Now.AddSeconds(objProfile.Duration), TimeSpan.Zero); 
                } 
            } 
 
            return this; 
        } 
         
        public bool NotExists(string id) 
        { 
            return GetFromCache(id) == null; 
        } 
         
        public Cache Remove(string id) 
        { 
            if (System.Web.HttpRuntime.Cache != null) 
            { 
                lock (this) 
                { 
                    System.Web.HttpRuntime.Cache.Remove(id); 
                } 
            } 
 
            return this; 
        } 
         
        public object Get(string id) 
        { 
            return GetFromCache(id); 
        } 
    } 

HostForLIFE.eu ASP.NET MVC 6 Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.



ASP.NET MVC 6 Hosting - HostForLIFE.eu :: Action Filter In MVC

clock January 26, 2017 07:43 by author Peter

Action filter in MVC provides the option to handle the situations after we would really like to perform an operation before and after the execution of a controller action. For this purpose, we create a custom class, which inherits the FilterAttribute class and implements the IActionFilter interface. when creating the filter, we simply apply the class name as an attribute on the controller.

Here, the FilterAttribute class makes it possible to use the class as an attribute and IActionFilter interface contains two methods named OnActionExecuting and OnActionExecuted. The OnActionExecuting is executed before the controller method is executed and OnActionExecuted is called after the execution of the controller method. This kind of technique is quite helpful for the logging purposes. Thus, let's see how we can use this filter.
 
Let's start by adding a new class named MyActionFilter.cs. Now, derive this class from the FilterAttribute and the IActionFilter. Implement the  OnActionExecuting and OnActionExecuted methods and add your custom logic into the methods.Thus, the code will look as shown below. 
    public class MyActionFilter : FilterAttribute, IActionFilter 
    { 
        public void OnActionExecuted(ActionExecutedContext filterContext) 
        { 
            //Fires after the method is executed 
        } 
     
        public void OnActionExecuting(ActionExecutingContext filterContext) 
        { 
            //Fires before the action is executed 
        } 
    } 


Simply, apply the class as an attribute on the controller. Add debuggers on both the methods as well as the controller method.
    public class HomeController : Controller 
    { 
        [MyActionFilter] 
        public ActionResult Index() 
        { 
            return View(); 
        } 
     
        public ActionResult About() 
        { 
            ViewBag.Message = "Your application description page."; 
            return View(); 
        } 
     
        public ActionResult Contact() 
        { 
            ViewBag.Message = "Your contact page."; 
            return View(); 
        } 
    } 


Run the Application and debug step by step to see the order of execution of the methods. First, the OnActionExecuting will be executed, then the controller method and finally the OnActionExecuted method.

HostForLIFE.eu ASP.NET MVC 6 Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.



ASP.NET MVC 6 Hosting - HostForLIFE.eu :: Button Loader Integration in ASP.NET MVC

clock January 19, 2017 08:29 by author Peter

Today, I will write about Button Loader Integration in ASP.NET MVC. User interaction & responsiveness are major aspects in any application. It is always good to tell the user that is happening in the application i.e. whether they have to wait for certain processing or they can proceed with another action,  etc.

Today, I shall be demonstrating the integration of a simple button loader plugin called Ladda, you can explore it more by visiting the website.

You can download the complete source code for this tutorial from here or you can follow step by step discussion below. The sample code is developed in Microsoft Visual Studio 2013 Ultimate.

Create new MVC web project and name it "ButtonLoader".

Download the Ladda plugin and incorporate its related JavaScript & CSS files into the project.

Create new controller under "Controller" folder and name it "LoaderController.cs".

Open "RouteConfig.cs" file under "App_Start" folder and change the default controller to "Loader" and action to "Index" as shown below.
    using System; 
    using System.Collections.Generic; 
    using System.Linq; 
    using System.Web; 
    using System.Web.Mvc; 
    using System.Web.Routing; 
    namespace ButtonLoader 
    { 
        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 = "Loader", action = "Index", id = UrlParameter.Optional 
                }); 
            } 
        } 
    } 

Create new file "LoaderViewModels.cs" under "Models" folder and place the following code in it:
    using System.ComponentModel.DataAnnotations; 
    namespace ButtonLoader.Models 
    { 
        public class LoaderViewModel 
        { 
            [Required] 
            [Display(Name = "Text")] 
            public string Text 
            { 
                get; 
                set; 
            } 
        } 
    } 

Here, we have created a simple model for observing our loader effect.
Now, open "LoaderController.cs" file under "Controller" folder and replace it with the following code:
    //-----------------------------------------------------------------------  
    // <copyright file="LoaderController.cs" company="None"> 
    // Copyright (c) Allow to distribute this code.  
    // </copyright> 
    // <author>Asma Khalid</author> 
    //-----------------------------------------------------------------------  
    namespace ButtonLoader.Controllers 
    { 
        using System; 
        using System.Collections.Generic; 
        using System.Linq; 
        using System.Security.Claims; 
        using System.Threading; 
        using System.Threading.Tasks; 
        using System.Web; 
        using System.Web.Mvc; 
        using ButtonLoader.Models; 
        /// <summary> 
        /// Loader controller class.  
        /// </summary> 
        public class LoaderController: Controller 
        { 
            #region Index view method.#region Get: /Loader/Index 
            method. 
                /// <summary> 
                /// Get: /Loader/Index method.  
                /// </summary> 
                /// <returns>Return index view</returns> 
            public ActionResult Index() 
            { 
                try 
                {} 
                catch (Exception ex) 
                { 
                    // Info  
                    Console.Write(ex); 
                } 
                // Info.  
                return this.View(); 
            }#endregion# region POST: /Loader/Index 
                /// <summary> 
                /// POST: /Loader/Index  
                /// </summary> 
                /// <param name="model">Model parameter</param> 
                /// <returns>Return - Loader content</returns> 
                [HttpPost] 
                [AllowAnonymous] 
                [ValidateAntiForgeryToken] 
            public ActionResult Index(LoaderViewModel model) 
            { 
                try 
                { 
                    // Verification  
                    if (ModelState.IsValid) 
                    { 
                        // Sleep.  
                        Thread.Sleep(5000); // 5 sec.  
                        // Info.  
                        return this.Json(new 
                        { 
                            EnableSuccess = true, SuccessTitle = "Success", SuccessMsg = model.Text 
                        }); 
                    } 
                } 
                catch (Exception ex) 
                { 
                    // Info  
                    Console.Write(ex); 
                } 
                // Sleep.  
                Thread.Sleep(5000); // 5 sec.  
                // Info  
                return this.Json(new 
                { 
                    EnableError = true, ErrorTitle = "Error", ErrorMsg = "Something goes wrong, please try again later" 
                }); 
            }#endregion# endregion 
        } 
    } 
In the above code snippet, we have created a simple "HttpGet" & "HttpPost" methods to observer the behavior of the button loader. We have also placed a 5 sec delay in the post method at every response to observer the behavior of the button loader from server side as well.

Now, in "Views->Loader" folder create a new page called "Index.cshtml" and place the following code in it:
    @using ButtonLoader.Models  
    @model ButtonLoader.Models.LoaderViewModel  
    @{  
    ViewBag.Title = "ASP.NET MVC5 C#: Button Loader Integration";  
    }  
     
    <div class="row"> 
        <div class="panel-heading"> 
            <div class="col-md-8"> 
                <h3> 
                    <i class="fa fa-file-text-o"></i> 
                    <span>Bootstrap Modal with ASP.NET MVC5 C#</span> 
                </h3> 
            </div> 
        </div> 
    </div> 
    <div class="row"> 
        <section class="col-md-4 col-md-push-4"> 
            @using (Ajax.BeginForm("Index", "Loader", new AjaxOptions { HttpMethod = "POST", OnSuccess = "onLoaderSuccess" }, new { @id = "LoaderformId", @class = "form-horizontal", role = "form" }))  
            {  
                @Html.AntiForgeryToken()  
     
            <div class="well bs-component"> 
                <br /> 
                <div class="row"> 
                    <div class="col-md-12 col-md-push-2"> 
                        <div class="form-group"> 
                            <div class="col-md-10 col-md-pull-1"> 
                                @Html.TextBoxFor(m => m.Text, new { placeholder = Html.DisplayNameFor(m => m.Text), @class = "form-control" })  
                                @Html.ValidationMessageFor(m => m.Text, "", new { @class = "text-danger custom-danger" })  
                            </div> 
                        </div> 
                        <div class="form-group"> 
                            <div class="col-md-18"></div> 
                        </div> 
                        <div class="form-group"> 
                            <div class="col-md-4 col-md-push-2"> 
                                <div > 
                                    <button type="submit"  
                                        class="btn btn-warning ladda-button"  
                                        value="Process"  
                                        data-style="slide-down"> 
                                        <span class="ladda-label">Process</span> 
                                    </button> 
                                </div> 
                            </div> 
                        </div> 
                    </div> 
                </div> 
            </div> 
    }  
     
        </section> 
    </div> 
In the above code snippet, we have created a simple text input box and a button, for Ladda plugin to work however, you have to use following structure on button i.e.
    <button type="submit" class="btn btn-warning ladda-button" value="Process" data-style="slide-down"> 
        <span class="ladda-label">Process</span> 
    </button> 
Unfortunately, Ladda plugin does not work with input type buttons.

Under "Scripts" folder, create a new script called "custom-loader.js" and place the following code in it:
    $(document).ready(function() 
    { 
        Ladda.bind('.ladda-button'); 
        $("#LoaderformId").submit(function(event) 
        { 
            var dataString; 
            event.preventDefault(); 
            event.stopImmediatePropagation(); 
            var action = $("#LoaderformId").attr("action"); 
            // Setting.  
            dataString = new FormData($("#LoaderformId").get(0)); 
            contentType = false; 
            processData = false; 
            $.ajax( 
            { 
                type: "POST", 
                url: action, 
                data: dataString, 
                dataType: "json", 
                contentType: contentType, 
                processData: processData, 
                success: function(result) 
                { 
                    // Result.  
                    onLoaderSuccess(result); 
                }, 
                error: function(jqXHR, textStatus, errorThrown) 
                { 
                    //do your own thing  
                    alert("fail"); 
                    // Stop Button Loader.  
                    Ladda.stopAll(); 
                } 
            }); 
        }); //end .submit()  
    }); 
    var onLoaderSuccess = function(result) 
    { 
        if (result.EnableError) 
        { 
            // Clear.  
            $('#ModalTitleId').html(""); 
            $('#ModalContentId').html(""); 
            // Setting.  
            $('#ModalTitleId').append(result.ErrorTitle); 
            $('#ModalContentId').append(result.ErrorMsg); 
            // Show Modal.  
            $('#ModalMsgBoxId').modal( 
            { 
                backdrop: 'static', 
                keyboard: false 
            }); 
        } 
        else if (result.EnableSuccess) 
        { 
            // Clear.  
            $('#ModalTitleId').html(""); 
            $('#ModalContentId').html(""); 
            // Setting.  
            $('#ModalTitleId').append(result.SuccessTitle); 
            $('#ModalContentId').append(result.SuccessMsg); 
            // Show Modal.  
            $('#ModalMsgBoxId').modal( 
            { 
                backdrop: 'static', 
                keyboard: false 
            }); 
            // Resetting form.  
            $('#LoaderformId').get(0).reset(); 
        } 
        // Stop Button Loader.  
        Ladda.stopAll(); 
    } 

I have also combined modal here to display server response. The following piece of code will bind the button loader plugin with the button i.e.
    Ladda.bind('.ladda-button');  
So, whenever, I click the button the button loader will start. The following piece of code will stop the button loader effect whenever I receive a response from the server side:
    // Stop Button Loader.  
    Ladda.stopAll();  

   
Now, execute the application. I hope it works for you!

HostForLIFE.eu ASP.NET MVC 6 Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.



European ASP.NET MVC 6 Hosting - HostForLIFE.eu :: New Configuration and AppSetings for ASP.NET MVC 6

clock January 17, 2017 10:35 by author Scott

There’s a new place to put the app settings for your MVC6 ASP.NET Core application. Web.config is gone but the new solution is great, you get a dependency injected POCO with strongly typed settings instead!

New Settings File - appsettings.json

Instead of web.config, all your settings are now located in appsettings.json. Here’s what the default one looks like, though I’ve also added an AppSettings section:

{
  "AppSettings": {
    "BaseUrls": {
      "API": "https://localhost:44307/",
      "Auth": "https://localhost:44329/",
      "Web": https://localhost:44339/
    },
    "AnalyticsEnabled": true
  },
  "Data": {
    "DefaultConnection": {
      "ConnectionString": "Server=(localdb)\\mssqllocaldb;Database=aspnet5-AppSettings1-ad2c59cc-294a-4e72-bc31-078c88eb3a99;Trusted_Connection=True;MultipleActiveResultSets=true"
    }
  },
  "Logging": {
    "IncludeScopes": false,
    "LogLevel": {
      "Default": "Verbose",
      "System": "Information",
      "Microsoft": "Information"
    }
  }
}

Notice that we’re using JSON instead of XML now. This is pretty great with one big exception, No Intellisense.

Create an AppSettings class

If you’re used to using ConfigurationManager.AppSettings["MySetting"] in your controllers then you’re out of luck, instead you need to setup a class to hold your settings. As you can see above I like to add an “AppSettings” section to the config that maps directly to an AppSettings POCO. You can even nest complex classes as deep as you like:

public class AppSettings
{
    public BaseUrls BaseUrls { get; set; }
    public bool AnalyticsEnabled { get; set; }
}

public class BaseUrls
{
    public string Api { get; set; }
    public string Auth { get; set; }
    public string Web { get; set; }
}  

Configure Startup.cs

Now that we have a class to hold our settings, lets map the data from our appsettings.json. You can do it in a couple of ways

Automatically bind all app settings:

public IServiceProvider ConfigureServices(IServiceCollection services)
{           
    services.Configure<AppSettings>(Configuration.GetSection("AppSettings"));
}

or if you need to alter or transform anything you can assign each property manually:

public IServiceProvider ConfigureServices(IServiceCollection services)
{           
    services.Configure<AppSettings>(appSettings =>
    {
        appSettings.BaseUrls = new BaseUrls()
        {
            // Untyped Syntax - Configuration[""]
            Api = Configuration["AppSettings:BaseUrls:Api"],
            Auth = Configuration["AppSettings:BaseUrls:Auth"],
            Web = Configuration["AppSettings:BaseUrls:Web"],
        };               

        // Typed syntax - Configuration.Get<type>("")
        appSettings.AnalyticsEnabled = Configuration.Get<bool>("AppSettings:AnalyticsEnabled");
    });
}

Using the settings

Finally we can access our settings from within our controllers. We’ll be using dependency injection, so if you’re unfamiliar with that, get ready to learn!

public class HomeController : Controller
{
    private readonly AppSettings _appSettings;

    public HomeController(IOptions<AppSettings> appSettings)
    {
        _appSettings = appSettings.Value;
    }

    public IActionResult Index()
    {
        var webUrl = _appSettings.BaseUrls.Web;

        return View();
    }
}

There are a few important things to note here:

The class we are injecting is of type IOptions<AppSettings>. If you try to inject AppSettings directly it won’t work.

Instead of using the IOptions class throughout the code, instead I set the private variable to just AppSettings and assign it in the constructor using the .Value property of the IOptions class.

By the way, the IOptions class is essentially a singleton. The instance we create during startup is the same throughout the lifetime of the application.

While this is a lot more setup than the old way of doing things, I think it forces developers to code in a cleaner and more modular way.



ASP.NET MVC 6 Hosting - HostForLIFE.eu :: How to Extend ASP.NET MVC AuthorizeAttribute?

clock January 12, 2017 07:28 by author Peter

Today, I will show you how to Extend ASP.NET MVC AuthorizeAttribute and how to Unit Test with ControllerActionInvoker. The reason for extending the AuthorizeAttribute class is that we might decide to store user credential information in a variety of differently data sources such as Active Directory, a database, an encrypted text file, etc…Or we might add custom logic to authorize a user.

OK, now we have set up our premises, let’s dive straight into the code for the subclass of AuthorizeAttribute:
    namespace SecurityDemo.Classes 
    { 
        [AttributeUsage(AttributeTargets.All, AllowMultiple = false, Inherited = true)] 
        public class CustomAuthorizeAttribute: AuthorizeAttribute 
        { 
            public override voidOnAuthorization(AuthorizationContextfilterContext) 
            { 
                if (!filterContext.HttpContext.User.Identity.IsAuthenticated) 
                //the user is not allowed to execute the Action. An Unauthorized result is raised. 
                filterContext.Result = newHttpUnauthorizedResult(); 
                var roles = GetAuthorizedRoles(); 
                stringwindowLoginName = filterContext.HttpContext.User.Identity.Name; 
                //windowLoginName and ADGroup is expected to have this format "ABC\\XYZ" 
                stringdomainName = windowLoginName.Contains(@ "\") ?windowLoginName.Substring(0, windowLoginName.IndexOf(@"\ 
                ", System.StringComparison.OrdinalIgnoreCase)) : windowLoginName; 
                windowLoginName = windowLoginName.Contains(@ "\") ? windowLoginName.Substring(windowLoginName.LastIndexOf(@ "\", System.StringComparison.OrdinalIgnoreCase) + 1): windowLoginName; boolisValidUser = false; 
                if (roles.Any(role => ADClass.IsUserInADGroup(windowLoginName, role.Substring(role.LastIndexOf(@ "\", System.StringComparison.OrdinalIgnoreCase) + 1), domainName))) //if window login belongs to AD group from config 
                { 
                    isValidUser = true; 
                } 
                elseif (roles.Any(role => windowLoginName.ToLower().Equals(role.Substring(role.LastIndexOf(@ "\", System.StringComparison.OrdinalIgnoreCase) + 1).ToLower()))) //if window login belongs to a user from config 
                { 
                    isValidUser = true; 
                } 
                if (isValidUser) 
                { 
                    return; 
                } 
                else 
                { 
                    HandleUnauthorizedRequest(filterContext); 
                } 
            } 
            protected override void HandleUnauthorizedRequest(AuthorizationContextfilterContext) 
            { 
                filterContext.Result = newViewResult 
                { 
                    ViewName = "~/Views/Shared/UnAuthorized.cshtml" 
                }; 
            } 
            //get list of authorized Active Directory groups and windows users from 
            // web.config 
            privateIEnumerable < string > GetAuthorizedRoles() 
            { 
                var appSettings = ConfigurationManager.AppSettings[this.Roles]; 
                if (string.IsNullOrEmpty(appSettings)) 
                { 
                    return new[] 
                    { 
                        "" 
                    }; 
                } 
                IEnumerable < string > rolesEnumerable = appSettings.Split(',').Select(s => s.Trim()); 
                return rolesEnumerable; 
            } 
        } 
    } 

 
In the sublassCustomAuthorizeAttribute above we override the OnAuthorization(Authorization Context filterContext) method and provide the logic to identify the windows login user, check the person against the list of authorized Active Directory groups and Windows users from web.config. We also override against the HandleUnauthorizedRequest(AuthorizationContextfilterContext) method to return a view for access denied. Of course, as mentioned, the authorization logic can be made as flexible and complex as possible according to specific business needs.

To use the extended attribute in a controller, we just apply to attribute to a method or class as in the below code snippet:
    public class ProductController: Controller 
    { 
        [CustomAuthorize(Roles = SystemRole.Administrators)] 
        public ActionResultIndex() 
        { 
            return View("Index"); 
        } 
        [CustomAuthorize(Roles = SystemRole.Administrators)] 
        public ActionResultDetails(int Id) 
        { 
            return View("Details"); 
        } 
    } 
    // a helper class to define roles 
    public class SystemRole 
    { 
        public const string Administrators = "Administrators"; 
        public cons tstring Sales = "Sales"; 
    } 

There we have it, we have come up with how to implement custom security as an attribute to be applied to a controller.

Unit Testing:
We can simply test our new security feature by launching the web application through the web browser after providing the access list in the web.config as mentioned in the beginning of the article. There is nothing wrong with that. However, if we need to get more fancy and methodical by doing some full unit testing using NUnit or Microsoft UnitTestFramework (which I’ll be using in this article) then there are a few challenges we’ll be facing. First is we’ll need to simulate a browser session with a full HttpContext with widows login, session, etc… and the way to do it is to use Mock object. The second challenge is how to invoke the action methods of a controller with our CustomAuthorizeAttribute applied. The way to do it is to extend a class calledControllerActionInvoker and override a method called InvokeActionResult(). Also if you need to invoke an action method with router parameters you also need to override the GetParameterValues() method as well. Well, one picture is worth a thousand words, so I present to you a “picture” of all the code (words) involved for the unit test:
    namespace UnitTestSecurityDemo 
    { 
        public class ActionInvokerExpecter < TResult > : ControllerActionInvokerwhereTResult: ActionResult 
        { 
            public boolIsUnAuthorized = false; 
            ///<summary> 
            /// override to get ViewName of controller in action 
            ///</summary> 
            ///<param name="controllerContext"></param> 
            ///<param name="actionResult"></param> 
            protected override voidInvokeActionResult(ControllerContextcontrollerContext, ActionResultactionResult) 
                { 
                    string viewName = ((System.Web.Mvc.ViewResult) actionResult).ViewName; 
                    IsUnAuthorized = viewName.ToLower().Contains("unauthorized"); 
                } 
                ///// <summary> 
                ///// override to get Routedata of controller in action 
                ///// </summary> 
                ///// <param name="controllerContext"></param> 
                ///// <param name="actionDescriptor"></param> 
                ///// <returns></returns> 
            protected overrideIDictionary < string, object > GetParameterValues(ControllerContextcontrollerContext, ActionDescriptoractionDescriptor) 
            { 
                return controllerContext.RouteData.Values; 
            } 
        } 
    } 
    namespace UnitTestSecurityDemo 
    { 
        [TestClass] 
        public class UnitTest1 
        { 
            [TestMethod] 
            public void TestIndexView() 
            { 
                var controller = new ProductController(); 
                MockAuthenticatedControllerContext(controller, @ "abc\jolndoe"); 
                ConfigurationManager.AppSettings.Set("Administrators", @ "abc\Group-ABC-App, abc\jolndoe1"); 
                ActionInvokerExpecter < ViewResult > a = newActionInvokerExpecter < ViewResult > (); 
                a.InvokeAction(controller.ControllerContext, "Index"); 
                Assert.IsTrue(a.IsUnAuthorized); 
            } 
            [TestMethod] 
            public void TestDetailsView() 
            { 
                //since the Details() action method of the controller has a router parameter, we need to pass 
                //router data in as below 
                var controller = newProductController(); 
                varrouteData = newRouteData(); 
                routeData.Values.Add("id", 3); 
                MockAuthenticatedControllerContextWithRouteData(controller, @ "abc\jolndoe", routeData); 
                ConfigurationManager.AppSettings.Set("Administrators", @ "abc\Group-ABC-App, abc\jolndoe"); 
                ActionInvokerExpecter < ViewResult > a = newActionInvokerExpecter < ViewResult > (); 
                a.InvokeAction(controller.ControllerContext, "Details"); 
                Assert.IsTrue(a.IsUnAuthorized); 
            } 
            private static void MockAuthenticatedControllerContext(ProductController controller, stringuserName) 
            { 
                HttpContextBasehttpContext = FakeAuthenticatedHttpContext(userName); 
                ControllerContext context = newControllerContext(newRequestContext(httpContext, newRouteData()), controller); 
                controller.ControllerContext = context; 
            } 
            private static void MockAuthenticatedControllerContextWithRouteData(ProductController controller, stringuserName, RouteDatarouteData) 
            { 
                HttpContextBasehttpContext = FakeAuthenticatedHttpContext(userName); 
                ControllerContext context = newControllerContext(newRequestContext(httpContext, routeData), controller); 
                controller.ControllerContext = context; 
            } 
            public static HttpContextBaseFakeAuthenticatedHttpContext(string username) 
            { 
                Mock < HttpContextBase > context = newMock < HttpContextBase > (); 
                Mock < HttpRequestBase > request = newMock < HttpRequestBase > (); 
                Mock < HttpResponseBase > response = newMock < HttpResponseBase > (); 
                Mock < HttpSessionStateBase > session = newMock < HttpSessionStateBase > (); 
                Mock < HttpServerUtilityBase > server = newMock < HttpServerUtilityBase > (); 
                Mock < IPrincipal > user = newMock < IPrincipal > (); 
                Mock < IIdentity > identity = newMock < IIdentity > (); 
                context.Setup(ctx => ctx.Request).Returns(request.Object); 
                context.Setup(ctx => ctx.Response).Returns(response.Object); 
                context.Setup(ctx => ctx.Session).Returns(session.Object); 
                context.Setup(ctx => ctx.Server).Returns(server.Object); 
                context.Setup(ctx => ctx.User).Returns(user.Object); 
                user.Setup(ctx => ctx.Identity).Returns(identity.Object); 
                identity.Setup(id => id.IsAuthenticated).Returns(true); 
                identity.Setup(id => id.Name).Returns(username); 
                returncontext.Object; 
            } 
        } 
    } 

HostForLIFE.eu ASP.NET MVC 6 Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.



European ASP.NET MVC 6 Hosting - HostForLIFE.eu :: Binding and Minification in SiteCore MVC

clock January 6, 2017 07:01 by author Scott

This is a quick blog post on how to implement bundling and minification in Sitecore MVC project.  During development phase, it is always good to have multiple Javascripts and CSS files for better readability and maintainability of code.  But multiple Javascripts and CSS files degrade the performance of production website and also increase the load time of webpages as it requires multiple HTTP requests from browser to server.  Bundling and minification reduce the size of Javascript and CSS files and bundle multiple files into a single file and make the site perform faster by making fewer HTTP requests. Below steps explain how to implement bundling and minification for Sitecore MVC project: 

1. Add Microsoft ASP.NET Web Optimization Framework to your solution from nuget or run the following command in the Package Manager Console to install Microsoft ASP.NET Web Optimization Framework.

PM> Install-Package Microsoft.AspNet.Web.Optimization

2. Create your CSS and Javascript bundles in “BundleConfig” class under App_Start folder and add reference of "System.Web.Optimization" namespace.

public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            //js bundling using wildcard character *
            bundles.Add(new ScriptBundle("~/bundles/js").Include("~/assets/js/*.js"));

            //css bundling using wildcard character *
            bundles.Add(new StyleBundle("~/bundles/css").Include("~/assets/css/*.css"));
        }
    }

3. Register bundle in the Application_Start method in the Global.asax file. If you are using Multi-site instance of Sitecore MVC then recommend way to implement bundling logic is by creating a new processor into the initialize pipeline. 

protected void Application_Start(object sender, EventArgs e)
        {
            BundleConfig.RegisterBundles(BundleTable.Bundles);
        }

We can override the value of the debug attribute in code by using EnableOptimizations property of the BundleTable class.

protected void Application_BeginRequest(object sender, EventArgs e)
        {
            EnableBundleOptimizations();
        }

        private void EnableBundleOptimizations()
        {
            string debugMode = Request.QueryString["debug"];
            if (!string.IsNullOrEmpty(debugMode) && string.Equals(debugMode, "true", StringComparison.InvariantCultureIgnoreCase))
            {
                BundleTable.EnableOptimizations = false;
            }
            else
            {
                BundleTable.EnableOptimizations = true;
            }
        }

Here in Application_BeginRequest method of Global.asax I am calling one custom method EnableBundleOptimizations() which sets the value of EnableOptimizations property to true or false based on value of querystring “debug”. Main idea behind this logic is that we can check/debug CSS or Javascript file on production by passing querystring parameter debug as true. 

5. Replace Javascripts and CSS references in layout or rendering view with below code:

@Styles.Render("~/bundles/css")
@Styles.Render("~/bundles/js")

6. In web.config set an ignore url prefix for your bundle so that Sitecore won’t try to resolve the URL to the bundle. Update setting IgnoreUrlPrefixes according to your bundle name:

<setting name="IgnoreUrlPrefixes" value="/sitecore/default.aspx|/trace.axd|/webresource.axd|/sitecore/shell/Controls/Rich Text Editor/Telerik.Web.UI.DialogHandler.aspx|/sitecore/shell/applications/content manager/telerik.web.ui.dialoghandler.aspx|/sitecore/shell/Controls/Rich Text Editor/Telerik.Web.UI.SpellCheckHandler.axd|/Telerik.Web.UI.WebResource.axd|/sitecore/admin/upgrade/|/layouts/testing|/bundles/js|/bundles/css"/>

7. Now compile your solution and verify that bundling and minification is enabled by checking view source of webpage.

Pass querystring as debug=true in url and now verify view source of webpage. Bundling and minification is not enabled. This enables us to debug Javascript and CSS files in production website. 



ASP.NET MVC 6 Hosting - HostForLIFE.eu :: Modal Popup In MVC Application

clock December 15, 2016 08:29 by author Peter

In this post we will implement modal pop up to display the detailed information of user after clicking on detail anchor. So this is the view on which we are going to apply modal popup.

View code
Enumerable<CodeFirst.Models.FriendsInfo> 
 
@{ 
    ViewBag.Title = "Index"; 

 
<h2>Index</h2> 
 
<p> 
    @Html.ActionLink("View All", "Index") 
 
    @using (Html.BeginForm("Search", "Home", FormMethod.Post)) 
    { 
        <table> 
            <tr> 
                <td> 
                    <input type="text" id="txtName" name="searchparam" placeholder="type here to search" /> 
                </td> 
                <td> 
                    <input type="submit" id="btnSubmit" value="Search" /> 
                </td> 
            </tr> 
        </table> 
    } 
 
</p> 
<table class="table"> 
    <tr> 
        <th> 
            @Html.DisplayNameFor(model => model.Name) 
        </th> 
        <th> 
            @Html.DisplayNameFor(model => model.Mobile) 
        </th> 
        <th> 
            @Html.DisplayNameFor(model => model.Address) 
        </th> 
        <th></th> 
    </tr> 
 
    @foreach (var item in Model) 
    { 
        <tr> 
            <td> 
                @Html.DisplayFor(modelItem => item.Name) 
            </td> 
            <td> 
                @Html.DisplayFor(modelItem => item.Mobile) 
            </td> 
            <td> 
                @Html.DisplayFor(modelItem => item.Address) 
            </td> 
            <td> 
                @*@Html.ActionLink("Edit", "Edit", new { id=item.Id }) | 
                    @Html.ActionLink("Details", "Details", new { id=item.Id }) | 
                    @Html.ActionLink("Delete", "Delete", new { id=item.Id })*@ 
 
                <a href="javascript:void(0);" class="anchorDetail"  data-id="@item.Id">Details</a> 
 
            </td> 
        </tr> 
    } 
 
</table>  

As we can see we have detail anchor, with class anchorDetail and with data-id, which will get the id of clicked anchor and show the corresponding data to modal (detail view) on screen.

We have an Action method Details(int id) which will return the partial view.
public ActionResult Details(int Id) 

    FriendsInfo frnds = new FriendsInfo(); 
    frnds = db.FriendsInfo.Find(Id); 
    return PartialView("_Details",frnds); 
 

Here we added a partial view for this purpose to show detail view when user click on detail anchor in the list.

View Code
@model CodeFirst.Models.FriendsInfo 
 
<div> 
   
    <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
        <h4 class="modal-title" id="myModalLabel">FriendsInfo</h4> 
    </div>                
                 
     
    <hr /> 
    <dl class="dl-horizontal"> 
        <dt> 
            @Html.DisplayNameFor(model => model.Name) 
        </dt> 
 
        <dd> 
            @Html.DisplayFor(model => model.Name) 
        </dd> 
 
        <dt> 
            @Html.DisplayNameFor(model => model.Mobile) 
        </dt> 
 
        <dd> 
            @Html.DisplayFor(model => model.Mobile) 
        </dd> 
 
        <dt> 
            @Html.DisplayNameFor(model => model.Address) 
        </dt> 
 
        <dd> 
            @Html.DisplayFor(model => model.Address) 
        </dd> 
 
    </dl> 
</div> 


We have a div for modal pop-up.

<div id='myModal' class='modal'> 
    <div class="modal-dialog"> 
        <div class="modal-content"> 
            <div id='myModalContent'></div> 
        </div> 
    </div>  
     
</div>  


Here is the script for showing modal (partial view) on above div when user click on detail anchor. Here we used Ajax call for this purpose.

Script
@section scripts 

    <script src="~/Scripts/jquery-1.10.2.min.js"></script> 
    <script src="~/Scripts/bootstrap.js"></script> 
    <script src="~/Scripts/bootstrap.min.js"></script> 
<script> 
    var TeamDetailPostBackURL = '/Home/Details'; 
    $(function () { 
        $(".anchorDetail").click(function () { 
            debugger; 
            var $buttonClicked = $(this); 
            var id = $buttonClicked.attr('data-id'); 
            var options = { "backdrop": "static", keyboard: true }; 
            $.ajax({ 
                type: "GET", 
                url: TeamDetailPostBackURL, 
                contentType: "application/json; charset=utf-8", 
                data: { "Id": id }, 
                datatype: "json", 
                success: function (data) { 
                    debugger; 
                    $('#myModalContent').html(data); 
                    $('#myModal').modal(options); 
                    $('#myModal').modal('show');                   
 
                }, 
                error: function () { 
                    alert("Dynamic content load failed."); 
                } 
            }); 
        }); 
        //$("#closebtn").on('click',function(){ 
        //    $('#myModal').modal('hide');   
 
        $("#closbtn").click(function () { 
            $('#myModal').modal('hide'); 
        });       
    }); 
    
</script> 
 

HostForLIFE.eu ASP.NET MVC 6 Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.



About HostForLIFE.eu

HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes.

We have offered the latest Windows 2012 Hosting, ASP.NET 4.5 Hosting, ASP.NET MVC 5 Hosting, and SQL 2014 Hosting.


Tag cloud

Sign in