All About ASP.NET and ASP.NET Core 2 Hosting BLOG

Tutorial and Articles about ASP.NET and the latest ASP.NET Core

ASP.NET Hosting - ASPHostPortal.com :: Using select tag helper in ASP.NET MVC 6

clock October 11, 2016 20:12 by author Armend

Using select tag helper in ASP.NET MVC 6

Tag Helpers were introduced in ASP.NET MVC 6, and one the tag helper is Select tag helper. Select tag helper is used to generate dropdown list and it’s an alternative for Html.DropDownList. In this post, we will see how to use select tag helper and how to bind select tag helper to model data or enum values. Also read How to use image tag helper in ASP.NET Core MVC 1.0

How to use select tag helper in ASP.NET MVC 6?

Select tag helper uses asp-for which extracts the name of the specified model property into the rendered HTML. For example,

<select asp-for="TimeZone"></select>

Then your model should have a property defined “TimeZone”.

public class RegisterViewModel
{
    [Display(Name = "TimeZone")]
    public string TimeZone { get; set; }
}

But this will be a empty list without any option as we didn’t define any options for the select list. There are couple of ways to add options to select tag helper.

Define directly in Markup

You can directly define your options in markup.

<select asp-for="TimeZone">
   <option value="-12">(UTC-12:00)</option>
   <option value="-11">(UTC-11:00)</option>
</select>

And selected option will be marked as “selected” when the page will be rendered.

Define using a data source

It’s a most common scenario when you want to bind your select list options either from any database table or any server side list. In such case, asp-items tag helper attribute should be used.

<select asp-for="TimeZone" asp-items="ViewBag.TimeZoneList"></select>

Now, we need to put TimeZoneList in ViewBag. Let’s first create a List and add options to it.

public List<SelectListItem> TimeZoneList { get; private set; }
public RegisterViewModel()
{
     TimeZoneList = new List<SelectListItem>();
     TimeZoneList.Add(new SelectListItem
     {
         Text = "Select",
         Value = ""
     });
     foreach (TimeZoneInfo z in TimeZoneInfo.GetSystemTimeZones())
     {
          TimeZoneList.Add(new SelectListItem
          {
               Text = z.DisplayName,
               Value = z.Id
          });
     }
}

And from your controller, add the list to ViewBag.

// GET: /Account/Register
[HttpGet]
[AllowAnonymous]
public IActionResult Register()
{
    RegisterViewModel rs = new RegisterViewModel();
    ViewBag.TimeZoneList = rs.TimeZoneList;
    return View();
}

Bind enum values

You can also bind enum values to select list.

public List<SelectListItem> PriorityList { get; private set; }
public RegisterViewModel()
{
    PriorityList = new List<SelectListItem>();
    PriorityList.Add(new SelectListItem
    {
       Text = "Select",
       Value = ""
    });
    foreach (ePriority eVal in Enum.GetValues(typeof(ePriority)))
    {
      PriorityList.Add(new SelectListItem { Text = Enum.GetName(typeof(ePriority), eVal), Value = eVal.ToString() });
    }
}

You can also use a static function to bind the select list, instead of using ViewBag.

public static List<SelectItemList> GetTimeZoneList()
{
    List<SelectListItem> TimeZoneList = new List<SelectListItem>();
    TimeZoneList.Add(new SelectListItem
    {
       Text = "Select",
       Value = ""
    });
    foreach (TimeZoneInfo z in TimeZoneInfo.GetSystemTimeZones())
     {
          TimeZoneList.Add(new SelectListItem
          {
               Text = z.DisplayName,
               Value = z.Id
          });
     }
    return TimeZoneList;
}

As static functions can be accessed only via classname. So in our case, it would be RegisterViewModel.GetTimeZoneList()

<select asp-for="TimeZone"
   asp-items="RegisterViewModel.GetTimeZoneList()"></select>

Summary

In this post, I demonstrated how to use select tag helper and how to bind it using enum values as well as other data source. And that covers all the functionality provided by the select tag helper in MVC 6.

 

Best ASP.NET Hosting Recommendation

ASPHostPortal.com provides its customers with Plesk Panel, one of the most popular and stable control panels for Windows hosting, as free. You could also see the latest .NET framework, a crazy amount of functionality as well as Large disk space, bandwidth, MSSQL databases and more. All those give people the convenience to build up a powerful site in Windows server. ASPHostPortal.com offers ASP.NET hosting starts from $1/month only. They also guarantees 30 days money back and guarantee 99.9% uptime. If you need a reliable affordable ASP.NET Hosting, ASPHostPortal.com should be your best choice.



ASP.NET Hosting - ASPHostPortal.com :: Dependency Injection In ASP.NET Core

clock June 28, 2016 20:19 by author Armend

This article explains the dependency injection feature available out of the box in ASP.NET core (ASP.NET 5). It will also cover some of the basics of dependency injection so that everyone can get the most out this article.

What is dependency Injection

Dependency Injection is the process of “injecting” the “dependency” whenever the dependency is requested by a client, where the dependency may be another service which the client (requester) may have no means of knowing how to create.

As an analogy, imagine a person (client) going to office carrying his lunch cooked by himself. In this scenario, the person has a “dependency” on food. But he had to know how to cook his food. But honestly, not everyone (client) knows to cook, but people do need food (dependency). This is where restaurants play the role of dependency Injection. They can supply food (“inject dependency”) to the people (client) without the person (client) needing to know how to cook.

This is also called as Inversion of control. Since the control for creation of the service has been passed from the requester to another entity which takes care of creating the dependencies needed by a class to perform its tasks. The entity which takes care of creating these requested dependencies and injecting them automatically to the client is known as the DI (dependency Injection) container.

Dependency Injection in ASP.NET Core

Ok, enough said about what dependency injection is. I am sure most of you knew it. If not, this is a great feature to know and a great tool to add to your tool belt! Let us now look at how to implement dependency injection out of the box in ASP.NET core.
ASP.NET core applications can leverage built in framework support for implementing dependency injection. It has support for the following types of lifetimes for configured services (injected dependencies).

  •     Transient – A new instance of the service is created each time it is requested. It can be used for stateless and light weight services.
  •     Scoped – A single instance is created once per request.
  •     Singleton – Created only once the first time they are requested.

Now for some code!

Use case

Implement a UniqueKeyProvider service. For demonstrating the lifetimes, we will create three differently named interfaces (one for each type of lifetime) for UniqueKeyprovider, all inheriting from the same parent interface having a single property, UniqueKey.
Also, to further illustrate the scoped and singleton lifetime, we will create another service, SomeService, which will have a dependency on all the three different UniqueKeyProvider services (the three different lifetime services).

1. Service Interface definition

Please note the three differently named interfaces, one for demonstrating each type of lifetime. 

namespace DependencyInjectionASPNetCore.Services 
    { 
        public interface IUniqueKeyProvider 
        { 
            Guid UniqueKey 
            { 
                get; 
                set; 
            } 
        } 
        public interface ITransientUniqueKeyProvider: IUniqueKeyProvider 
        {} 
        public interface IScopedUniqueKeyProvider: IUniqueKeyProvider 
        {} 
        public interface ISingletonUniqueKeyProvider: IUniqueKeyProvider 
        {} 
    } 

2. Service Class definition

    namespace DependencyInjectionASPNetCore.Services 
    { 
        public class UniqueKeyProvider: ITransientUniqueKeyProvider, 
        ISingletonUniqueKeyProvider, 
        IScopedUniqueKeyProvider 
        { 
            public Guid UniqueKey 
            { 
                get; 
                set; 
            } 
            public UniqueKeyProvider(Guid uniqueKey) 
            { 
                UniqueKey = uniqueKey; 
            } 
        } 
    } 

3. Registering the services in the startup.cs

Now register your services in the startup.cs file. This is the step where you are actually configuring your dependency injection container. You are basically instructing your dependency injection container that if the user requests for the service, ITransientUniqueKeyProvider, then please provide with a transient scoped instance of UniqueKeyProviderclass and similarly for the other services.
You need to register your services in the ConfigureServices method in the startup.cs file. Please refer to the code below for registration,

   

    services.AddTransient<ITransientUniqueKeyProvider>(provider =>newUniqueKeyProvider(Guid.NewGuid())); 
    services.AddScoped<IScopedUniqueKeyProvider>(provider =>newUniqueKeyProvider(Guid.NewGuid())); 
    services.AddSingleton<ISingletonUniqueKeyProvider>(provider =>newUniqueKeyProvider(Guid.NewGuid())); 
    services.AddTransient<ISomeService, SomeService>();
 

Note that I am also registering another service, ISomeServicewhich I am just using for demo purposes for showing the nature of transient and singleton lifetime. Also note that SomeService implementation requires dependency on the three Unique Key providers, which will be injected through dependency injection.Implementation of ISomeservice provided below,

4. IsomeService and Someservice Implementation

    public class ISomeService 
    { 
        ITransientUniqueKeyProvider TransientUniquekeyProvider 
        { 
            get; 
            set; 
        } 
        IScopedUniqueKeyProvider ScopedUniquekeyProvider 
        { 
            get; 
            set; 
        } 
        ISingletonUniqueKeyProvider SingletonUniquekeyProvider 
        { 
            get; 
            set; 
        } 
    } 
    public class SomeService: ISomeService 
    { 
        public ITransientUniqueKeyProvider TransientUniquekeyProvider 
        { 
            get; 
            set; 
        } 
        public IScopedUniqueKeyProvider ScopedUniquekeyProvider 
        { 
            get; 
            set; 
        } 
        public ISingletonUniqueKeyProvider SingletonUniquekeyProvider 
        { 
            get; 
            set; 
        } 
        public SomeService(ITransientUniqueKeyProvider transientprovider, 
            IScopedUniqueKeyProvider scopedprovider, 
            ISingletonUniqueKeyProvider singletonprovider) 
        { 
            TransientUniquekeyProvider = transientprovider; 
            ScopedUniquekeyProvider = scopedprovider; 
            SingletonUniquekeyProvider = singletonprovider; 
        } 
    } 

Now it is time to wrap it all up and test it through a controller. I am using the Home controller’s Index action. Please refer to the below code from the controller and view.

5. Home Controller

    public class HomeController: Controller 
    {  
        private ITransientUniqueKeyProvider _transientUniquekeyProvider; 
        private IScopedUniqueKeyProvider _scopedUniquekeyProvider; 
        private ISingletonUniqueKeyProvider _singletonUniquekeyProvider; 
        private ISomeService _someserviceProvider; 
        public HomeController(ITransientUniqueKeyProvider transientprovider, 
            IScopedUniqueKeyProvider scopedprovider, 
            ISingletonUniqueKeyProvider singletonprovider, ISomeService someserviceprovider) 
        { 
            _transientUniquekeyProvider = transientprovider; 
            _scopedUniquekeyProvider = scopedprovider; 
            _singletonUniquekeyProvider = singletonprovider; 
            _someserviceProvider = someserviceprovider; 
        } 
        public IActionResult Index() 
        { 
            ViewBag.transientID = _transientUniquekeyProvider.UniqueKey; 
            ViewBag.scopedID = _scopedUniquekeyProvider.UniqueKey; 
            ViewBag.singletonID = _singletonUniquekeyProvider.UniqueKey; 
            ViewBag.someServiceProvider = _someserviceProvider; 
            return View(); 
        } 
    } 

Note the constructor which takes in the dependencies. So when the request comes to this page, the framework notes that it needs an implementation for these services. It checks the DI container and finds the registration, and based on that the valid instance is passed to the constructor. The same happens in case of the ISomeService dependency which the controller’s constructor needs.

6. Index View

In the view file, we are just displaying the values that we set in the view bag. Results provided in the next section.

<div style="margin-top:35px"> 
lt;pstyle="font-weight:bold;text-decoration:underline"> 
These are the values that were injected into the home controller 
</p> 
<p> 
    Transient value of Guid: @ViewBag.transientID 
</p> 
<p> 
    Scoped value of Guid: @ViewBag.scopedID 
</p> 
<p> 
    Singleton value of Guid: @ViewBag.singletonID 
</p> 
</div> 
 
<div> 
    <p style="font-weight:bold;text-decoration:underline"> 
 
        These are the values that were injected into Someservice Implementation 
        </p> 
        <p> 
            Transient value of Guid: @ViewBag.someServiceProvider.TransientUniquekeyProvider.UniqueKey 
        </p> 
        <p> 
            Scoped value of Guid: @ViewBag.someServiceProvider.ScopedUniquekeyProvider.UniqueKey 
        </p> 
        <p> 
            Singleton value of Guid: @ViewBag.someServiceProvider.SingletonUniquekeyProvider.UniqueKey 
        </p> 
</div>

I really hope it was useful and fun. Happy coding!

 



ASP.NET Core 1.0 Hosting - ASPHostPortal.com :: How to integrate those fancy modal image preview in ASP.NET

clock June 27, 2016 20:51 by author Dan

Today, in this post I will quickly show you " How to integrate those fancy modal image preview in ASP.NET ".
Magic library for this functionality is mighty FancyBox the "tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages. It is built at the top of the popular JavaScript framework jQuery and is both easy to implement and a snap to customize."

Let's see how things are working....

  1. We create web site project inside our VS 2012.
  2. Include into project jQuery in this sample I use latest version 1.7.2.
  3. Also we need to include FancyBox. (It would be very strange to not include it in this sample)

So, our project look's like:

Here you can see our included files inside project, also you can see our test page html and jQuery code.
Most important thing here is that you use class="fancybox" as image control css class.

jQuery code is very very simple as you can see here:

       $(document).ready(function () {
            $(".fancybox").fancybox();
        });


There are more cases in how to use fancybox that you can check at FancyBox.

Effect that we managed to create looks like this:

When we click on image we get this.

So, long, folks!

Best ASP.NET Core 1.0 Hosting Recommendation

ASPHostPortal.com provides its customers with Plesk Panel, one of the most popular and stable control panels for Windows hosting, as free. You could also see the latest .NET framework, a crazy amount of functionality as well as Large disk space, bandwidth, MSSQL databases and more. All those give people the convenience to build up a powerful site in Windows server. ASPHostPortal.com offers ASP.NET hosting starts from $1/month only. They also guarantees 30 days money back and guarantee 99.9% uptime. If you need a reliable affordable ASP.NET Hosting, ASPHostPortal.com should be your best choice.



ASP.NET Core 1.0 Hosting - ASPHostPortal.com :: 7 Advantages When Using JQuery in ASP.NET

clock June 17, 2016 22:52 by author Dan

These days there are plenty of options available in case of frameworks as well as programs for the creation of webpages. One program that helps in easy scripting as well as programming is ASP.NET; jQuery gives great benefit to the program. The open source light weight JavaScript library called jQuery is a fantastic option for easy and fast HTML DOM manipulation as well as traversing, client side animations as well as scripting, event handling, etc. It also helps in easy integration of your SharePoint and ASP.Net applications. The combination of both the programs is quite intriguing which helps you create server-side dynamic websites very easily.

You can use both together very easily. Microsoft programs in fact, are bundled with jQuery so that it may be used with ASP.Net. Visual Studio is one such program which acts as the key for the creation of web pages along with coding in several languages through intellisense. In case, there is no integration between the two you simply have to download the recent jQuery library which is easily available from jQuery.com; then copy or unzip the file in the website project's root directory.

Advantages

More functionality with less writing - A huge benefit offered by this is that very less code is needed for performing of several complicated client side operations by virtue of several chaining mechanisms, selector expressions support along with other familiar features that make it easier to conduct complex DOM manipulation. The chaining mechanism helps in code reduction.

Easy, fast and lightweight -
From point of size the library is only 20KB in compressed form which makes it light, as such the execution time is less as well. When using the platform, the sheer simplicity can be easily understood. When compared to the normal JavaScript code, the development time is quite less. There are also no security risks associated; it may be included in the project simply like any JavaScript file.

Different codes than HTML mark ups - Client side scripts can be easily separated from HTML mark ups by virtue of the library. The program's $(document).ready() function enables this function. When the library is being used, the HTML code can be made neat with the combination of any JavaScript code. In fact the code can even be separated into separate file to link it to aspx page.

Cross browser compatibility -
The code is compatible with every browser which prevents any necessity for writing individual client side code meant for various browsers. When using the program to maintain cross browser compatibility, the css properties should be set so that they are compatible accordingly.

Presence of several plug-ins - The internet has several plug-ins freely available for use in the projects. There is a huge directory of plug-ins which accounts for the high jQuery usage which is growing each day. In fact, many of the available plug-ins may be re-used.

Lightweight and easy Ajax application -
A huge advantage of using the library lies in the development of light weight Ajax application with JSON support in ASP.Net. The library helps in prevention of bulky UpdatePanel control meant for Ajax communications.

Use of Content Distribution Network for internet sites - For the sites which are hosted on internet, the using of library hosted by Google CDN becomes easy. Major open source widely used JavaScript libraries are used globally across sites by virtue of the network. This helps in the management of recent updates, bug fixes as well as provision of high speed access for better caching.

Other advantages are easy integration between jQuery and ASP.NET Ajax projects and extension of existing functionality. In fact, the benefits do not simply stop with those mentioned here. When the platform is actually used, then only you will be able to understand a lot more points. There are no security risks associated with the usage which gives yet another benefit to the developers.

You can hire developers from top asp.net application development companies in India who can help you build web applications according to your ideas within allocated budget and time schedules.

Best ASP.NET Core 1.0 Hosting Recommendation

ASPHostPortal.com provides its customers with Plesk Panel, one of the most popular and stable control panels for Windows hosting, as free. You could also see the latest .NET framework, a crazy amount of functionality as well as Large disk space, bandwidth, MSSQL databases and more. All those give people the convenience to build up a powerful site in Windows server. ASPHostPortal.com offers ASP.NET hosting starts from $1/month only. They also guarantees 30 days money back and guarantee 99.9% uptime. If you need a reliable affordable ASP.NET Hosting, ASPHostPortal.com should be your best choice.



ASP.NET Hosting - ASPHostPortal.com :: How to Publishing an ASP.NET 5 Project to a Local IIS Server

clock June 16, 2016 17:45 by author Armend

In this post we will show you how to publishing an ASP.NET 5 project to a local IIS server. Recently I deployed a new ASP.NET 5 web application to a local IIS server. Though there are several online resources available about deployment, I encountered some problems that were difficult to diagnose and fix. In this post I will talk about the general deployment process and the steps I followed for a successful deployment.

ASP.NET 5 applications are meant to be cross-platform. Included in this cross-platform effort is the development of a new, cross-platform web server, named Kestrel. The Kestrel web server can be activated from the command line and can be used on any operating system.
Of course, ASP.NET 5 applications can still be hosted in IIS. But even in this case, the underlying web server will still be Kestrel. The role of IIS is greatly minimized.
In this post we will be deploying a web application using Kestrel as a web host first. Afterwards, we will be deploying to IIS.

Deployment to Kestrel

Let's say that we have an existing ASP.NET 5 application. We can publish the application from the command line. First, navigate to the root web folder of the application (the folder where the project.json file is in). Then, type in the following command:

dnu publish --runtime active -o ..\publish

What this will do is create a new folder named 'publish' alongside the root web folder. Inside this 'publish' folder , there will be three subfolders: 'approot', 'logs', and 'wwwroot'. The 'approot' folder will contain the source files and packages needed by the application. The 'logs' folder will contain any logs that the application emits. The 'wwwroot' folder will contain javascript, html, css files, etc. as well as the web.config file.
Now we can start the Kestrel web server. First, navigate to the 'approot' folder. There will be a file named web.cmd. Start it by typing 'web' from the command line or double-clicking on it from a windows explorer window.

You might notice that a lot of text appears on the command line as soon as the command is run. This is especially true when there are Entity Framework migrations involved. Among the sea of text, the URL of the localhost web server will be displayed, and will look something like this:

Hosting Environment: Production
Now listening on: http://localhost:5000
Application started. Press Ctrl+C to shut down.

Once we find this text, we can just navigate to the appropriate URL using a browser. There we should see the web app up and running.
Congratulations, we have just deployed our ASP.NET 5 web application!
Deployment to IIS
Once we successfully launch the app through Kestrel, we can go for deploying in IIS. We need to do a few things for it to work properly.

  • Use an application pool with No Managed Code as the .NET CLR Version.
  • Create a Login in SQL Server with the login name as IIS APPPOOL\{apppoolname}. This Login should have access to whatever database the web application will use.
  • Create access rights to the 'wwwroot' folder for the user group IIS_IUSRS.

In addition, if we are going to put the application inside IIS Default Web Site and use a virtual directory, we need to modify the Startup.cs to handle this.
The first step is to rename the Configure method to something else, for example Configure1.
Then, we need to create a new Configure method. This would have the same signature as the original Configure method. The implementation would look something like this:

public async void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
    app.Map("/virtualdirectoryname", (app1) => this.Configure1(app1, env, loggerFactory));
}

So we see that this new Configure method just calls the Configure1 method, taking into account the virtual directory name.
Once all of these are in place, we can go ahead and deploy to IIS using the usual process. We can add a new application in IIS Default Web Site and use the application pool we created earlier (using No Managed Code). The physical path should point to the 'wwwroot' location. The alias should be the same as the one we put in the Configure method in Startup.cs.
Afterwards, just browse to the website and it should all be good!

Conclusion

Although the concept of deployment stayed the same, the process and tools involved for deploying ASP.NET 5 applications has changed. In this post we took a look at how to deploy to the Kestrel web server, then later to IIS. Though it might seem like a long process, most of the steps should only be performed the first time around. Subsequent deployments should be faster and more straightforward.



ASP.NET Hosting - ASPHostPortal.com :: 9 Mistakes to be Avoided by .NET Developer

clock June 6, 2016 23:50 by author Dan

Admit it! We all make mistakes. None of our codes starts working at strike one. We make typos, forget signing off or, as it happens with most of us, overlook the testing phase, especially when it comes to ASP.net development. To err is human. So, making mistakes is just another human phenomenon. What counts is how you tackle your errors and how you devise ways to avoid them in the ventures to come. Here's a compilation of some of the most common testing mistakes that developers often commit while catering to outsource .Net development needs. Let's take a look.

XSS Security Issues: The look and feel of your UI and of course, its maintenance lies in your hands. Ensure that all user-input fields are well-customized so that no JavaScript or HTML that a user enters can rummage your web page.

Universal Localization: As a usual norm, as you begin developing a new feature, you keep all the text in hard code as there are probabilities of certain changes during the course of development. As soon as the project team approves the feature, you localize the text. However, at times you tend to forget localizations of the entire text. You remember to hard code, but when it comes to localization you tend to sign off without doing the same. Probably this checklist reminds us to localize before we sign off the next time.

.Net Behaves Well with IE 6 and 7 and Firefox: Test leads often report of cross-browser compatibility issues that crop up from time to time. Most of these issues usually encompass small twigs like usual IE 6 issues or minor problems relating to positioning of elements. We are dedicatedly focusing on IE version 6 and 7 and Mozilla Firefox for two reasons. Firstly, if your web page works well in these three browsers, it will function well on Opera and Safari as well. Secondly, over 98% of the visitors access your site through these browsers.

Reuse Code as and when required: This law is applicable across all programming platforms and ASP.Net is no exception. Separate server and user-control elements enable specialization of code so that it can be used at other places as well.

Commenting on the Code: There are no two-ways to this. Always document your code well and comment upon the right places, so that it is easier for other developers to pick up from where you left.

Extended Text doesn't Mean Broken Design: As a matter of fact, names usually don't extend beyond 50 characters, but what if some user inputs a name containing 300 or even more characters. Obviously, in that case the UI will be disrupted. In this case you have two options- either codes your interface to accept long text inputs or put a limit on the length of text users can input.

Write Units When Possible: Unit testing for your website can be a tedious job especially if you are not using ASP.Net MVC framework for the same. However, pulling the code-behind logic into different components that can be placed in the library can enable you to test the units. Instead of dealing with HttpHandlers using .ashx files, placing them in separate libraries is a good option.

Peer Verification before Testing: Before signing off any newly added feature and sending it across to the test team, you usually pass it through peer verification. As the name suggests, in peer verification, one of your colleagues tests the application feature you have just developed and tries to find flaws in it. This allows you to identify errors easily and also simplifies the process for the testing team. When schedules are really tight, we often forget to ask for peer verification and it definitely shows at the end.

Expected functioning of Enter-key: When you are using webforms in ASP.Net, the enter-key often starts functioning weirdly. In this case, you can either set default buttons on the Panel webcontrol or from code-behind.

Best ASP.NET Hosting Recommendation

ASPHostPortal.com provides its customers with Plesk Panel, one of the most popular and stable control panels for Windows hosting, as free. You could also see the latest .NET framework, a crazy amount of functionality as well as Large disk space, bandwidth, MSSQL databases and more. All those give people the convenience to build up a powerful site in Windows server. ASPHostPortal.com offers ASP.NET hosting starts from $1/month only. They also guarantees 30 days money back and guarantee 99.9% uptime. If you need a reliable affordable ASP.NET Hosting, ASPHostPortal.com should be your best choice.



ASP.NET 5 Hosting - ASPHostPortal :: SEO For ASP.NET Web Sites

clock December 16, 2015 00:36 by author Kenny

SEO For ASP.NET Web Sites

One of the main sources of audience for these internet applications are the Search Engines like Google, Bing, Yahoo etc. Hence, the end application should not only handle your business problems efficiently but also follow some simple rules so that it yields good results in internet arena. This article, will list some of the simple guidelines which you need to consider if your Asp.Net application is an internet site.

1.    Add descriptive and unique Page Title for every page

Every page in your website should have a unique and descriptive page title that can describe what the page offers. You can set the Page Title either declaratively or in the code behind file. Refer below,

In ASPX,

<%@ Page Language="C#" AutoEventWireup="true" Title="My Home Page"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

In code behind,

Page.Title = "My Home Page";

2.    Links should be hyperlinks, no linkbutton or javascript navigation for crawlable links

Make sure all your links in your page are hyperlinks. Search engines can crawl a page only if it is linked through a hyper link (anchor tag). Javascript navigations are not search engine friendly since search engines will not understand it.

3.    Use javascript navigation for site related pages that have no search values

Page rank is distributed across the links on your page. Some of the internal website pages like About us, disclaimer, Registration, login, contact us, user profile pages can be navigated through javascript so that the page rank are not distributed to them. Doing like this will make rest of the crawlable content links benefited.

4.    Add Meta Keyword and Description tag for every page

Add Meta keyword and Meta description tag with relevant contents. Search engines will use these tags to understand what the page offers. You can dynamically set the meta tags from codebehind file using the below code,

HtmlHead head = (HtmlHead)Page.Header;

 HtmlMeta metasearch1 = new HtmlMeta();

 HtmlMeta metasearch2 = new HtmlMeta();  

 metasearch1.Name = "descriptions";

 metasearch1.Content = "my personal site";

 head.Controls.Add(metasearch1);

 metasearch2.Name = "keywords";

 metasearch2.Content = "ASP.Net,C#,SQL";

 head.Controls.Add(metasearch2);

The above code will add the below Meta tags to output html.

<meta name="descriptions" content="my personal site" />

<meta name="keywords" content="ASP.Net,C#,SQL" />

In ASP.Net 4.0, Microsoft added 2 new properties on the Page directive (Page object) that lets you to define the Meta keywords and Description declaratively and dynamically from codebehind.

In ASPX,

<%@ Page Language="C#" AutoEventWireup="true" MetaKeywords="asp.net,C#" MetaDescription="This is an asp.net site that hosts asp.net tutorials" CodeFile="Default.aspx.cs" Inherits="_Default" %>

In codebehind,

protected void Page_Load(object sender, EventArgs e)

    {

        Page.MetaKeywords = "asp.net,C#";

        Page.MetaDescription = "This is an asp.net site that hosts asp.net tutorials.";

    }

The similar can thing can be achieved in previous versions of .Net Framework by using a custom BasePage class.

5.    Make descriptive urls

Make your website URL descriptive. URL’s that has lots of query string values, numeric ids are not descriptive. It will provide enough information what the page offers. For example, http://www.example.com/products.aspx?catid=C91E9918-BEC3-4DAA-A54B-0EC7E874245E is not descriptive as http://www.example.com/Windows-Hosting

Apart from other parameters, search engines will also consider the website url to match your page for a searched keyword.



ASP.NET Hosting - ASPHostPortal.com : How to Migrating From ASP.NET Web API 2 to MVC 6

clock October 13, 2015 08:54 by author Kenny

How to Migrating From ASP.NET Web API 2 to MVC 6

If you create a new MVC 6 project from the default starter template, it will contain the following code in the Startup class, under ConfigureServices method:

 // Uncomment the following line to add Web API servcies which makes it easier to port Web API 2 controllers.
 // You need to add Microsoft.AspNet.Mvc.WebApiCompatShim package to project.json
 // services.AddWebApiConventions();

This pretty much explains it all – the Compatibility Shim is included in an external package, Microsoft.AspNet.Mvc.WebApiCompatShim and by default is switched off for new MVC projects. Once added and enabled, you can also have a look at the UseMvc method, under Configure. This is where central Web API routes can be defined:

      app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller}/{action}/{id?}",
                defaults: new { controller = "Home", action = "Index" });
            // Uncomment the following line to add a route for porting Web API 2 controllers.
            // routes.MapWebApiRoute("DefaultApi", "api/{controller}/{id?}");
        });

Inheriting from ApiController

Since the base class for Web API controllers was not Controller but ApiController, the shim introduces a type of the same name into MVC 6.

While it is obviously not 100% identical to the ApiController from Web API, it contains the majority of public proeprties and methods that you might have gotten used to – the Request property, the User property or a bunch of IHttpActionResult helpers.

Returning HttpResponseMessage

The shim introduces the ability to work with HttpResponseMessage in MVC 6 projects. How is this achieved? First of all, the Microsoft.AspNet.WebApi.Client package is referenced, and that brings in the familiar types – HttpResponseMessage and HttpRequestMessage.

On top of that, an extra formatter is injected into your application – HttpResponseMessageOutputFormatter. This allows you to return HttpResponseMessage from your actions, just like you were used to doing in Web API projects!

How does it work under the hood? Remember, in Web API, returning an instance of HttpResponseMessage bypassed content negotiation and simply forwarded the instance all the way to the hosting layer, which was responsible to convert it to a response that was relevant for a given host.

In the case of MVC 6, the new formatter will grab your HttpResponseMessage and copy its headers and contents onto the Microsoft.AspNet.Http.HttpResponse which is the new abstraction for HTTP response in ASP.NET 5.

As a result such type of an action as the one shown below, is possible in MVC 6, and as a consequence it should be much simpler to migrate your Web API 2 projects.

public HttpResponseMessage Post()
{
    return new HttpResponseMessage(HttpSattusCode.NoContent);
}

Binding HttpRequestMessage

In Web API it was possible to bind HttpRequestMessage in your actions. For example this was easily doable:

    [Route("test/{id:int}")]
    public string Get(int id, HttpRequestMessage req)
    {
        return id + " " + req.RequestUri;
    }
    [Route("testA")]
    public async Task<TestItem> Post(HttpRequestMessage req)
    {
        return await req.Content.ReadAsAsync<TestItem>();
    }

The shim introduces an HttpRequestMessageModelBinder which allows the same thing to be done under MVC 6. As a result, if you relied on HttpRequestMessage binding in Web API, your code will migrate to MVC 6 fine.

How does it work? The shim will use an intermediary type, HttpRequestMessageFeature, to create an instance of HttpRequestMessage from the ASP.NET 5 HttpContext.

HttpRequestMessage extensions

Since it was very common in the Web API world to use HttpResponseMessage as an action return type, there was a need for a mechanism that allowed easy creation of its instances. This was typically achieved by using the extension methods on the HttpRequestMessage, as they would perform content negotiation for you.

HttpError

If you use/used the CreateErrorResponse method mentioned above, you will end up relying on the HttpError class which is another ghost of the Web API past rejuvenated by the compatibility shim.

HttpError was traditionally used by Web API to serve up error information to the client in a (kind of) standardized way. It contained properties such as ModelState, MessageDetail or StackTrace.

It was used by not just the CreateErrorResponse extension method but also by a bunch of IHttpActionResults – InvalidModelStateResult, ExceptionResult and BadRequestErrorMessageResult. As a result, HttpError is back to facilitate all of these types.

Best ASP.NET 4.6 Hosting Recommendation

ASPHostPortal.com provides its customers with Plesk Panel, one of the most popular and stable control panels for Windows hosting, as free. You could also see the latest .NET framework, a crazy amount of functionality as well as Large disk space, bandwidth, MSSQL databases and more. All those give people the convenience to build up a powerful site in Windows server. ASPHostPortal.com offers ASP.NET hosting starts from $1/month only. They also guarantees 30 days money back and guarantee 99.9% uptime. If you need a reliable affordable ASP.NET Hosting, ASPHostPortal.com should be your best choice.



ASP.NET Hosting - ASPHostPortal.com :: How to Check Duplicate User Names In ASP.NET Web Pages Sites

clock October 5, 2015 11:39 by author Kenny

How to Check Duplicate User Names In ASP.NET Web Pages Sites

The Web Pages Starter Site template provides a useful starting point for developing a Razor Web Pages site that includes membership. But it doesn't include any mechanism for preventing duplicate user names. This article offers one solution to the problem that uses jQuery.

If you ask how to prevent duplicate user names in forums, one of the suggestions that is often put forward is to apply a unique constraint in the database column that holds the user name. Any attempt to submit a duplicate value will result in an exception being raised in the relevant database provider. You can catch this exception and show the user an appropriate message. This works but it's a fairly clunky solution. And many people feel that you should not use exceptions as a means to manage your business rules.

The solution featured in this article uses AJAX to query the database and to give the user immediate feedback when they enter their chosen user name. The AJAX call requests a page that exists purely to query the database to see if the selected user name is already in use. The solution also includes a server side chekc to ensure that users who have disabled JavaScript so not slip through the net. The solution requires a couple of amendments to the Register.cshtml file in the Starter Site, and the addition of 3 files. But first, the changes to the Register.cshtml page. The first change is in the inclusion of a JavaScript file called dupecheck.js.

@* Remove this section if you are using bundling *@
@section Scripts {
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
    <script src="~/Scripts/dupecheck.js"></script>
}

And the second is the server side check to see if the username is in use:

if(Functions.IsDuplicate(email)){
    ModelState.AddError("email", "User name is already taken");
}

I placed this in the if(IsPost) section just after the initial variables that represent the submitted values (email, password and confirmPassword) are declared. The code calls a function named IsDuplicate. The function is declared in a file called Functions.cshtml which is placed in a folder called App_Code:

@functions {
    public static bool IsDuplicate(string username){
        var db = Database.Open("StarterSite");
        var commandText = @"SELECT COUNT(Email) FROM UserProfile WHERE Email = @0";
        return (int)db.QueryValue(commandText, username) > 0;
    }
}

Note that the name of the folder is important. The function returns a bool. The value of the bool is determined as a result if the SQL query which gets a count of the rows containing the provided user name. By default, the Starter Site uses a column called Email in the UserProfile table for the storage of user names. This function is also called in a separate file named DupeCheck.cshtml. This file is placed in the root of the site:

@{
    Layout = null;
    if(IsAjax){
        var username = Request["username"];
        var result = Functions.IsDuplicate(username);
        Json.Write(new { isDupe = result }, Response.Output);
    }
}

DupeCheck.cshtml is designed to work exclusively with AJAX. The code includes an instruction to nullify any layout pages that might have been set in a _PageStart file, and then it uses the IsAjax property to determine if the page has been requested via an AJAX call. If it has, it uses the IsDuplicate method to check the availability of the posted username and returns the result to the calling code. The result is an anonymous type that has one propery: isDupe, which is a boolean. The anonymous type is serialised to JSON by the Json helper.

The final part of the solution is the dupecheck.js file. This uses jQuery:

$(function () {
    $('#email').change(function () {
        $.post(
            '/DupeCheck',
            { username: $(this).val() },
            function (data) {
                var emailValidation = $('span[data-valmsg-for="email"]');
                if (data.isDupe) {
                    if (emailValidation.hasClass('field-validation-valid')) {
                        emailValidation.removeClass('field-validation-valid');
                        emailValidation.addClass('field-validation-error');
                        emailValidation.text('That name is already taken!');
                    }
                } else {
                    if (emailValidation.hasClass('field-validation-error')) {
                        emailValidation.removeClass('field-validation-error');
                        emailValidation.addClass('field-validation-valid');
                        emailValidation.text('');
                    }
                }
            },'json'
        );
    });
});

An event handler is attached to the change event of the user name input (which has an id if email in the Starter Site). The current value is posted to the DupeCheck.cshtml page via AJAX. The code above checks the response from the server to see if the value is a duplicate, and if it is, an appropriate error message is displayed to the user.

Best ASP.NET 4.6 Hosting Recommendation

ASPHostPortal.com provides its customers with Plesk Panel, one of the most popular and stable control panels for Windows hosting, as free. You could also see the latest .NET framework, a crazy amount of functionality as well as Large disk space, bandwidth, MSSQL databases and more. All those give people the convenience to build up a powerful site in Windows server. ASPHostPortal.com offers ASP.NET hosting starts from $1/month only. They also guarantees 30 days money back and guarantee 99.9% uptime. If you need a reliable affordable ASP.NET Hosting, ASPHostPortal.com should be your best choice.



ASP.NET Hosting - ASPHostPortal.com :: Easy to Design Pie Chart and Donut Chart in ASP.NET

clock September 28, 2015 12:40 by author Kenny

Easy to Design Pie Chart and Donut Chart in ASP.NET

D3.js stands for Data-Driven Document. It is a JavaScript library using which we can manipulate documents based on data. The data can be fetched using multiple ways like Web Services, WCF Services, REST APIs or the relatively new Microsoft ASP.NET Web API amongst many others. Using D3, you can bind the data to the Document Object Model (DOM) and present that data with rich visualizations. D3 internally makes use of CSS, HTML and SVG capabilities to make your data presentable. It is powerful, fast and supports large datasets and dynamic behaviors for interactions and powerful and smooth animations.

D3.js provides easy and declarative selections of DOM nodes using W3C Selector APIs. D3 Selector APIs provides number of methods to manipulate nodes. For example –

  • Setting attributes and applying rich styles
  • Registering Event Listeners
  • You can add, remove and sort DOM nodes
  • You can change the HTML or the text contents of HTML elements
  • You can also have a direct selection/access to the DOM as each selection is an array of nodes

Likewise, we have various features of D3.js selectors which we can use to present data to our DOM nodes.

A simple selector example is the following:

var bodySelection = d3.select('body').style('background-color', 'blue');

In the above example, we are selecting body and changing its background color to blue. Another example would be as follows:

var divSelection = d3.selectAll('div').style('background-color', 'yellow');

In the above example, we are selecting all divs and changing its background color to yellow. If you are familiar with jQuery, the syntax looks similar to jQuery selectors or HTML5 Selectors.

D3 allows us to bind the data to the DOM elements and their attributes using a Data method which takes an array. For example:

d3.selectAll("div")
  .data([200,300,400,100])
  .style("height", function (data) { return data + "px"; });

In the above example, we are selecting all the div’s on the page and based on the index, the first value of an array will be passed to first div, second value to second div and so on.

In D3, you can also make use of Enter and Exit selector methods to create new nodes for incoming data, and remove outing nodes that are no longer used.

You can also apply transitions to nodes using D3. For example –

var area = d3.select('body')
            .append('svg')
            .attr('width', 500)
            .attr('height', 500);
 
var circle = area.append('rect')
                 .attr('width', 100)
                 .attr('height', 100)
                 .attr('fill', 'red');
 
circle.transition()
      .duration(2000)
      .delay(2000)
      .attr('width', 400)
      .each('start', function () {
            d3.select(this).attr('fill', 'green');})
      .transition()
      .duration(2000)
      .attr('height', 400)
      .transition()
      .duration(2000)
      .attr('width', 50)
      .transition()
      .duration(2000)
      .attr('height', 50)
      .each('end', function () {
            d3.select(this).attr('fill', 'blue'); });

In the above example, we are drawing a Rectangle and applying the transition to the same. Likewise, we can make use of various features of D3.js to present our data using rich visualizations.

A Quick overview of ASP.NET Web API

REST(REpresentational State Transfer) has emerged as the prominent way to create web services. By using REST we can build loose coupled services with data available on the web over HTTP protocol.

ASP.NET Web API is a platform for building RESTful applications. ASP.NET Web API is a framework using which we can build HTTP Services which can be called from a broad range of clients, browsers and mobile devices. ASP.NET Web API is the defacto standard of creating web services and replaces WCF.

When we think about exposing data on the web, we usually talk about four common operations which we use on a daily basis in our apps – CREATE, RETRIVE, UPDATE, DELETE.

We call these operations as CRUD operations. REST provides 4 basic HTTP verbs which we can map to our CRUD operations as described here - POST – CREATE, GET – RETRIVE, PUT – UPDATE, DELETE – DELETE.

By using REST, if you can connect to the web, any application can consume your data. When the data is pulled or pushed by using REST, the data is always serialized into or de-serialized from JSON or XML.

Setting up the application and ASP.NET Web API

To start designing the Pie chart and Donut chart, use the following tools and technologies:

  • Microsoft Visual Studio 2013 (Express or Professional)
  • Microsoft SQL Server 2012 (Express or Developer)
  • jQuery
  • D3.js
  • ASP.NET WEB API

Let’s first design the table where we can add our data. To design the table, open SQL Server Management Studio and write the following script:

CREATE TABLE [dbo].[CityPopulationTable](
    [CityID] [int] IDENTITY PRIMARY KEY,
    [CityName] [nvarchar](30) NULL,
    [Population] [int] NULL
)

Create an ASP.NET Web application by choosing Web Forms template. Then add the Entity Framework, jQuery and D3.js libraries into our web application using NuGet.

Once you add these libraries, right click on the Models folder in our Web application under Solution Explorer, and click on Add New Item. Choose Data  > ADO.NET Entity Data Model.

Using Entity Data Model Wizard, connect to our database and choose CityPopulationTable.

It’s time to implement the ASP.NET Web API into our project. Right click the web application and add a new folder with the name Controllers.

After adding the Web API, open Global.asax file and import two namespaces as shown here:

using System.Web.Http;
using System.Web.Routing;

Also add the following code to the Application_Start method –

GlobalConfiguration.Configure(WebApiConfig.Register);

The above line registers the Web API route in our web application. Now under App_Start folder, you will find WebApiConfig.cs file. Open this file and write the following code:

public static void Register(HttpConfiguration config)
{
    config.MapHttpAttributeRoutes();
 
    config.Routes.MapHttpRoute(
        name: "DefaultApi",
        routeTemplate: "api/{controller}/{id}",
        defaults: new { id = RouteParameter.Optional }
    );
    var json = config.Formatters.JsonFormatter;
    json.SerializerSettings.PreserveReferencesHandling = Newtonsoft.Json.PreserveReferencesHandling.Objects;
    json.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();
    config.Formatters.Remove(config.Formatters.XmlFormatter);
}

In the above code, we are configuring Web API to make use of JSON formatter with camel casing, as most of the JavaScript developer will expect JSON output in Camel casing.

Now modify the Get method of our Web API controller as shown here:

public class PieChartController : ApiController
{
    NorthwindEntities dataContext = new NorthwindEntities();
    // GET api/piechart
    public IEnumerable<CityPopulationTable> Get()
    {
        return dataContext.CityPopulationTables.ToList();
    }
}

In the above code, we have created an object of our Entity Data model which will give access to the tables. Then we are returning an IEnumerable of our object CityPopulationTables.

Let us design our Pie chart and Donut chart using the Web API data shown in above:

Creating D3 Charts

Add a HTML page with the name ‘CityPolulationPieChart.html’. Once you add the page, we will reference the jQuery and D3.js file in the page:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Pie Chart Example</title>
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script src="Scripts/d3.js"></script>
</head>

We will make use of jQuery AJAX function to fetch the data from our Web API and display it in a Pie and Donut chart. Let’s add a DOM ready function into our <body> tag. In this function, we will first declare two arrays. First array will hold the data for our chart and the second array will hold the colors which we will use for our chart:

$(function () {
            var chartData = [];
            var colors = [];
});

In the next step, we will fetch the data from our Web API using jQuery $.ajax function. Add this code after our array declaration:

$.ajax({
        type: "GET",
        url: "api/PieChart",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (result) {
            $.each(result, function (i,j) {
                chartData.push(j.population);
                var currentColor = '#' + Math.floor(Math.random() * j.population+5566656).toString(16);
                colors.push(currentColor);
            });
            console.log(chartData);}
        error: function (msg) {
            $("#result").text(msg);
        }
});

Note: Although I have used success and error here for devs using an older version of jQuery, these methods have been deprecated from jQuery 1.8. You should replace them with .done() and fail().

In the above code, we are using a GET request with the Web API URL and the type of data set to JSON. On successful completion of the request, we are running a loop using $.each() which will push the fetched data into our chartData array. We are also generating colors and adding them into our colors array.

Now it’s time to use the D3 selector. We will use D3 selector to select the body and will append the SVG element to the same by setting its height and width. Add this code after console.log function. The code is shown below –

var radius = 300;
var colorScale = d3.scale.ordinal().range(colors);
                    
var area = d3.select('body').append('svg')
             .attr('width', 1500)
             .attr('height', 1500);

Also note that we are using the scale function of D3 which allows us to set the ordinal scale with the range to set the scale’s output range. We have also added a variable called radius which is set to 300.

The next step is to group the elements and draw an arc into our SVG as shown in the following code:

var pieGroup = area.append('g').attr('transform', 'translate(300, 300)');
var arc = d3.svg.arc()
                .innerRadius(0)
                .outerRadius(radius);

In the above code, we are using radius variable as the outer radius and fixing the inner radius to 0. As the next step, use a pie layout available under D3. Then pass the chart data and append it to our group ‘g’. The code is shown below –

var pie = d3.layout.pie()
       .value(function (data) { return data; })
var arcs = pieGroup.selectAll('.arc')
       .data(pie(chartData))
       .enter()
       .append('g')
       .attr('class', 'arc');

Also observe, we are using D3 selector to select arc class added at the end, which will select all the elements which has a class arc. In the last step,  append the path and fill the color from our array. We will also display the population data as text to our pie chart. The code is shown below –

arcs.append('path')
    .attr('d', arc)
    .attr('fill', function (d) { return colorScale(d.data); });
 
arcs.append('text')
    .attr('transform', function (data) { return 'translate(' + arc.centroid(data) + ')'; })
    .attr('text-anchor', 'middle')
    .attr('font-size', '1em')
    .text(function (data) { return data.data; });

Donut Chart

Designing a Donut chart is very simple. Just change the inner radius to something higher than zero. I am making it 200. The code is as shown here:

var arc = d3.svg.arc()
        .innerRadius(200)
        .outerRadius(radius);

Best ASP.NET 4.6 Hosting Recommendation

ASPHostPortal.com provides its customers with Plesk Panel, one of the most popular and stable control panels for Windows hosting, as free. You could also see the latest .NET framework, a crazy amount of functionality as well as Large disk space, bandwidth, MSSQL databases and more. All those give people the convenience to build up a powerful site in Windows server. ASPHostPortal.com offers ASP.NET hosting starts from $1/month only. They also guarantees 30 days money back and guarantee 99.9% uptime. If you need a reliable affordable ASP.NET Hosting, ASPHostPortal.com should be your best choice.



Cheap ASP.NET 4.5 Hosting

We’re a company that works differently to most. Value is what we output and help our customers achieve, not how much money we put in the bank. It’s not because we are altruistic. It’s based on an even simpler principle. "Do good things, and good things will come to you".

Success for us is something that is continually experienced, not something that is reached. For us it is all about the experience – more than the journey. Life is a continual experience. We see the Internet as being an incredible amplifier to the experience of life for all of us. It can help humanity come together to explode in knowledge exploration and discussion. It is continual enlightenment of new ideas, experiences, and passions


Author Link

 photo ahp banner aspnet-01_zps87l92lcl.png

 

Corporate Address (Location)

ASPHostPortal
170 W 56th Street, Suite 121
New York, NY 10019
United States

Tag cloud

Sign in