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 > (); 
}



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.



HostForLIFE.eu Proudly Launches Umbraco 7.5.7 Hosting

clock January 27, 2017 08:03 by author Peter

HostForLIFE.eu, a leading Windows web hosting provider with innovative technology solutions and a dedicated professional services team, today announced the support for Umbraco 7.5.7 hosting plan due to high demand of Umbraco users in Europe. The company has managed to build a strong client base in a very short period of time. It is known for offering ultra-fast, fully-managed and secured services in the competitive market.

 

HostForLIFE.eu hosts its servers in top class data centers that is located in Amsterdam, (NL), London, (UK), Washington, D.C. (US), Paris, (France), Frankfurt, (Germany), Chennai, (India), Milan, (Italy), Toronto, (Canada) and São Paulo, (Brazil) to guarantee 99.9% network uptime. All data centers feature redundancies in network connectivity, power, HVAC, security and fire suppression. All hosting plans from HostForLIFE.eu include 24×7 support and 30 days money back guarantee. HostForLIFE Umbraco hosting plan starts from just as low as €3.49/month only and this plan has supported ASP.NET Core 1.1, ASP.NET MVC 5/6 and SQL Server 2012/2014/2016.

Umbraco is a fully-featured open source content management system with the flexibility to run anything from small campaign or brochure sites right through to complex applications for Fortune 500's and some of the largest media sites in the world. Umbraco is strongly supported by both an active and welcoming community of users around the world, and backed up by a rock-solid commercial organization providing professional support and tools. Umbraco can be used in its free, open-source format with the additional option of professional tools and support if required.

Umbraco release that exemplifies our mission to continue to make Umbraco a bit simpler every day. The other change is that there's now a "ValidatingRequest" event you can hook into. This event allows you to "massage" any of the requests to ImageProcessor to your own liking. So if you'd want to never allow any requests to change BackgroundColor, you can cancel that from the event. Similarly if you have a predefined set of crops that are allowed, you could make sure that no other crop sizes will be processed than those ones you have defined ahead of time.

Further information and the full range of features Umbraco 7.5.7 Hosting can be viewed here: http://hostforlife.eu/European-Umbraco-757-Hosting



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.



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.



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.



ASP.NET MVC 6 Hosting - HostForLIFE.eu :: Star Rating in MVC Using AngularUI

clock December 7, 2016 10:17 by author Peter

In this tutorial, i will show you how to make a Star Rating in MVC Using AngularUI. You may have seen in many websites, that they ask for feedback in the form of rating stars. No problem --  it very easy to implement. Just follow the below steps to create a StarRating system in your Web Application.

Implementing StarRating in MVC using AngularUI

Create a Web Application using the MVC template (Here, I am using Visual studio 2015).
It is better (Recommended) to implement an Application in Visual studio 2015 because VS2015 shows intelligence for Angular JS. This feature is not present in the previous versions.

And here is the final output:

 

1. Add Controller and View
Add a controller and name it (Here, I named it HomeController).
Create an Index Action method and add view to it.
Now, add the script ,given below, and reference file to an Index page.
    <script src="~/Scripts/angular.js"></script> 
        <script src="~/Scripts/angular-animate.js"></script> 
        <script src="~/Scripts/angular-ui/ui-bootstrap-tpls.js"></script> 
        <script src="~/Scripts/app.js"></script><!--This is application script we wrote--> 
        <link href="~/Content/bootstrap.css" rel="stylesheet" /> 


2. Add Angular Script file
Now, create another script file for Angular code to implement StarRating in the Application.
Replace the Java Script file, with the code, given below:
    angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']); 
    angular.module('ui.bootstrap.demo').controller('RatingDemoCtrl', function ($scope) { 
        //These are properties of the Rating object 
        $scope.rate = 7;    //gets or sets the rating value 
        $scope.max = 10;    //displays number of icons(stars) to show in UI 
        $scope.isReadonly = false;  //prevents the user interaction if set to true. 
        $scope.hoveringOver = function (value) { 
            $scope.overStar = value; 
            $scope.percent = 100 * (value / $scope.max); 
        }; 
        //Below are the rating states 
        //These are array of objects defining properties for all icons.  
        //In default template below 'stateOn&stateOff' properties are used to specify icon's class. 
        $scope.ratingStates = [ 
          { stateOn: 'glyphicon-ok-sign', stateOff: 'glyphicon-ok-circle' }, 
          { stateOn: 'glyphicon-star', stateOff: 'glyphicon-star-empty' }, 
          { stateOn: 'glyphicon-heart', stateOff: 'glyphicon-ban-circle' }, 
          { stateOn: 'glyphicon-heart' }, 
          { stateOff: 'glyphicon-off' } 
        ]; 
    }); 


3. Create UI
Replace and add the code, given below, in the Index.cshtml page.
    @{ 
        Layout = null; 
    } 
    <h2>Star Rating in Angualr UI</h2> 
    <!doctype html> 
    <html ng-app="ui.bootstrap.demo"> 
    <head>    
        <title>www.mitechdev.com</title> 
        <script src="~/Scripts/angular.js"></script> 
        <script src="~/Scripts/angular-animate.js"></script> 
        <script src="~/Scripts/angular-ui/ui-bootstrap-tpls.js"></script> 
        <script src="~/Scripts/app.js"></script><!--This is application script we wrote--> 
        <link href="~/Content/bootstrap.css" rel="stylesheet" /> 
    </head> 
    <body style="margin-left:30px;"> 
        <div ng-controller="RatingDemoCtrl"> 
            <!--Angular element that shows rating images--> 
            <uib-rating ng-model="rate" max="max" 
                        read-only="isReadonly"  
                        on-hover="hoveringOver(value)" 
                        on-leave="overStar = null" 
                        titles="['one','two','three']"  
                        aria-labelledby="default-rating"> 
            </uib-rating> 
            <!--span element shows the percentage of select--> 
            <span class="label" ng-class="{'label-warning': percent<30, 'label-info': percent>=30 && percent<70, 'label-success': percent>=70}" 
                  ng-show="overStar && !isReadonly">{{percent}}%</span> 
            <!--This element shows rating selected,Hovering and IS hovering or not(true/false)--> 
            <pre style="margin:15px 0;width:400px;">Rate: <b>{{rate}}</b> - Readonly is: <i>{{isReadonly}}</i> - Hovering over: <b>{{overStar || "none"}}</b></pre> 
            <!--button clears all the values in above <pre> tag--> 
            <button type="button" class="btn btn-sm btn-danger" ng-click="rate = 0" ng-disabled="isReadonly">Clear</button> 
            <!--this button toggles the selection of star rating--> 
            <button type="button" class="btn btn-sm btn-default" ng-click="isReadonly = ! isReadonly">Toggle Readonly</button> 
            <hr /> 
            <div>Mitechdev.com Application-2016</div> 
        </div> 
    </body> 

    </html>


Here, we need to talk about some expressions used in <uib-rating> tag.

  •     on-hover: This expression is called, when the user places the mouse at the particular icon. In the above code hoveringOver() is called.
  •     on-leave: This expression is called when the user leaves the mouse at the particular icon.
  •     titles: Using this expression, we can assign an array of the titles to each icon.

 

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.

   

 



HostForLIFE.eu Proudly Launches Visual Studio 2017 Hosting

clock December 2, 2016 07:22 by author Peter

European leading web hosting provider, HostForLIFE.eu announces the launch of Visual Studio 2017 Hosting

HostForLIFE.eu was established to cater to an underserved market in the hosting industry; web hosting for customers who want excellent service. HostForLIFE.eu - a cheap, constant uptime, excellent customer service, quality, and also reliable hosting provider in advanced Windows and ASP.NET technology. HostForLIFE.eu proudly announces the availability of the Visual Studio 2017 hosting in their entire servers environment.

The smallest install is just a few hundred megabytes, yet still contains basic code editing support for more than twenty languages along with source code control. Most users will want to install more, and so customer can add one or more 'workloads' that represent common frameworks, languages and platforms - covering everything from .NET desktop development to data science with R, Python and F#.

System administrators can now create an offline layout of Visual Studio that contains all of the content needed to install the product without requiring Internet access. To do so, run the bootstrapper executable associated with the product customer want to make available offline using the --layout [path] switch (e.g. vs_enterprise.exe --layout c:\mylayout). This will download the packages required to install offline. Optionally, customer can specify a locale code for the product languages customer want included (e.g. --lang en-us). If not specified, support for all localized languages will be downloaded.

HostForLIFE.eu hosts its servers in top class data centers that is located in Amsterdam (NL), London (UK), Paris (FR), Frankfurt(DE) and Seattle (US) to guarantee 99.9% network uptime. All data center feature redundancies in network connectivity, power, HVAC, security, and fire suppression. All hosting plans from HostForLIFE.eu include 24×7 support and 30 days money back guarantee. The customers can start hosting their Visual Studio 2017 site on their environment from as just low €3.00/month only.

HostForLIFE.eu is a popular online ASP.NET based hosting service provider catering to those people who face such issues. The company has managed to build a strong client base in a very short period of time. It is known for offering ultra-fast, fully-managed and secured services in the competitive market.

HostForLIFE.eu offers the latest European Visual Studio 2017 hosting installation to all their new and existing customers. The customers can simply deploy their Visual Studio 2017 website via their world-class Control Panel or conventional FTP tool. HostForLIFE.eu is happy to be offering the most up to date Microsoft services and always had a great appreciation for the products that Microsoft offers.

Further information and the full range of features Visual Studio 2017 Hosting can be viewed here http://hostforlife.eu/European-Visual-Studio-2017-Hosting



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