Return JsonResult in MVC

public ActionResult Movies()
{
    var movies = new List<object>();

    movies.Add(new { Title = "Ghostbusters", Genre = "Comedy", Year = 1984 });
    movies.Add(new { Title = "Gone with Wind", Genre = "Drama", Year = 1939 });
    movies.Add(new { Title = "Star Wars", Genre = "Science Fiction", Year = 1977 });

    return Json(movies, JsonRequestBehavior.AllowGet);
}

<input name="btnGetMovies" id="btnGetMovies" type="submit" value="Get Movies">
<ul id="movieList"></ul>

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
    $("#btnGetMovies").click(function () {
        var actionUrl = '@Url.Action("Movies", "Home")';
        $.getJSON(actionUrl, displayData);
    });

    function displayData(response) {
        if (response != null) {
            for (var i = 0; i < response.length; i++) {
                $("#movieList").append("<li>" + response[i].Title + " " + response[i].Genre + " " + response[i].Year + "</li>")
            }
        }
    }
</script>

Microsoft.AspNet.Identity in MVC 5

Microsoft.AspNet.Identity.Core

 

Microsoft.AspNet.Identity.EntityFramework

 

AccountController.cs

new UserManager<ApplicationUser>(…)

 

IdentityModel.cs

class ApplicationUser and ApplicationDbContext

 

1. Add customize field, FavoriteBook, into IdentityUser table

2. Add customize table, Movie, into IdentityDbContext

3. Don’t forget to add textbox of customize field on related Views

4. Don’t forget to do DB Migration to apply schema changes in database, otherwise we will see following error

Configuration.cs in Migration folder

5. new ApplicationUser{}

6. new PasswordHasher()

7. Or the other way to create default user in Seed method

8. Run command, update-database, in Package Manager Console

9. If want to add default Role to defaut user

Web Services by Using Service Stack Web Service Framework

Install Service Stack from NuGet

All dependencies will be installed too

After installation, you will several references have been included

 

On-line document of Service Stack

http://servicestack.net, click the Documentation button

Click Create your first webservice

This page is for non MVC application, so scoll down to the link for MVC

Click the link below:

https://github.com/ServiceStack/ServiceStack/wiki/Run-servicestack-side-by-side-with-another-web-framework.

Copy the content of Web.config

Other steps

 

Implement in Visual Studio

Add “Api” folder and one class, “HelloService.cs”.

Code separate into 3 parties:

1. Service

2. Request

3. Response, the name is always requestName+Response

Using the service that we just created

 

Testing on Web Service

The default web site URL has error, it is no doubt

Has to add “/api” to see available web services, but it’s still fail so far

Check the error message, we forgot to new an AppHost() in Application_Start() in Global.asax

So add the code, “new ProteinTrackerAppHost().Init();” in Application_Start() function

Now it works, and showing following screen.

One operation shows, Hello. It supports different format, XML, JSON, JSV, CSV, …etc.

Click JSON, for example.

Two routes are available for this service

Using /api/hello/xxx to consume the web service

In json format

In xml format

DotNet.Highcharts Report in MVC 4

If you want beautiful chart report like below in MVC 4, DotNet.Highcharts is one of the solution. It’s a javascript solution, and must easy to understand and use in the web application.

In this blog, I will show you step by step if your solution is MVC 4.

 

Step 1, Download and install DotNet.Hightcharts into your Visual Studio solution from either Manage NuGet Packages window or from Package Manager Console

Install-Package DotNet.Highchars

 

Step 2, Verify installed package:

1. DLL reference in References folder

2. Highcharts-3.0.1 folder and javascript files in Scripts folder

 

Step 3, Add two script reference, jQuery.js and Modernizr.js (version doesn’t matter, my jQuery 1.7.1 & modernizr 2.5.3)

 

Note:

The place of these 2 scripts is quite important, I spend around 3 hours to realize it. It must happen BEFORE Body Section. Later, I will show you why.

 

Step 4, Create a new Report controller and Index Action.

public ActionResult Index()
{
    DotNet.Highcharts.Highcharts chart = new DotNet.Highcharts.Highcharts("chart")
        .SetXAxis(new XAxis
                    {
                        Categories = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" }
                    })
        .SetSeries(new Series
                    {
                        Data = new Data(new object[] { 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4 })
                    });

    return View(chart);
}

 

Step 5, Add a BundleConfig in BundleConfig.cs of App_Start folder, "~/Scripts/Highcharts-3.0.1/js/highcharts.js"

 

Step 6, Add a new View, Index with strongly-typed Hightcharts Model class

 

Step 7, In the Index.cshtml, add code of part 2 & 3

@(Model)

@section Scripts {
    @Scripts.Render("~/bundles/HighChart")
}

 

Step 8, Complie and run the solution, click on Report to show the chart

 

Step 9, View HTML source to understand why jQuery & Modernizr must BEFORE body section.

It’s because DotNet.Highcharts will generate javascript code (point 2 in below picture) and the place is between body section.

 

Addtional Reference:

https://dotnethighcharts.codeplex.com/