Windows 2012 Hosting - MVC 6 and SQL 2014 BLOG

Tutorial and Articles about Windows Hosting, SQL Hosting, MVC Hosting, and Silverlight Hosting

ASP.NET MVC 6 Hosting - ASPHostPorta :: Introduction ASP.NET vNext and Features

clock September 9, 2015 08:15 by author Jervis

Microsoft has announced to launch ASP.NET vNext, which includes MVC, Web API, and Web Pages frameworks will be merged into one framework, called MVC 6. This new framework removes a lot of overlap between the existing MVC and Web API frameworks. It uses a common set of abstractions for routing, action selection, filters, model binding, and so on. You can use the framework to create both UI (HTML) and web APIs.

ASP.NET vNext has been designed to provide you the facilities to create .NET stack for building modern cloud-based apps. ASP.NET vNext will build on .NET vNext.

Asp.NET vNext Main Features

ASP.NET vNext Provides Cloud-Optimized

This feature is really very helpful for developers. ASP.NET vNext can target .NET vNext (with cloud optimized mode). This means that services such as session state and caching can be replaced based on whether the app is running in the cloud or in a traditional hosting environment.

Version of .NET Framework Side by side support

When targeting the Cloud optimized mode in .NET vNext, ASP.NET vNext will let you deploy any other version of .NET Framework. Since now the .NET vNext Framework can be deployed with the app, each app can run different versions of .NET vNext side-by-side and upgrade separately, all on the same machine.

More Enhancement for developer

In ASP.NET vNext, you can now edit your code files and refresh the browser to see the changes without explicitly building your app. You can also edit your application outside of Visual Studio.

ASP.NET vNext projects have project.json file where all the project dependencies are stored. This makes it easier to open vNext projects outside of Visual Studio so that you can edit them using any editor such as Notepad etc. You can even edit ASP.NET vNext projects in the cloud.

Helps in building Web sites and services both

MVC and Web API have been merged into a single programming model. For example, there’s now unified controller, routing and model binding concepts between them. You can now have a single controller that returns both MVC views and formatted Web API responses, on the same HTTP verb.

Modular Stack

ASP.NET vNext will ship as NuGet packages. NuGet packages will also be the unit of reference in your application. NuGet packages and libraries references will be treated the same so it will be easier to manage the references in your project.

This makes it possible for an application developer to choose what functionality they want to bring into their application. In the previous versions of ASP.NET features such as HttpContext, Session, Caching, and Membership were baked into the framework. As an app developer now if you do not need these features then you can choose not to bring it into your app.

Support for Dependency Injection

Dependency Injection is built into vNext and is consistent across the stack. All of the vNext components such as MVC, Web API, SignalR, EF and Identity will use the same DI. This will allow us to provide the right set of services based on the environment that you are running in.

New Configuration

There is a new configuration system which can read values from environment variables. This configuration provides a unified API system for accessing configuration values. You can use the same APIs to access configuration values locally or in Azure.

vNext is Open Source

The entire source code is already released as open source via the .NET Foundation. You can see the source at https://github.com/aspnet and follow progress on vNext in real time. You can also send pull requests and contribute to the source code.

vNext have Cross-platform support

We're developing vNext with cross-platform in mind, including an active collaboration with Xamarin to ensure that cloud-optimized .NET applications can run on Mac or Linux on top of the Mono runtime.

 



ASP.NET MVC 6 Hosting - ASPHostPortal :: Bootstrap Tree View in ASP.Net MVC

clock August 24, 2015 07:42 by author Kenny

Bootstrap Tree View in ASP.Net MVC

The ASP.NET MVC is an almost open source web application framework that implements the model–view–controller (MVC) pattern. The ASP.NET MVC framework is a lightweight, highly testable presentation framework that (as with Web Forms-based applications) is integrated with existing ASP.NETfeatures, such as master pages and membership-based authentication. Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites.

We create two classes, one is AuthorViewModel and another is BookViewModel. AuthorViewModel is the main class that has an association with the BookViewModel class. In other words each AuthorViewModel class object has a list of BookViewModel class objects. The following is the code snippet for the BookViewModel class. 

namespace TreeView.Models   
{  
    public class BookViewModel   
    {  
        public long Id   
        {  
            get;  
            set;  
        }  
        public string Title   
        {  
            get;  
            set;  
        }  
        public bool IsWritten   
        {  
            get;  
            set;  
        }  
    }  
}  

The following is the code snippet for the AuthorViewModel class.

using System.Collections.Generic;  
 
namespace TreeView.Models {  
    public class AuthorViewModel   
    {  
        public AuthorViewModel()   
        {  
            BookViewModel = new List < BookViewModel > ();  
        }  
        public int Id   
        {  
            get;  
            set;  
        }  
        public string Name   
        {  
            get;  
            set;  
        }  
        public bool IsAuthor   
        {  
            get;  
            set;  
        }  
        public IList < BookViewModel > BookViewModel   
        {  
            get;  
            set;  
        }  
    }  
}

Now we create a controller “HomeController” that has two action methods for both GET and POST requests. The action method's name is “Index”. The Get request action method returns a tree view in the UI whereas the POST request method gets the posted data from the UI. The following is the code snippet for HomeController.

using System.Collections.Generic;  
using System.Linq;  
using System.Web.Mvc;  
using TreeView.Models;  
 
namespace TreeView.Controllers  
{  
    public class HomeController : Controller  
    {  
        [HttpGet]  
        public ActionResult Index()  
        {  
            List<AuthorViewModel> model = new List<AuthorViewModel>();  
 
            AuthorViewModel firstAuthor = new AuthorViewModel  
            {  
                Id = 1,  
                Name = "User1",  
                BookViewModel = new List<BookViewModel>{  
                    new BookViewModel{  
                        Id=1,  
                        Title = "JQuery",  
                        IsWritten = false  
                    }, new BookViewModel{  
                        Id=1,  
                        Title = "JavaScript",  
                        IsWritten = false  
                    }  
                }  
            };  
 
            AuthorViewModel secondAuthor = new AuthorViewModel  
            {  
                Id = 2,  
                Name = "User2",  
                BookViewModel = new List<BookViewModel>{  
                    new BookViewModel{  
                        Id=3,  
                        Title = "C#",  
                        IsWritten = false  
                    }, new BookViewModel{  
                        Id=4,  
                        Title = "Entity Framework",  
                        IsWritten = false  
                    }  
                }  
            };  
            model.Add(firstAuthor);  
            model.Add(secondAuthor);  
            return View("Index", model);  
        }  
 
        [HttpPost]  
        public ActionResult Index(List<AuthorViewModel> model)  
        {  
            List<AuthorViewModel> selectedAuthors = model.Where(a => a.IsAuthor).ToList();  
            List<BookViewModel> selectedBooks = model.Where(a => a.IsAuthor)  
                                                .SelectMany(a => a.BookViewModel.Where(b => b.IsWritten)).ToList();  
            return View();  
        }  
    }  

The preceding code shows how books are associated with an author in the GET action method and how to get a selected tree node (authors and books) in the POST request. 

Bootstrap CSS is already added to the application but we write a new custom CSS for the tree view design. The following is the code snippet for the tree CSS.

.tree li {  
    margin: 0px 0;    
    list-style-type: none;  
    position: relative;  
    padding: 20px 5px 0px 5px;  
}  
 
.tree li::before{  
    content: '';  
    position: absolute;   
    top: 0;  
    width: 1px;   
    height: 100%;  
    right: auto;   
    left: -20px;  
    border-left: 1px solid #ccc;  
    bottom: 50px;  
}  
.tree li::after{  
    content: '';  
    position: absolute;   
    top: 30px;   
    width: 25px;   
    height: 20px;  
    right: auto;   
    left: -20px;  
    border-top: 1px solid #ccc;  
}  
.tree li a{  
    display: inline-block;  
    border: 1px solid #ccc;  
    padding: 5px 10px;  
    text-decoration: none;  
    color: #666;      
    font-family: 'Open Sans',sans-serif;  
    font-size: 14px;  
    font-weight :600;  
    border-radius: 5px;  
    -webkit-border-radius: 5px;  
    -moz-border-radius: 5px;  
}  
 
/*Remove connectors before root*/  
.tree > ul > li::before, .tree > ul > li::after{  
    border: 0;  
}  
/*Remove connectors after last child*/  
.tree li:last-child::before{   
      height: 30px;  
}  
 
/*Time for some hover effects*/  
/*We will apply the hover effect the the lineage of the element also*/  
.tree li a:hover, .tree li a:hover+ul li a {  
    background: #dd4814; color: #ffffff; border: 1px solid #dd4814;  
}  
/*Connector styles on hover*/  
.tree li a:hover+ul li::after,   
.tree li a:hover+ul li::before,   
.tree li a:hover+ul::before,   
.tree li a:hover+ul ul::before{  
    border-color:  #dd4814;  
}  
.tree-checkbox{  
    margin :4px !important;  
}  
 
   
.tree:before {  
    border-left:  1px solid #ccc;  
    bottom: 16px;  
    content: "";  
    display: block;  
    left: 0;  
    position: absolute;  
    top: -21px;  
    width: 1px;  
    z-index: 1;  
}  
 
.tree ul:after {  
    border-top: 1px solid #ccc;  
    content: "";  
    height: 20px;  
    left: -29px;  
    position: absolute;  
    right: auto;  
    top: 37px;  
    width: 34px;  
}  
*:before, *:after {  
    box-sizing: border-box;  
}  
*:before, *:after {  
    box-sizing: border-box;  
}  
.tree {  
    overflow: auto;  
    padding-left: 0px;  
    position: relative;  

Now we create an Index view that renders in the browser and shows the tree view for the author and book. The following is the code snippet for the Index view.

@model List  
<TreeView.Models.AuthorViewModel>  
@section head{  
@Styles.Render("~/Content/css/tree.css")  
}  
    <div class="panel panel-primary">  
        <div class="panel-heading panel-head">Author Book Tree View</div>  
        <div id="frm-author" class="panel-body">  
@using (Html.BeginForm())  
{  
            <div class="tree">  
@for (int i = 0; i < Model.Count(); i++)  
{  
                <ul>  
                    <li>  
                        <a href="#">  
@Html.CheckBoxFor(model => model[i].IsAuthor, new { @class = "tree-checkbox parent", @id = @Model[i].Id })  
                            <label [email protected]>  
                                <strong>Author:</strong>  
@Html.DisplayFor(model => model[i].Name)  
                            </label>  
                        </a>  
                        <ul>  
@for (int j = 0; j < Model[i].BookViewModel.Count(); j++)  
{  
int k = 1 + j;  
@Html.HiddenFor(model => model[i].BookViewModel[j].Id)  
                            <li>  
                                <a href="#">  
@Html.CheckBoxFor(model => model[i].BookViewModel[j].IsWritten, new { @class = "tree-checkbox node-item", @iid = i + "" + j })  
                                    <label [email protected]@j>  
                                        <strong>Book @(k):</strong> @Html.DisplayFor(model => model[i].BookViewModel[j].Title)  
                                    </label>  
                                </a>  
                            </li>  
}  
                        </ul>  
                    </li>  
                </ul>  
}  
            </div>  
            <div class="form-group">  
                <div class="col-lg-9"></div>  
                <div class="col-lg-3">  
                    <button class="btn btn-success" id="btnSubmit" type="submit">  
Submit  
</button>  
                </div>  
            </div>  
}  
        </div>  
    </div>  
@section scripts{  
@Scripts.Render("~/Scripts/tree.js")  

Thereafter we create an important part of this example. We create the JavaScript file tree.js with the following code.

(function($)   
{  
    function Tree() {  
        var $this = this;  
        function treeNodeClick()   
        {  
            $(document).on('click', '.tree li a input[type="checkbox"]', function() {  
                $(this).closest('li').find('ul input[type="checkbox"]').prop('checked', $(this).is(':checked'));  
            }).on('click', '.node-item', function() {  
                var parentNode = $(this).parents('.tree ul');  
                if ($(this).is(':checked')) {  
                    parentNode.find('li a .parent').prop('checked', true);  
                } else {  
                    var elements = parentNode.find('ul input[type="checkbox"]:checked');  
                    if (elements.length == 0) {  
                        parentNode.find('li a .parent').prop('checked', false);  
                    }  
                }  
            });  
        };  
        $this.init = function() {  
            treeNodeClick();  
        }  
    }  
    $(function() {  
        var self = new Tree();  
        self.init();  
    })  
}(jQuery)) 

As in the preceding JavaScript code, the create tree view has the following features.

  1. When we select an author parent node then all the associated books will be selected.
  2. When a book is selected the associated parent author will be selected automatically.
  3. When all child book nodes are selected for a parent author node then the parent node will be selected.
  4. When the parent node is unselected then the child books will be automatically unselected.

Figure 1 shows the parent child (author-book) tree view.



About ASPHostPortal.com

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


Corporate Address (Location)

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

Sign in