Knockout.js is a javascript library that allows us to bind html elements against any data model. It provides a simple two-way data binding mechanism between your data model and UI means any changes to data model are automatically reflected in the DOM(UI) and any changes to the DOM are automatically reflected to the data model.

Based on ASP.NET, ASP.NET MVC allows software developers to build a web application as a composition of three roles: Model, View and Controller. The MVC model defines web applications with 3 logic layers: The business layer (Model logic),The display layer (View logic),The input control (Controller logic).

This article will demonstrate how to load a KnockoutJS view model from a C# controller using ajax in an ASP.NET MVC project. I’m just going to jump straight into the code for this sample.  To get started we need to create a new action in the controller.  For the purposes of this sample this action will return a randomly populated Person object (see the previous articles for the definition) so that we can see the content changing.  Here is the action:

public class SampleController : Controller
{
    public ActionResult AjaxModelLoading()
    {
        Person model = CreateRandomModel();
        if (Request.IsAjaxRequest())
        {
            return new JsonNetResult(model);
        }
        return View(model);
    } 
    private static Person CreateRandomModel()
    {
        Random random = new Random();
        string[] firstNames = { "Billy", "Kevin", "Michael", "Steve" };
        string[] lastNames = { "Jordan", "Smith", "Wild", "Walker" };
        string firstName = firstNames[random.Next(firstNames.Length)];
        string lastName = lastNames[random.Next(lastNames.Length)]; 
        return new Person
        {
            FirstName = firstName,
            LastName = lastName,
            EmailAddress = string.Format("{0}@{1}.com", firstName, lastName),
            PhoneNumber = random.Next(int.MaxValue).ToString("D10"),
            DateOfBirth = DateTime.Today.AddYears(random.Next(-50, -10))
        };
    }
}

This action creates the Person object and then detects if the HTTP request was made using ajax.  If it was then it serializes the model as JSON and if it is a standard HTTP request it returns the view.  This is a handy technique for implementing a simple refresh of data in the view without retrieving all the HTML from the server again.

On line 9 you can see that I have not used the standard ASP.NET JSON serializer.  Instead I went with my own ActionResult which makes use of JSON.NET to give myself more control over the generated JSON.  For reference the code for my JsonNetResult class is below: public class JsonNetResult : ActionResult
{  
    private const string ContentType = "application/json"; 
    private readonly object data;
    private readonly Formatting formatting;
    private readonly JsonSerializerSettings serializerSettings; 
    public JsonNetResult(object data)
    {
        this.data = data;
        formatting = Formatting.None;
        serializerSettings = new JsonSerializerSettings
       {
            ContractResolver = new CamelCasePropertyNamesContractResolver()
        };
    }
    public override void ExecuteResult(ControllerContext context)
    {
        HttpResponseBase response = context.HttpContext.Response;
        response.ContentType = ContentType;
        if (data != null)
        {
            JsonTextWriter writer = new JsonTextWriter(response.Output) { Formatting = formatting };
            JsonSerializer serializer = JsonSerializer.Create(serializerSettings);
            serializer.Serialize(writer, data);
            writer.Flush();
       }
    } 
    public object Data
    {
        get { return data; }
    }
}

Next we need to create the KnockoutJS view model to bind to the view.
var AjaxModelLoading = function(url) {
    var self = this;
    self.isLoaded = ko.observable(false);
    self.isLoading = ko.observable(false); 
    self.getRandomModel = function () {
        self.isLoading(true);
        self.isLoaded(false);
 
        // Setting a timeout so the loading text is visible in the sample
        setTimeout(function() {
            $.ajax(url, {
                type: "GET",
                cache: false,
            }).done(function(data) {
                ko.mapping.fromJS(data, {}, self);
                self.isLoaded(true);
                self.isLoading(false);
            });
        }, 1000);
    };
};

This view model defines a function which will be used to handle a click event from the view in order to refresh the data. It also does some basic state management to determine if the content has been loaded or is in the process of loading.  I have put in a short delay between the click in the view and executing the ajax request in order to make the loading state management more apparent for the sample.

Lastly we need to create the view.
@model Quickstart.Web.Models.Person 
@section scripts
{
    <script type="text/javascript" src="/Scripts/ViewModels/AjaxModelLoading.js"></script>
    <script type="text/javascript">
        var viewModel = new AjaxModelLoading("@Url.Action("AjaxModelLoading")");
        ko.applyBindings(viewModel); 
        viewModel.getRandomModel();
    </script>
}
 
<h2>Ajax Model Loading Sample</h2>

<div data-bind="if: isLoading()">
    Loading...
</div>
 
<div data-bind="if: isLoaded()">
    <div>
        <label>First Name:</label>
        <input type="text" data-bind="value: firstName"/>
    </div>
 
    <div>
        <label>Last Name:</label>
        <input type="text" data-bind="value: lastName"/>
    </div>

    <div>
        <label>Email Address:</label>
        <input type="text" data-bind="value: emailAddress"/>
    </div>
 
    <div>
        <label>Phone Number:</label>
        <input type="text" data-bind="value: phoneNumber"/>
    </div>
 
    <div>
        <label>Date of Birth:</label>
        <input type="text" data-bind="value: dateOfBirth"/>
    </div>
</div>
<a href="#" data-bind="click: getRandomModel">Get random person</a>

The ASP.NET MVC Razor implementation is closely tied to ASP.NET and MVC and the View template (WebViewPage class) includes a few MVC-specific features as well as back references to the controller. In other words MVC Razor is designed with MVC in mind. With Razor, you can create a custom Razor Engine that can be used in any .NET environment. Razor is the best view engine available for MVC as its much cleaner and easy to write and read. This view engine is compatible with unit testing frameworks. In this article, I will demonstrate how you can render ASP.NET MVC Razor Views in ASP.Net MVC 1.0, 2.0 RC, 3 and 4 .
Basically, all you do is create a fake HttpContext for the view to render itself.  This is an extensions method of the HtmlHelper that processes a partial view through the default MVC view engine and then renders it to the response stream.

Thisworks on ASP.NET MVC 1.0 (changing Headers on the original HttpResponse doesn't throwthe "Server cannot set content type after HTTP headers have been sent"exception).
/// <summary>Renders a view to string.</summary>
public static string RenderViewToString(this Controller controller, string viewName, object viewData) {

Create memory writer.
var sb = new StringBuilder();
var memWriter = new StringWriter(sb);

Create fake http context to render the view.
    var fakeResponse = new HttpResponse(memWriter);
    var fakeContext = new HttpContext(HttpContext.Current.Request, fakeResponse);
    var fakeControllerContext = new ControllerContext(
        new HttpContextWrapper(fakeContext),
        controller.ControllerContext.RouteData,
        controller.ControllerContext.Controller);
    var oldContext = HttpContext.Current;
    HttpContext.Current = fakeContext;
  Use HtmlHelper to render partial view to fake context.
    var html = new HtmlHelper(new ViewContext(fakeControllerContext,
        new FakeView(), new ViewDataDictionary(), new TempDataDictionary()),
        new ViewPage());
    html.RenderPartial(viewName, viewData);
Restore context.
    HttpContext.Current = oldContext;  
    //Flush memory and return output
    memWriter.Flush();
    return sb.ToString();}
Fake IView implementation used to instantiate an HtmlHelper.
public class FakeView : IView {
    #region IView Members
    public void Render(ViewContext viewContext, System.IO.TextWriter writer) {
        throw new NotImplementedException();
    }    #endregion
}

In ASP.NET MVC 2.0 RC, the code changes a bit because we have to pass in the StringWriter used to write the view into the ViewContext:
Use HtmlHelper to render partial view to fake context.

//...
var html = new HtmlHelper(
    new ViewContext(fakeControllerContext, new FakeView(),
        new ViewDataDictionary(), new TempDataDictionary(), memWriter),
    new ViewPage());
html.RenderPartial(viewName, viewData);
//...

In MVC 3 you can used this code :
public static string RazorRender(Controller context, string DefaultAction)
{
string Cache = string.Empty;
System.Text.StringBuilder sb = new System.Text.StringBuilder();
System.IO.TextWriter tw = new System.IO.StringWriter(sb);
RazorView view_ = new RazorView(context.ControllerContext, DefaultAction, null, false, null);
view_.Render(new ViewContext(context.ControllerContext, view_, new ViewDataDictionary(), new TempDataDictionary(), tw), tw);
Cache = sb.ToString();
return Cache;
}
public static string RenderRazorViewToString(string viewName, object model)
        {
ViewData.Model = model;
using (var sw = new StringWriter())
            {
var viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, viewName);
var viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw);
viewResult.View.Render(viewContext, sw);
return sw.GetStringBuilder().ToString();
}
}
public static class HtmlHelperExtensions
        {
public static string RenderPartialToString(ControllerContext context, string partialViewName, ViewDataDictionary viewData, TempDataDictionary tempData)
            {
ViewEngineResult result = ViewEngines.Engines.FindPartialView(context, partialViewName);
if (result.View != null)
                {
StringBuilder sb = new StringBuilder();
using (StringWriter sw = new StringWriter(sb))
                    {
using (HtmlTextWriter output = new HtmlTextWriter(sw))
                        {
ViewContext viewContext = new ViewContext(context, result.View, viewData, tempData, output);
result.View.Render(viewContext, output);
}
}
return sb.ToString();

}
return String.Empty;
            }
        }

This code worked in MVC 4 :
public string RenderRazorViewToString(string viewName, object model) {
    ViewData.Model = model;
    using (var sw = new StringWriter()) {
        var viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, viewName);
        var viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw);
        viewResult.View.Render(viewContext, sw);
        viewResult.ViewEngine.ReleaseView(ControllerContext, viewResult.View);
        return sw.GetStringBuilder().ToString();
    }
}

I hope you will enjoy this Article, and I hope you will refer this article for your need. Stay tuned and stay connected for more technical updates with ASPHostPortal

Now I wiil expose the main difference between ASP.NET Web Form and ASP.NET MVC.
ASP.NET Web Forms is a part of the ASP.NET web application framework. Web Forms are pages that your users request through their browser and that form the user interface (UI) that give your web applications their look and feel. These pages are written using a combination of HTML, server controls, and server code. When users request a page, it is compiled and executed on the server, and then it generates the HTML markup that the browser can render. Using Visual Studio, you can create ASP.NET Web Forms using a powerful IDE. For example, this lets you drag and drop server controls to lay out your Web Forms page. You can then easily set properties, methods, and events for controls or for the page in order to define the page's behavior, look and feel, and so on. To write server code to handle the logic for the page, you can use a .NET language like Visual Basic or C#.

Based on ASP.NET, ASP.NET MVC allows software developers to build a web application as a composition of three roles: Model, View and Controller. A model represents the state of a particular aspect of the application. A controller handles interactions and updates the model to reflect a change in state of the application, and then passes information to the view. A view accepts necessary information from the controller and renders a user interface to display that information.
ASP.NET developers have two options when building new Web projects: ASP.NET Web Forms or ASP.NET MVC framework.
There are the different between ASP.NET Web Form and ASP.NET MVC:

ASP.NET MVC 5 is the latest update to Microsoft's popular MVC (Model-View-Controller) technology - an established web application framework. MVC enables developers to build dynamic, data-driven web sites. MVC 5 adds sophisticated features like single page applications, mobile optimization, adaptive rendering, and more.

In this article, We'll look into how to create default user roles in ASP.NET MVC 5. Let's begin by establishing where the user role is assigned, and that is the registration stage. In the default template, you have the AccountController that contains a Register action. The default implementation looks like this:

[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public ActionResult Register(RegisterModel model)
{
    if (ModelState.IsValid)
    {
        // Attempt to register the user
        try
        {
            WebSecurity.CreateUserAndAccount(model.UserName, model.Password);
            WebSecurity.Login(model.UserName, model.Password);
            return RedirectToAction("Index", "Home");
        }
        catch (MembershipCreateUserException e)
        {
            ModelState.AddModelError("", ErrorCodeToString(e.StatusCode));
        }
    }
    // If we got this far, something failed, redisplay form
    return View(model);
}

What's missing here is the role assignment, so let's add that. Right after the CreateUserAndAccount call, we can check whether a specific role exists, and if it is - add the registered user to it. In case the role is new, create it.

if (!Roles.RoleExists("Standard"))
    Roles.CreateRole("Standard");
Roles.AddUserToRole(model.UserName, "Standard");

Here I am working with a role called Standard, but obviously you can use another identifier for it. If you open the database that is carrying the app data, you will notice that there are two new tables introduced in the existing context - Roles and UsersInRoles.

As the data skeleton is established, you can now limit content access based on roles. In views, you could use the Authorize attribute:

[Authorize(Roles = "Admin")]

Or you could check for the role directly:

@if (Roles.GetRolesForUser().Contains("Admin"))
{
}

That's the tutorial How to create Default User Roles in ASP.NET MVC 5, for more information about ASP.NET MVC 5 Hosting please feel free to visit ASPHostPortal.com.

ASP.NET MVC 4 web application allows users to log in from an external provider, such as Facebook, Twitter, Microsoft or Google and then integrate into your web application. Some OAuth/OpenId providers like Facebook, Google allow to access email. This article explains how to save the email in your database.

Before implementing, first lets consider following points:
1. User name is different from Email.
2. Email might be different for different providers.
3. Email is optional(some external provider like twitter doesn’t allow to access email).

Getting Started:
1. Create a new ASP.NET MVC 4 --> Internet Application Project
2. Open App_Start --> AuthConfig.cs, uncomment the external services which you want to use and pass proper parameters. In this article, we will use Facebook,Twitter and Google providers.

OAuthWebSecurity.RegisterTwitterClient(
        consumerKey: "xxxx",
        consumerSecret: "xxxxxxxx");
    OAuthWebSecurity.RegisterFacebookClient(
        appId: "yyyy",
        appSecret: "yyyyyyyy");
    OAuthWebSecurity.RegisterGoogleClient();

3. In Account Model, add Email property in RegisterExternalLoginModel class:

public class RegisterExternalLoginModel
   {
       [Required]
       [Display(Name = "User name")]
       public string UserName { get; set; }
       public string ExternalLoginData { get; set; }
       public string Email { get; set; }
   }

4. To add Email field in OAuthMembership table, add following class:

[Table("webpages_OAuthMembership")]
   public class OAuthMembership
   {
       [Key, Column(Order = 0), StringLength(30)]
       public string Provider { get; set; }
       [Key, Column(Order = 1), StringLength(100)]
       public string ProviderUserId { get; set; }
       public int UserId { get; set; }
       [StringLength(100)]
       public string Email { get; set; }
   }

5. add OAuthMembership in Userscontext

public class UsersContext : DbContext
    {
        public UsersContext()
            : base("DefaultConnection")
        {
        }
        public DbSet<UserProfile> UserProfiles { get; set; }
        public DbSet<OAuthMembership> OAuthMemberships { get; set; }
    }

It will create the required structure in database when you run the application and open register page first time.

Controller Changes:
In AccountController, To set email from the external provider, replace the following lines in ExternalLoginCallback method :

// User is new, ask for their desired membership name
string loginData = OAuthWebSecurity.SerializeProviderUserId(result.Provider, result.ProviderUserId);
ViewBag.ProviderDisplayName = OAuthWebSecurity.GetOAuthClientData(result.Provider).DisplayName;ViewBag.ReturnUrl = returnUrl;
return View("ExternalLoginConfirmation", new RegisterExternalLoginModel { UserName = result.UserName, ExternalLoginData = loginData });

with the following lines:

// User is new, ask for their desired membership name
               string loginData = OAuthWebSecurity.SerializeProviderUserId(result.Provider, result.ProviderUserId);
               ViewBag.ProviderDisplayName = OAuthWebSecurity.GetOAuthClientData(result.Provider).DisplayName;
               ViewBag.ReturnUrl = returnUrl;
               var model = new RegisterExternalLoginModel { UserName = result.UserName, ExternalLoginData = loginData };
               switch (result.Provider) {
                   case "facebook":
                   case "google":
                       {
                           model.Email = result.UserName;
                           model.UserName = "";
                           break;
                       }
                   case "twitter":
                       {
                           model.Email = "";
                           model.UserName = result.UserName;
                           break;
                       }
                   default:
                       break;
               }
               return View("ExternalLoginConfirmation", model);

Facebook and Google provide email as user name, so email is assigned for these providers.

In ExternalLoginConfirmation view, add following Email in form:

@Html.HiddenFor(m => m.Email)

It will post Email also when form is submitted. In ExternalLoginConfirmation method, To save email for new user,replace the following lines:

// Insert name into the profile table
            db.UserProfiles.Add(new UserProfile { UserName = model.UserName });
            db.SaveChanges();
            OAuthWebSecurity.CreateOrUpdateAccount(provider, providerUserId, model.UserName);
            OAuthWebSecurity.Login(provider, providerUserId, createPersistentCookie: false);
            return RedirectToLocal(returnUrl);

with these lines:

// Insert name into the profile table
                       user = new UserProfile { UserName = model.UserName };
                       db.UserProfiles.Add(user);
                       db.SaveChanges();
                       OAuthWebSecurity.CreateOrUpdateAccount(provider, providerUserId, model.UserName);                                           
                       if (!String.IsNullOrEmpty(model.Email)) {
                           var oauthItem = db.OAuthMemberships.FirstOrDefault(x => x.Provider == provider && x.ProviderUserId == providerUserId && x.UserId == user.UserId);
                           if (oauthItem != null) {
                               oauthItem.Email = model.Email;
                               db.SaveChanges();
                           }
                       }
                       OAuthWebSecurity.Login(provider, providerUserId, createPersistentCookie: false);
                       return RedirectToLocal(returnUrl);

This will save email in database for new user. Now if same user wants to add other external provider then in ExternalLoginCallback method, replace following line

OAuthWebSecurity.CreateOrUpdateAccount(result.Provider, result.ProviderUserId, User.Identity.Name);

with following lines:

OAuthWebSecurity.CreateOrUpdateAccount(result.Provider, result.ProviderUserId, User.Identity.Name);
               if (result.Provider == "facebook" || result.Provider == "google")
               {
                   using (UsersContext db = new UsersContext())
                   {
                       UserProfile user = db.UserProfiles.FirstOrDefault(u => u.UserName.ToLower() == User.Identity.Name);                     
                       if (user != null)
                       {                         
                               var oauthItem = db.OAuthMemberships.FirstOrDefault(x => x.Provider == result.Provider && x.ProviderUserId == result.ProviderUserId && x.UserId == user.UserId);
                               if (oauthItem != null)
                               {
                                   oauthItem.Email = result.UserName;
                                   db.SaveChanges();
                               }                         
                       }
                   }
               }

That's the tutorial How To Save Email from External Login in ASP.NET MVC 4.0 with SimpleMembership. If you're looking for best Windows ASP.NET hosting, ASP.NET MVC 4.0 hosting, cloud hosting, and SharePoint hosting, please feel free to visit http://ASPHostPortal.com. Come to the website to know more details.

Entity Framework is actively developed by the Entity Framework team which is assigned to the Microsoft Open Tech Hub and in collaboration with a community of open source developers. Together we are dedicated to creating the best possible data access experience for .NET developers.
The Entity Framework version 6 Release Candidate is now available to developers for immediate download. The open source object-relational mapper is designed to enable .NET developers to work with relational data using domain-specific objects. Entity Framework allows programmers to create a model by writing code or using boxes and lines in the EF Designer. Both of these approaches can be used to target an existing database or create a new database.

There are The Top features of Entity Framework 6 :

• Connection Resiliency - enables automatic recovery from transient connection failures.
• Async Query and Save - dds support for the task-based asynchronous patterns that were introduced in .NET 4.5. With .NET 4.5 Microsoft introduced async and await keywords but in EF 5 Microsoft didn't have time to add support for async query and save but now with EF6 it is supported.
• Code-Based Configuration - gives you the option of performing configuration - that was traditionally performed in a config file - in code.
• Dependency Resolution - introduces support for the Service Locator pattern and we’ve factored out some pieces of functionality that can be replaced with custom implementations.
• Interception/SQL logging - provides low-level building blocks for interception of EF operations with simple SQL logging built on top.
• Testability improvements - make it easier to create test doubles for DbContext and DbSet.
• Features that come for free - These are capabilities that are part of the core. You don’t even have to know they’re there to benefit from them, much less learn any new coding. This group includes features such as performance gains brought by a rewritten view-generation engine and query compilation modifications, stability granted by the ability of DbContext to use an already open connection, and a changed database setting for SQL Server databases created by Entity Framework.
• DbContext can now be created with a DbConnection that is already opened - which enables scenarios where it would be helpful if the connection could be open when creating the context (such as sharing a connection between components where you can not guarantee the state of the connection).

Top Reasons To Choose Entity Framework 6 Hosting

• Fast and Secure Server - Our powerfull servers are especially optimized and ensure the best Entity Framework 6 performance. We have best data centers on three continent, unique account isolation for security, and 24/7 proactive uptime monitoring.
• Best and Friendly Support - Our support team is extremely fast and can help you with setting up and using Entity Framework 6 on your account. Our customer support will help you 24 hours a day, 7 days a week and 365 days a year.
• Dedicated Application Pool - With us, your site will be hosted using isolated application pool in order to meet maximum security standard and reliability.
• Uptime & Support Guarantees - We are so confident in our hosting services we will not only provide you with a 30 days money back guarantee, but also we give you a 99.9% uptime guarantee.
• World Class Control Panel - We use World Class Plesk Control Panel that support one-click installation.

So, you'll get the best, cheap and reliable Entity Framework 6 hosting with us. Why wait longer?

Partial view is like a regular view with a file extension .cshtml. We can use partial views in a situation where we need a header, footer reused for an MVC web application. We can say that it’s like a user control concept in ASP.NET. Here I am going to explain how to create a partial view in an MVC 4 ASP.NET application.

First add a view to the shared folder with the view name _Product. The best way to create a partial view is with the name preceded by '_', because the name specifying that it is reusable.

Here in this example, I am using the partial view to display the item selected in the webgrid.

@model PartialViewSample.Models.Product

@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>AddProduct</title>    
</head>
<body>
    <div>      
           <label>Id:</label>
            @Html.TextBox("Id", Model.Id)
             <label>Name:</label>
            @Html.TextBox("Name", Model.Id)
             <label>Description:</label>
            @Html.TextBox("Description", Model.Description)
             <label>Quantity:</label>
            @Html.TextBox("Quantity", Model.Quantity)
    </div>
</body>
</html>

We can call the partial view in a normal view like:

Html.RenderPartial("~/Views/Shared/_Product.cshtml", product);

Or

@Html.Partial("~/Views/Shared/_Product.cshtml", product);

Html.Partial returns a string, Html.RenderPartial calls Write internally, and returns void. You can store the output of Html.Partial in a variable, or return it from a function. You cannot do this with Html.RenderPartial because the result will be written to the Response stream during execution. So @html.RenderPartial() has faster execution than @html.Partial() due to RenderPartial giving quick response to the output.

We can call the partial view if the grid has a selected item. The code block is shown here:

@if (grid.HasSelection)
{
    product =(PartialViewSample.Models.Product)grid.Rows[grid.SelectedIndex].Value;        
    Html.RenderPartial("~/Views/Shared/_Product.cshtml", product);           
}

This article will show you how to create check box list in ASP.NET MVC. Consider that we have a list consist of three properly Name, ID and IsSelected and we have to show a checkboxlist using this list. First create a model with these properties, consider a category model with three properties and a static method which will return list of model as below. 

Add a controller where a method will return a list of model to view. We have ProductCategoryController and index method which return list of model to view as below.

Add view to this controller method. In view we have model as list of category. Now to create check box list iterate through each item of model and create checkbox list as below.

Now, it is very Interesting thing, when you create @Html.CheckBox it will create automatically a hiddenfield for this checkbox, which will use to maintain checkbox status checked or unchecked, when this list get post to model and to get complete list at controller in post method, you have to add two more hidden field for name and ID (two other properties of list) as above.

Here is post method:

ASPHostPortal.com is a premier Windows and ASP.NET Web hosting company that specializes in Windows and ASP.NET-based hosting. We proudly announces 7 Day Free Trial Windows and ASP.NET Hosting to all new customers. The intention of this FREE TRIAL service is to give our customers a "feel and touch" of our system. This free trial is offered for the next 7 days and at anytime, our customers can always cancel the service.

The 7 Day Free Trial is available with the following features:

- Unlimited Domains
- 5 GB Disk Space
- 60 GB of Bandwidth
- 2 MS SQL Database
- Unlimited Email Account
- Support ASP.NET 4.5
- Support MVC 4.0
- Support SQL Server 2012
- Free Installations of ASP.NET And PHP Applications

ASPHostPortal.com believes that all customers should be given a free trial before buying into a service and with such approach, customers are confident that the product / service that they choose is not faulty or wrong. Even we provide free trial service for 7 days, we always provide superior 24/7 customer service, 99,9% uptime guarantee on our world class data center. On this free trial service, our customer still can choose from our three different data centre locations, namely Singapore, United States and Amsterdam (The Netherlands)

Anyone is welcome to come and try us before they decide whether or not they want to buy. If the service does not meet your expectations, our customer can simply cancel before the end of the free trial period.

For all the details of packages available visit ASPHostPortal.com

About ASPHostPortal.com:

ASPHostPortal.com is a hosting company that best support in Windows and ASP.NET-based hosting. Services include shared hosting, reseller hosting, and sharepoint hosting, with specialty in ASP.NET, SQL Server, and architecting highly scalable solutions. As a leading small to mid-sized business web hosting provider, ASPHostPortal strive to offer the most technologically advanced hosting solutions available to all customers across the world. Security, reliability, and performance are at the core of hosting operations to ensure each site and/or application hosted is highly secured and performs at optimum level.

This article will show you the basic mobile features of ASP.NET MVC 4.0. We will make the following changes using CSS and ASP.NET to an existing web site to make it more user-friendly on mobile devices: 

• Content will fit the small screen 
• One-direction scrolling either horizontally or vertically but not both 
• Clean and efficient design 
• An option to visit the desktop site 

Responsive Design and Mobile Views

As we saw above, the application uses the default ASP.NET MVC Template. This template uses responsive design techniques using the viewport meta-tag to pick up appropriate CSS styles. The view-port is specified in _Layout.cshtml. It essentially sets the device-width reported by the browser as the width of the content frame.

Using the CSS Media queries in the Site.css, the browser switches UI based on the width of the device

As we can see above, the Media query defines a set of CSS style for width up to 850 pixels. Any width lesser than 850px is considered a mobile view in the default CSS.

With the Responsive Design in place, if we look at the site on a Mobile device, this is how it looks

Except for the Index page, the rest are usable but they look out of place or retro-fitted.

Adding First Class Mobile Support using jQuery Mobile

Now that we’ve seen the limitations for Responsive CSS, let’s explore dedicated Mobile Views and the special MVC ViewSwitcher.

- From Package Manager Console, install the jQuery.Mobile.Mvc package as follows

PM> install-package jQuery.Mobile.MVC

- This installs a host of things including jQuery Mobile UI Themes, a new Configuration file called BundleMobileConfig, a new Controller called ViewSwitcherController, an empty Context file called AddingMobileSupportToMVCContext, _Layout.Mobile.cshtml and _ViewSwitcher.cshtml.

The _ViewSwitcher.cshtml checks if the browser is Mobile browser or not and generates an appropriate link to switch views. ViewSwitcherController uses the value passed to it when user clicks on the View Switcher link and switches to the appropriate view. We’ll see what we mean by Appropriate View in the next section.

_Layout.Mobile.cshtml

As we saw, this partial view was added when we added the jQuery Mobile package. The .Mobile convention is baked into MVC and when the GetOverriddenBrowser().IsMobileDevice returns true, MVC goes and checks for .Mobile.cshtml files and starts rendering them as available. So if you only have the _Layout.Mobile.cshtml and no Index.Mobile.cshtml in your view folder, MVC will fall back on the standard Index.cshtml view while using the _Layout.Mobile.cshtml as the default layout.

This is a VERY powerful mechanism we’ve got here.

It’s worth noting .Mobile is not hardcoded, rather the default. We can have .WP7, .WP8, .Iphone, .Android or any such specially targeted views as we deem required.

With the ViewSwitcher and _Layout.Mobile.cshtml in place, now if we run the application, the Home page and Edit page look as follows. Note only the underlying _Layout page has changed to _Layout.Mobile. No new views have been introduced.