In some Web Applications, we need to show real time data to the end users, which means if any changes occur (new data available) in the Server, it needs to show an end user. For instance, you are doing chat in Facebook in one tab of your Browser. You opened another tab in the same Browser and send a message to the same user (with whom, you are doing chat in the previous chat). You will see that message will appear in both the tabs and it is called real-time push.

In order to accomplish the functionality, mentioned above, the client sends interval basis AJAX requests to the Server to check, if the data is available or not. ServerSentEvents(SSE) API helps ensure the Server will push the data to the client when the data is available in the Server.

What are Server Sent Events?
SSE is an acronym and stands for Server Sent Events. It is available in HTML5 EventSource JavaScript API. It allows a Web page to get the updates from a Server when any changes occurs in the Server. It is mostly supported by the latest Browsers except Internet Explorer(IE).

Using code
We are going to implement a requirement like there is a link button and click on it and it displays current time each second on an interval basis.
In order to achieve the same, we need to add the following action in HomeController. It sets response content type as text/event-stream. Next, it loops over the date and flushes the data to the Browser.
    public void Message() 
    { 
        Response.ContentType = "text/event-stream"; 
     
        DateTime startDate = DateTime.Now; 
        while (startDate.AddMinutes(1) > DateTime.Now) 
        { 
            Response.Write(string.Format("data: {0}\n\n", DateTime.Now.ToString())); 
            Response.Flush(); 
     
            System.Threading.Thread.Sleep(1000); 
        } 
         
        Response.Close(); 
    }

Once we are done with the Server side implementation, it's time to add the code in the client side to receive the data from the Server and displays it.

First, it adds a href link, which calls initialize() method to implement SSE. Second, it declares a div, where the data will display. Thirdly, it implements Server Sent Events(SSE) through JavaScript with the steps, mentioned below.
    In the first step, it checks whether SSE is available in the Browser or not. If it is null, then it alerts to the end user to use other Browser.
    In the second step, if SSE is available, then it creates EventSource object with passing the URL as a parameter. Subsequently, it injects the events, mentioned below.

        onopen- It calls when the connection is opened to the Server
        onmessage- It calls when the Browser gets any message from the Server
        onclose- It calls when the Server closes the connection.

    <a href="javascript:initialize();" >Click Me To See Magic</a> 
    <div id="targetDiv"></div> 
     
    <script> 
         
        function initialize() { 
            alert("called"); 
     
            if (window.EventSource == undefined) { 
                // If not supported 
                document.getElementById('targetDiv').innerHTML = "Your browser doesn't support Server Sent Events."; 
                return; 
            } else { 
                var source = new EventSource('../Home/Message'); 
     
                source.onopen = function (event) { 
                    document.getElementById('targetDiv').innerHTML += 'Connection Opened.<br>'; 
                }; 
     
                source.onerror = function (event) { 
                    if (event.eventPhase == EventSource.CLOSED) { 
                        document.getElementById('targetDiv').innerHTML += 'Connection Closed.<br>'; 
                    } 
                }; 
     
                source.onmessage = function (event) { 
                    document.getElementById('targetDiv').innerHTML += event.data + '<br>'; 
                }; 
            } 
        } 
    </script>

Output

Here, we discussed about SSE(Server Sent Events). It is very important API available in HTML5. It helps to push data from the Server to the client when any changes occurs in the Server side. If you want to use a bidirectional communication channel, you can use HTML5 Web Sockets API. The disadvantage of SSE is it is Browser dependent. If the Browser doesn't support SSE, then the user can't see the data, but it is easy to use it. You can also use SignalR for realtime pushing the data to the end user.

HostForLIFE.eu ASP.NET MVC 6 Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.

I have used Entity Framework to fetch the values and used Database First approach. I would also write an article on an Entity Framework but today, I would just show you how to bind the cascading dropdown list in this blog.

I have two dropdownlists. One is for state and the other for city. I would populate the city, which is based on the state selection. You can add as many dropdownlists, as you want. For simplicity, I am using only two dropdowns.

Create table scripts
tblState
    CREATE TABLE [dbo].[tblState]( 
        [stateid] [int] NOT NULL, 
        [statename] [nvarchar](50) NULL, 
    PRIMARY KEY CLUSTERED  
    ( 
        [stateid] ASC 
    )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY] 
    ) ON [PRIMARY] 
     
    GO  

tblCity

    CREATE TABLE [dbo].[tblCity]( 
        [Cityid] [int] NOT NULL, 
        [CityName] [nvarchar](50) NULL, 
        [stateid] [int] NOT NULL 
    ) ON [PRIMARY] 
     
    GO 
     
    ALTER TABLE [dbo].[tblCity]  WITH CHECK ADD FOREIGN KEY([stateid]) 
    REFERENCES [dbo].[tblState] ([stateid]) 
    GO  

I have tblState and tblCity, where I have stateid as Primary key in the tblState table and stateid as the Foreign key in tblCity table. You can insert states and cities from the database as you wish.

Now, with Entity Framework; create your EDMX file. In my case, I have named it ModelDemo.edmx.

Model
I have created a Model and named it Registration. This is not directly required but since I used a strongly typed View, so I have created Model. You can also add Model because if you write the httppost method to save the values to the database, then you would need the model.
    public class Registration 
    { 
    [Required(ErrorMessage = "Enter State")] 
            public string State { get; set; } 
    [Required(ErrorMessage = "Enter City")] 
            public string City { get; set; } 
    }  

Controller
Now, this is my Controller code.
    [HttpGet] 
    public ActionResult Details() 
            { 
                bindState(); 
                return View(); 
            } 
    -------------------------------- 
    public void bindState() 
            { 
                var state = objEF.tblStates.ToList(); 
                List<SelectListItem> li = new List<SelectListItem>(); 
                li.Add(new SelectListItem { Text = "--Select State--", Value = "0" }); 
     
                foreach (var m in state) 
                { 
     
     
                    li.Add(new SelectListItem { Text = m.statename, Value = m.stateid.ToString() }); 
                    ViewBag.state = li; 
     
                } 
            } 
    ---------------------------------- 
    public JsonResult getCity(int id) 
            { 
                var ddlCity = objEF.tblCities.Where(x => x.stateid == id).ToList(); 
                List<SelectListItem> licities = new List<SelectListItem>(); 
     
                licities.Add(new SelectListItem { Text = "--Select State--", Value = "0" }); 
                if (ddlCity != null) 
                { 
                    foreach (var x in ddlCity) 
                    { 
                        licities.Add(new SelectListItem { Text = x.CityName, Value = x.Cityid.ToString() }); 
                    } 
                } 
                return Json(new SelectList(licities, "Value", "Text", JsonRequestBehavior.AllowGet)); 
            }  

Now, if you see my Controller code, I have a httpget method Details(). I am then calling a non-action method bindState() to bind the state ddl. On selection of the state ddl, the getCity() method will be called to bind the city ddl. I have used jQuery to get the Id of the selected item and have passed it to the getCity method to get the cites for the selected state.

I have also used LINQ to get my desired select value w.r.t the Id passed.

View
Right click on action method Details(), followed by clicking Add View. I always prefer a strongly typed View and I have also created a strongly typed View in this case. The name of my View is Details.cshtml.

You need jQuery min.js. Just download it from the NuGet Package, if it’s not there.

    <script src="~/Scripts/jquery-1.10.2.min.js"></script> 
    <script type="text/javascript"> 
         
        $(document).ready(function () { 
     
            $("#State").change(function () { 
                $("#City").empty(); 
                $.ajax({ 
                    type: 'POST', 
                    url: '@Url.Action("getcity")', 
                    dataType: 'json', 
                    data: { id: $("#State").val() }, 
                    success: function (city) { 
     
                        $.each(city, function (i, city) { 
                            $("#City").append('<option value="' 
                                                       + city.Value + '">' 
                                                 + city.Text + '</option>'); 
                        }); 
                    }, 
                    error: function (ex) { 
                        alert('Failed.' + ex); 
                    } 
                }); 
                return false; 
            }) 
        }); 
    </script>  

I have added the jQuery-min.js. From the code given above, we get the Id of the state ddl.

    <div class="form-group"> 
    @Html.LabelFor(model => model.State, htmlAttributes: new { @class = "control-label col-md-2" }) 
                <div class="col-md-10"> 
                    @Html.DropDownListFor(model => model.State, ViewBag.state as List<SelectListItem>, new { style = "width: 200px;" }) 
     
                    @Html.ValidationMessageFor(model => model.State, "", new { @class = "text-danger" }) 
                </div> 
            </div> 
     
            <div class="form-group"> 
     @Html.LabelFor(model => model.City, htmlAttributes: new { @class =     "control-label col-md-2" }) 
                <div class="col-md-10"> 
          @Html.DropDownListFor(model => model.City, new SelectList(string.Empty, "Value", "Text"), "--Select City--", new { style = "width:200px" }) 
     
                    @Html.ValidationMessageFor(model => model.City, "", new { @class = "text-danger" }) 
                </div>   

I have used jQuery to get the ID of the state DDL on .change function and passed it to bind the city ddl.

Now, just run your Application and you should get the output given below and if you do not get it, then check that if you are getting any values in an Id in getCity() method. If not, then check for Id mis-match.

HostForLIFE.eu ASP.NET MVC 6 Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.

In this tutorial, let me show you how to call ajax method in ASP.NET MVC.
Controller code here
    [HttpGet] 
    public JsonResult GetAjaxData(string newCode) { 
        return Json(new { 
            Status = "Ajax called succesfully", Message = "Message show succesfully" 
        }, JsonRequestBehavior.AllowGet); 
    } 

View Code Here

    @ { 
        ViewBag.Title = "Index"; 
    } < script src = "~/Scripts/jquery-1.8.2.js" > < /script> 
    <script> 
    function AjaxCall() 
    { 
    $.ajax({ 
    async: false, 
    url: $('#ajaxURL').val(), 
    type: 'GET', 
    cache: false, 
    data: { 
    newCode : "Put the data here" 
    }, 
    success: function (result) { 
    if(result.Status !=''){ 
    alert(result.Status); 
    } 
    else{ 
    alert('Ajax called failed'); 
    } 
    }, 
    error: function (result, textStatus, errorThrown) { 
    alert(errorThrown); 
    } 
    }) 
    } 
    </script > < div > < button value = "Ajax Called" 
    id = "btncalled" 
    onclick = "AjaxCall()" > Ajax Called < /button> 
    </div > @Html.Hidden("ajaxURL", Url.Action("GetAjaxData", "Demo")) 

App_Start-> route config.cs code here

    public static void RegisterRoutes(RouteCollection routes) { 
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); 
        routes.MapRoute( 
        name: "Default", 
        url: "{controller}/{action}/{id}", 
        defaults: new { 
            controller = "Demo", action = "Index", id = UrlParameter.Optional 
        }); 
    } 

I hope it works for you! Good luck!

HostForLIFE.eu ASP.NET MVC 6 Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.

If your bundles are not getting configured properly in your server, I have fixed this issue, and here I am going to share with you how you can also fix this error. I hope you will like this.

Background

Recently, I hosted one of my MVC applications to Microsoft Azure cloud. And we usually publish our application in release mode, right? So here comes the problem. You can replicate the same issue in your local machine itself. Just make the debug attribute to false in your Web.config as follows.

And when you run, you will get a prompt as follows.

Just select Run without debugging option. Now once after your application is run, you can see some script errors in your browser console saying that the references are not loaded correctly.

And finally I found the solution. Here we will see that.

"Bundles Are Not Working After Hosting To MVC Application"

As I said, the problem is with your bundle config settings. There are few things you must check before going to the last fix.

I will explain it. In my case my bundles were as follows.

And I have the folders JQWidgets in my root script folder. This was making the issue.

Folder structure

Now what I did is, I just changed my bundle config settings in BundleConfig.cs as follows(Renaming the folder),

And I referenced the same bundles as follows in my views.

Please try these steps and build your application. Once that is done you can publish your application to cloud. I hope this will solve your issue. Have a happy coding.

Conclusion

Did I miss anything that you may think is needed? Did you find this post useful? I hope you liked this article. Please share with me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, ASP.NET Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

HostForLIFE.eu ASP.NET MVC 6 Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.

Here are the steps:
Step 1: Create the basic structure of your project, View, multiple partial views View Model,

Step 2: Create your base Controller as in the following,
    public class BaseController: Controller 
    { 
        protected internal virtual CustomJsonResult CustomJson(object json = null, bool allowGet = true) 
        { 
            return new CustomJsonResult(json) 
            { 
                JsonRequestBehavior = allowGet ? JsonRequestBehavior.AllowGet : JsonRequestBehavior.DenyGet 
            }; 
        } 
    } 

It is just small modifications if JSON is not provided handle it. And use this Controller as base controller.

Step 3: Add Class Controller helper which helps you to convert partial view into the string format as in the following,
    public static class ControllerHelper 
    { 
        public static string RenderPartialViewToString(ControllerContext context, string viewName, object model) 
        { 
            var controller = context.Controller; 
            var partialView = ViewEngines.Engines.FindPartialView(controller.ControllerContext, viewName); 
            var stringBuilder = new StringBuilder(); 
            using(var stringWriter = new StringWriter(stringBuilder)) 
            { 
                using(var htmlWriter = new HtmlTextWriter(stringWriter)) 
                { 
                    controller.ViewData.Model = model; 
                    partialView.View.Render(new ViewContext(controller.ControllerContext, partialView.View, controller.ViewData, new TempDataDictionary(), htmlWriter), htmlWriter); 
                } 
            } 
            return stringBuilder.ToString(); 
        } 
    } 

Step 4: Your action code is below. I have added the 2 partial views. Basically we are converting the partial view with objects into the string format.
    public JsonResult CreatePartialView() 
    { 
        MyMultipleUpdateViewModel obj = new MyMultipleUpdateViewModel(); 
        obj.myTest1ViewModel = new MyTest1ViewModel(); 
        obj.myTest1ViewModel.MyTestUpdate = "Test1" + DateTime.Now.ToString(); 
        obj.myTest2ViewModel = new MyTest2ViewModel(); 
        obj.myTest2ViewModel.MyTestUpdate = "Test2" + DateTime.Now.ToString(); 
        var json = new 
        { 
            Header = "Header", Footer = "Footer" 
        }; 
        return CustomJson(json).AddPartialView("_MyTest1PartialView", obj).AddPartialView("_MyTest2PartialView", obj); 
    } 

Step 5: In View display this JSON data ajax in below way . In below code PartialViewDiv1 and PartialViewDiv2 are two divs in which two partial views will be displayed. I have two partial views you may load more partial views.
    <h2>Index</h2> 
    <script type="text/javascript" src="@Url.Content(" ~/Scripts/jquery-1.10.2.js ")"></script> 
    <script type="text/javascript" src="@Url.Content(" ~/Scripts/jquery.unobtrusive-ajax.min.js ")"></script> 
    <script> 
    function GetData(url, onSuccess) 
    { 
        $.ajax( 
        { 
            type: "GET", 
            cache: false, 
            url: url, 
            dataType: "json", 
            success: function(data, textStatus, jqxhr) 
            { 
                onSuccess(data.Json, data.Html); 
            }, 
            error: function(data, text, error) 
            { 
                alert("Error: " + error); 
            } 
        }); 
        return false; 
    } 
     
    function UpdateDiv(json, html) 
    { 
        $("#PartialViewDiv1").html(html[0]); 
        $("#PartialViewDiv2").html(html[1]); 
    } 
    </script> 
    <input type="button" onclick="GetData('/DisplayMutiplePartialView/CreatePartialView', UpdateDiv);" value="Display Multiple Partial View" /> 
    <br> 
       <br> 
          <div id="PartialViewDiv1"></div> 
       <br> 
       <br> 
          <div id="PartialViewDiv2"></div> 
       <br> 
    <br> 

Step 6: Run application and use URL,
It will appear as below

HostForLIFE.eu ASP.NET MVC 6 Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.

One of the items I continuously forgot to add to my web applications is the Robots.txt file that Search Engines use to see what they should index.  This file and site maps help make your site easier to navigate by the bots and allow them to know what's legal and what you would rather not have the published in their engines.  I usually add any administrative pages or account pages despite the fact that they're protected by security, no need for the login page to be index if they sniff the link.

So how do you add Robots.txt to your MVC three application?  Glad you asked, here may be a very little code to get you started.

Code

1. Choose the controller you'd wish to use for the robots.txt output.  I selected the HomeController in my application as i use  it for many “top level” generic links like about us, contact us, index, etc.

2. Create a method called Robots to handle the request.
#region -- Robots() Method –
public ActionResult Robots()
{
    Response.ContentType = "text/plain";
    return View();

}
#endregion

Add the Robots.cshtml view to your Controller’s View directory.  Here is the code I have in my view, yours will vary.
@{
    Layout = null;
}
# robots.txt for @this.Request.Url.Host 
User-agent: *
Disallow: /Administration/
Disallow: /Account/
Load up the class you are using to control your routes, if you are in an Area, this could your AreaRegistration class.  If you are at the top like I am and using the standard MVC template, this is probably the Global.asax.cs file.  Add your route to this file, mine looks like this.

routes.MapRoute("Robots.txt",               
"robots.txt",
new { controller = "Home", action = "Robots" });

Now, Compile and test.

If you have an internet facing site, the chances are you will have a bot find you're request this page. you might as well offer them the advantage of the doubt and allow them to know where you want them to travel. additionally you may save yourself some error log once this page is requested and no controller is found.

Just like something in ASP.NET, there are some ways to solve this riddle, if you employ a special approach, please feel free to share it within the comments.

HostForLIFE.eu ASP.NET MVC 6 Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.

ASP.NET MVC 6 Web API Project

ASP.NET MVC 6 introduces several new project types after you initially pick that you want to develop an ASP.NET MVC 6 Web Application. One of those application types is the new Web API Project.


If you choose the Web API Project, a new Web API Controller Class is created for you to provide an example of responding to Get, Post, Put, and Delete requests for your API.

public class ValuesController : ApiController {

   // GET /api/values
    public IEnumerable<string> Get() {
        return new string[] { "value1", "value2" };
    }

    // GET /api/values/5
    public string Get(int id) {
        return "value";
    }

    // POST /api/values
    public void Post(string value) {}


    // PUT /api/values/5
    public void Put(int id, string value) {}

    // DELETE /api/values/5
    public void Delete(int id) {}
}

With the Web API Project you will also notice a new API specific route added to the RouteTable in Global.asax.cs.

routes.MapHttpRoute(
    name: "DefaultApi",
    routeTemplate: "api/{controller}/{id}",
    defaults: new { id = RouteParameter.Optional }
);

Running the project and navigating to ~/api/values will display a list of the values in XML Format. I removed the XML namespacing to keep things simple.

<ArrayOfString>
    <string>value1</string>
    <string>value2</string>
</ArrayOfString>

If you change the Accept Header so that you will only accept JSON, the same controller action will send the values via JSON instead.

["value1","value2"]

Web API Controller Class - ApiController in ASP.NET MVC 4

Creating a new Web API Controller Class is as simple as using the Add Controller Recipe in ASP.NET MVC 4 and choosing the Empty API controller Tempate.



Or, you could just create one via Add Item which has a new Web API Controller Class as an option.

I created a simple ProductsController that handles all the CRUD options for products in a mythical e-commerce website.

public class ProductsController : ApiController {
    private readonly IRepository<Product> _repository;

    public ProductsController(IRepository<Product> repository) {
        _repository = repository;
    }

    public IEnumerable<Product> Get() {
        return _repository.Queryable();
    }

    public Product Get(int id) {
        var product = _repository.Get(id);

        if (product == null)
            throw new HttpResponseException(HttpStatusCode.NotFound);

        return product;
    }

    public HttpResponseMessage<Product> Post(Product product) {
        _repository.Add(product);

        var response = new HttpResponseMessage<Product>
            (product, HttpStatusCode.Created);
        response.Headers.Location = new Uri(Request.RequestUri,
            Url.Route(null, new {id = product.Id}));

        return response;
    }

    public Product Put(int id, Product product) {
        var existingProduct = _repository.Get(id);

        if (existingProduct == null)
            throw new HttpResponseException(HttpStatusCode.NotFound);

        _repository.Save(product);

        return product;
    }

    public HttpResponseMessage Delete(int id) {
        _repository.Delete(id);

        return new HttpResponseMessage(HttpStatusCode.NoContent);
    }
}

You can see that in some instances I am just returning a Product and in other instances I am returning a more informational HttpResponseMessage. For example, in the case of the Post of a new Product, I need to tell the REST Client the new location of the newly added product in the header. In other actions I am also throwing a HttpResponseException if the resource requested is not found. Validation, Logging, and other concerns are being done in various ActionFilters just like in your normal ASP.NET MVC Projects. Try to pull those cross-cutting concerns out of the main logic as much as possible.

ASP.NET Web API OData Syntax for Paging and Querying

If you want to enable various paging and querying of products you can make a slight change to the Get ApiController Action and return an IQueryable<Product> as opposed to IEnumerable<Product>.

public IQueryable<Product> Get() {
    return _repository.Queryable();
}

Now from your browser you can add paging, filtering, sorting, and other options to shape the data. Here is an example call that does paging and sorting.

api/products?$skip=2&$top=2&$orderby=Title

The XML Response by the browser is:

<ArrayOfProduct>
    <Product>
        <Id>3</Id>
        <Title>RipStik</Title>
        <Price>69.00</Price>
    </Product>
    <Product>
        <Id>4</Id>
        <Title>Shred Sled</Title>
        <Price>49.00</Price>
    </Product>
</ArrayOfProduct>

Or the JSON Response:

[{"Id":3,"Price":69.00,"Title":"RipStik"},
{"Id":4,"Price":49.00,"Title":"Shred Sled"}]

Conclusion

ASP.NET Web API integration with ASP.NET MVC 4 is really slick. Now you can easily create an API for your website using the new ApiController Base Class to respond to REST Clients.

Many times we need to create a menu for a simple application. We ususally get stuck on how to bind the menu. Here in this article we you will learn how to bind menu and sub menu dynamically in ASP.NET MVC from database using linq.

Step 1
I am going to create a database which contains the following fields as well as some dummy data which contains parent & child relationship.
Use the below script to create table & insert query,
    USE [Dynamic_Menu] 
    GO 
    SET ANSI_NULLS ON 
    GO 
    SET QUOTED_IDENTIFIER ON 
    GO 
    SET ANSI_PADDING ON 
    GO 
    CREATE TABLE [dbo].[Menu_List]( 
        [M_ID] [int] IDENTITY(1,1) NOT NULL, 
        [M_P_ID] [int] NULL, 
        [M_NAME] [varchar](50) NULL, 
        [CONTROLLER_NAME] [varchar](50) NULL, 
        [ACTION_NAME] [varchar](50) NULL, 
     CONSTRAINT [PK_Menu_List] PRIMARY KEY CLUSTERED  
    ( 
        [M_ID] ASC 
    )WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY] 
    ) ON [PRIMARY] 
    GO 
    SET ANSI_PADDING OFF 
    GO 
    SET IDENTITY_INSERT [dbo].[Menu_List] ON 
    INSERT [dbo].[Menu_List] ([M_ID], [M_P_ID], [M_NAME], [CONTROLLER_NAME], [ACTION_NAME]) VALUES (1, 0, N'My Menu', NULL, NULL) 
    INSERT [dbo].[Menu_List] ([M_ID], [M_P_ID], [M_NAME], [CONTROLLER_NAME], [ACTION_NAME]) VALUES (2, 1, N'BCS', N'Menu', N'BCS_Action') 
    INSERT [dbo].[Menu_List] ([M_ID], [M_P_ID], [M_NAME], [CONTROLLER_NAME], [ACTION_NAME]) VALUES (3, 2, N'Computer', N'Menu', N'Computer_Action') 
    INSERT [dbo].[Menu_List] ([M_ID], [M_P_ID], [M_NAME], [CONTROLLER_NAME], [ACTION_NAME]) VALUES (4, 1, N'MCS', N'Menu', N'MCS_Action') 
    INSERT [dbo].[Menu_List] ([M_ID], [M_P_ID], [M_NAME], [CONTROLLER_NAME], [ACTION_NAME]) VALUES (5, 2, N'Maths', N'Menu', N'Maths_Action') 
    INSERT [dbo].[Menu_List] ([M_ID], [M_P_ID], [M_NAME], [CONTROLLER_NAME], [ACTION_NAME]) VALUES (6, 4, N'Marketing', N'Menu', N'Marketing_Action') 
    INSERT [dbo].[Menu_List] ([M_ID], [M_P_ID], [M_NAME], [CONTROLLER_NAME], [ACTION_NAME]) VALUES (7, 4, N'Finiance', N'Menu', N'Finiance_Action') 
    SET IDENTITY_INSERT [dbo].[Menu_List] OFF

Step 2
Now create simple MVC appliation using visual studio. After creating project add edmx file by right clicking on project go to Add => New Item => (from right side templates) select Data => Select ADO.NET Entity Data Model => Give proper name to it and click on add button.

Then select your table from database & create .edmx file into your ptoject. After adding the file autmatically connection string will get added into web config file.

Step 3
Now create model as below and add some properties; this model will be used into a controller & view.
    using System; 
    using System.Collections.Generic; 
    using System.Linq; 
    using System.Web; 
     
    namespace Dynamic_Menu.Models 
    { 
        public class Menu_List 
        { 
            public int M_ID { get; set; } 
            public int? M_P_ID { get; set; } 
            public string M_NAME { get; set; } 
            public string CONTROLLER_NAME { get; set; } 
            public string ACTION_NAME { get; set; } 
        } 
    } 

Step 4
Now add controller into our application and write below code into it. From action method GetMenuList() we will get data from our database using linq query.
    using System; 
    using System.Collections.Generic; 
    using System.Linq; 
    using System.Web; 
    using System.Web.Mvc; 
     
    namespace Dynamic_Menu.Controllers 
    { 
        public class HomeController : Controller 
        { 
            MenuEntities objEntity = new MenuEntities(); 
            public ActionResult Index() 
            { 
                return View();         
            } 
            public ActionResult GetMenuList() 
            { 
                try 
                { 
                    var result = (from m in objEntity.Menu_Tree 
                                  select new Dynamic_Menu.Models.Menu_List 
                                  { 
                                      M_ID = m.M_ID, 
                                      M_P_ID = m.M_P_ID, 
                                      M_NAME = m.M_NAME, 
                      CONTROLLER_NAME = CONTROLLER_NAME, 
                                      ACTION_NAME = ACTION_NAME, 
                                  }).ToList(); 
                    return View("Menu", result); 
                } 
                catch (Exception ex) 
                { 
                    var error = ex.Message.ToString(); 
                    return Content("Error"); 
                }  
            } 
        } 
    }

Step 5
Now create a view for Index action method as like.
    @{ 
        ViewBag.Title = "Index"; 
        Layout = "~/Views/Shared/_Layout.cshtml"; 
    } 
     
    <h2>Index</h2>

Now create layout view for our application. Also create one partial view (name Menu.cshtml) as brlow,  which will render menu tree list when we are going to call action method from our layout page. In this partial view we are getting data into a IEnumerable list format and we are applying some logic as below,

Note
This is just demo / sample application, according to your requirement you can add foreach loop for more hierarchy levels. This is only a two level menu tree strucure.
_Layout.cshtml  =>

    <!DOCTYPE html> 
     
    <html> 
    <head> 
        <meta name="viewport" content="width=device-width" /> 
        <title>@ViewBag.Title</title> 
        @Html.Action("GetMenuList", "Home") 
    </head> 
    <body> 
        <div> 
            @RenderBody() 
        </div> 
    </body> 
    </html>

 Menu.cshtml =>

    @model IEnumerable<Dynamic_Menu.Models.Menu_List> 
    <div> 
        <ul> 
            @{foreach (var item in Model.Where(s => s.M_P_ID == 0).GroupBy(Obj => new { Obj.M_ID }).Distinct().ToList()) 
            { 
                <li> 
                    <a href="#"> 
                        @item.FirstOrDefault().M_NAME 
                    </a> 
                    <ul> 
                        @{foreach (var firstItem in (Model.Where(s => s.M_P_ID == item.FirstOrDefault().M_ID).ToList())) 
                        { 
                            <li> 
                                <a href="#"> 
                                    @firstItem.M_NAME 
                                </a> 
                                <ul> 
                                    @foreach (var secondItem in (Model.Where(s => s.M_P_ID == firstItem.M_ID).ToList())) 
                                    { 
                                        <li> 
                                            <a href="/@secondItem.CONTROLLER_NAME/@secondItem.ACTION_NAME"> 
                                                @secondItem.M_NAME 
                                            </a> 
     
                                        </li> 
                                    } 
                                </ul> 
     
                            </li> 
                        } 
                        } 
                    </ul> 
                </li> 
            } 
            } 
        </ul> 
    </div> 

Step 5
Now create another controller to render views whenever we are clicking on hyper links from menu, it will redirect to that view by using controller name & action name
    namespace Dynamic_Menu.Controllers 
    { 
        public class MenuController : Controller 
        { 
    public ActionResult Computer_Action() 
            { 
                return View(); 
            } 
            public ActionResult Maths_Action() 
            { 
                return View(); 
            } 
            public ActionResult Marketing_Action() 
            { 
                return View(); 
            } 
            public ActionResult Finiance_Action() 
            { 
                return View(); 
            } 
     
     } 
    }

Create some views for above action as like
 
View For Computer_Action as,
    @{ 
        Layout = "~/Views/Shared/_Layout.cshtml"; 
    } 
     
    <!DOCTYPE html> 
     
    <html> 
    <head> 
        <meta name="viewport" content="width=device-width" /> 
        <title>Computer_Action</title> 
    </head> 
    <body> 
        <div>  
            <h2>Welcome To Computer View</h2> 
        </div> 
    </body> 
    </html>

View For MCS_Action as
@{ 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 
 
<!DOCTYPE html> 
 
<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>MCS_Action</title> 
</head> 
<body> 
    <div>  
        <h2>Welcome To MCS View</h2> 
    </div> 
</body> 
</html> 

Step 6
Now run the application.
Index view after running the application into a browser.

If we click on menu   then our output will be:

In this article, you learned how to bind menu and sub menu dynamically in ASP.NET MVC from database using linq.

We often think that one technology will be totally replaced by a new release or new version of technology. This article tries to dicuss that and similar issues and I will share my industry experience, not just what I have seen in India (the largest IT Solutions Provider to the world) but also in the USA.

I consider this to be a very hot topic and a good candidate of debate but I will try to share my thoughts on such a burning topic. This article does not highlight or defame any technology, I am just going to provide my perspective as I have seen, experienced and advised to various clients and software teams.

Why new Versions

The principle “Change is Constant” applies very well to the software industry and I respect this overflow of information. Because this gives me reason to “Keep Learning and stay ahead of the Curve”. By saying so I didn't mean that someone must learn anything and everything you can get your hands on. No, certainly not, but before I explain this any further let's take a step back and understand “Why new Versions” keep coming.

We are fortunate that we have seen complete transition of the software industry from Desktop to Web to Mobile, future generations may not witness this great and life changing shift. Also, I recall my days when I was working and studying software in 1995, no one imagined that there will be MVC, WPF, WCF, so many versions of .NET and SQL Server and so on. Industry was happy with Microsoft Access, FoxPro, C, C++ and Oracle and so on. But our needs keep changing, they evolved and then shell is broken to have huge expansion and today we have many kinds of software technology and server products from client-side to server-side to mobile and hand-held and many more. We moved from on premise to the Cloud and Machine Learning is helping to dictate patterns and suggest needs.

This is why software companies keep building the latest and newest technologies to enable and empower the world to build for the future. When they release a version of a technology or language and they discover some issues or new features in that then they release newer versions and this in a chain-reaction process and it will not stop.

Oh, then I will die Learning

As per Darwin's Evolution Theory “Survival of the Fittest”, "fit" refers to "best adapted to the current environment". Here you simply replace environment with the software industry. I am one of you and I am not saying that everyone must learn everything but what I suggest is to stick to your technology of choice and have good knowledge of the offered tools and technologies and various versions and when to use which one.

Also, you don't necessarily need to understand every single thing. For example, I only focus on .NET and related technologies, if anything falls beyond this area then I am not bothered. To be more precise, I don't understand Microsoft CRM, SharePoint, System Center, SQL Server Database Administration and few more things like that.

But this is not my weak point because “I continue to build my .NET Muscle” and continue to learn about what helps me build Enterprise solutions using Microsoft .NET.

So choose your area of interest and where you have invested and then keep learning in a similar field and then you will no longer find it challenging because if you observe, new versions come after every few years and that must be otherwise it will be no fun!

Hmm, so Isn't MVC Replacing ASP.NET Web Forms

Such decisions are not final and have no concrete answers. Yes, the industry changes their needs and so new technologies such as MVC and WPF takes over. This definitely doesn't mean that ASP.NET Web Forms is replaced or it's dead. If you understand the Microsoft Web fundamentals, MVC is based on ASP.NET and industry is trying to shift as and when they can from Web Forms to MVC and reap the benefits it offers.

Did you know that MVC is much older than ASP.NET? Yes, ASP.NET 1.0 was released in 2002 and MVC was created in 1979 originally named as “Thing-Model-View-Controller” but later simplified to be known as MVC.

In my view I consider that there are now two technologies to build Web Solutions using Microsoft and based on your needs you can pick one that works well for you. Usually such technology selections are made by architects assigned to the project.

So there is no such Golden Rule that every new or existing application must be either created using MVC or migrated to MVC because MVC is the latest and future the of web. Though it is.

Architectural Thinking: Brownfield Vs Greenfield Applications

All software applications you have worked or will work in future are either Brownfield or Greenfield.

• Brownfield Development: When any existing or legacy applications need to have new features or changes to address business needs, it is known as brownfield. In such situations, unless you are building a new module or component, you have less, limited or no scope to use new architectural styles, patterns and so on. The very reason of such limitations is because those old applications are built using an old version of technologies and the latest versions of one technology/framework and many are not be compatible with old versions.
  
• Greenfield Development: When a brand-new project is being envisioned and no previous work is done in that or a related area then it's called Greenfield. In the software industry it doesn't happen very often. But whenever it happens its the architect's responsibility to determine what the best technology is to address business needs.

Hence, it's not appropriate to say that because MVC is so new hence every new web application must be made using MVC or if WPF is available in addition to Windows Forms so every desktop application must be made using WPF. Whatever is the case neither ASP.NET Web Forms nor Windows Forms can be totally ignored.

Why and Why not the Latest Technologies should be chosen

First the reasons why not.

1. It's Brownfield and new technology doesn't fit anywhere.
2. If new technology or versions are introduced then it will cause many build errors due to outdated references of non-supported library references.
3. Business goals and software quality are not compromised by continuing to use current and available technologies like ASP.NET Web Forms over MVC or Windows Forms over WPF.
4. You are not investing money in any extra off-the-shelf tools to handle issues that could have been handled by the latest versions of similar area of technologies, for example MVC instead of ASP.NET Web Forms, or WPF over Windows Forms.
5. Teams often might not have a certain skill set that allows them to proceed with development using new technology options
6. Budget allocation from a client often may impact your decision to use and develop using the latest technologies.
7. If the core/bestselling features of a new candidate technology (MVC or WPF) are not being used at least up to 50% then you have done nothing.
8. Considering how soon the client and business wants to have an application ready, it turns being a major factor to dictate the technology of choice.
9. The client and business doesn't care how you do it; what matters is the end-result and a workable / good-enough software.
10. No way to use old legacy downstream applications with the latest available technologies.

Why develop using Latest Technologies

1. Greenfield software solution and no legacy or old piece of code is being used.
2. Focus is more on Robustness, Testability, Object Oriented design and quality. (This doesn't mean previous technology can't accomplish these; it's about ease and in-built features and offerings).
3. Amazing team with great skills to learn new technologies and adapt the changes.
4. Company's vision is to showcase products build using latest technologies.
5. Client themselves want the solution to be developed using latest technologies and have budget to support that.

Why MVC over ASP.NET Web Forms then

Note: this section assumes that you are aware of MVC benefits and the general technical terms used below.

1. Separation of Concerns is the core of MVC.
2. Single Responsibility Principle is done by default.
3. Unified and even better framework to work on WebAPI, Mobile, HTML 5, CSS3, Security and Deployment (including Azure).
4. Unit testing is easily done to have stable, robust and quality software solutions delivered continuously.
5. Fast screen generation for CRUD operations via Scaffolding.
6. Convention over configuration.

Summary
Based on my experience as an architect in the industry I would like to summarize that it's very hard for any organization to keep up with the latest version and technologies all the time because by the time you become comfortable with one version the newer is around the corner. So if you are working on MVC 4, then see if you can learn and try some application being developed on your own. Or if you just happen to be in the ASP.NET Web Forms world until now then I would encourage you to try converting that application to MVC for your personal benefit. This will force you to learn new technology and apply that learning. If you have made some progress in that then in the next interview you can proudly showcase your MVC knowledge and say that you have migrated ASP.NET Web Forms to MVC.

Charts are an important aspect of reports as they make it simpler to understand a certain problem. Making charts clickable adds more reinforcement into the understanding of the problem.

Today, I shall be demonstrating clickable charts using Google Charts API in ASP.NET MVC5. Google Charts API is simple to use and provides a variety of options for customization of graphical chart reports for better analytical purposes.

Prerequisites
Following are some prerequisites before you proceed further in this tutorial.
Knowledge of Google charts API.
Knowledge of ASP.NET MVC5.
Knowledge of HTML.
Knowledge of JavaScript.
Knowledge of AJAX.
Knowledge of CSS.
Knowledge of Bootstrap.
Knowledge of C# programming.
Knowledge of C# LINQ.
Knowledge of jQuery.

You can download the complete source code for this tutorial or you can follow the step by step discussion below. The sample code is developed in Microsoft Visual Studio 2015 Enterprise. I am using SalesOrderDetail table extracted from Adventure Works Sample Database.

Let's begin now.

Step 1
Create a new MVC5 web application project and name it "Graphs".

Step 2
Open "Views\Shared\_Layout.cshtml" file and replace the following code in it.
<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>@ViewBag.Title</title> 
    @Styles.Render("~/Content/css") 
    @Scripts.Render("~/bundles/modernizr") 
 
    <!-- Font Awesome --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" /> 
 
    @* Custom *@ 
    @Styles.Render("~/Content/css/custom-style") 
</head> 
<body> 
    <div class="navbar navbar-inverse navbar-fixed-top"> 
        <div class="container"> 
            <div class="navbar-header"> 
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
                    <span class="icon-bar"></span> 
                    <span class="icon-bar"></span> 
                    <span class="icon-bar"></span> 
                </button> 
            </div> 
        </div> 
    </div> 
    <div class="container body-content"> 
        @RenderBody() 
        <hr /> 
        <footer> 
            <center> 
                <p><strong>Copyright © @DateTime.Now.Year - <a href="http://www.asmak9.com/">Asma's Blog</a>.</strong> All rights reserved.</p> 
            </center> 
        </footer> 
    </div> 
 
    @Scripts.Render("~/bundles/jquery") 
    @Scripts.Render("~/bundles/bootstrap") 
 
    <!-- Graphs --> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    @Scripts.Render("~/bundles/Script-custom-graphs") 
 
    @RenderSection("scripts", required: false) 
</body> 
</html>

In the above code, I have simply created the basic layout structure of this web project and I have also add reference to the Google charts API.

Step 3
Create a new "Models\HomeViewModels.cs" file and replace with the following code in it.
using System.Collections.Generic; 
using System.ComponentModel.DataAnnotations; 
 
namespace Graphs.Models 
{ 
    public class SalesOrderDetail 
    { 
        public int Sr { get; set; } 
        public string OrderTrackNumber { get; set; } 
        public int Quantity { get; set; } 
        public string ProductName { get; set; } 
        public string SpecialOffer { get; set; } 
        public double UnitPrice { get; set; } 
        public double UnitPriceDiscount { get; set; } 
        public string Link { get; set; } 
    } 
}

In the above code, we have simply created our View Model which will map the data from text file into main memory as object. Also, notice that we have added "Link" property, which we will use as our clickable destination.

Step 4

Now, create "Controllers\HomeController.cs" file and replace the following code in it.
using Graphs.Models; 
using System; 
using System.Collections.Generic; 
using System.IO; 
using System.Linq; 
using System.Reflection; 
using System.Web; 
using System.Web.Mvc; 
 
namespace Graphs.Controllers 
{ 
    public class HomeController : Controller 
    { 
        #region Index method 
 
        /// <summary> 
        /// GET: Home/Index method. 
        /// </summary> 
        /// <returns>Returns - index view page</returns>  
        public ActionResult Index() 
        { 
            // Info. 
            return this.View(); 
        } 
 
        #endregion 
 
        #region Test Page method 
 
        /// <summary> 
        /// GET: Home/TestPage method. 
        /// </summary> 
        /// <returns>Returns - test page view page</returns>  
        public ActionResult TestPage() 
        { 
            // Info. 
            return this.View(); 
        } 
 
        #endregion 
 
        #region Get data method. 
 
        /// <summary> 
        /// GET: /Home/GetData 
        /// </summary> 
        /// <returns>Return data</returns> 
        public ActionResult GetData() 
        { 
            // Initialization. 
            JsonResult result = new JsonResult(); 
 
            try 
            { 
                // Loading. 
                List<SalesOrderDetail> data = this.LoadData(); 
 
                // Setting. 
                var graphData = data.GroupBy(p => new 
                                    { 
                                        p.ProductName, 
                                        p.Link, 
                                        p.UnitPrice 
                                    }) 
                                    .Select(g => new 
                                    { 
                                        g.Key.ProductName, 
                                        g.Key.Link, 
                                        g.Key.UnitPrice 
                                    }).OrderByDescending(q => q.UnitPrice).ToList(); 
 
                // Top 10 
                graphData = graphData.Take(2).Select(p => p).ToList(); 
 
                // Loading drop down lists. 
                result = this.Json(graphData, JsonRequestBehavior.AllowGet); 
            } 
            catch (Exception ex) 
            { 
                // Info 
                Console.Write(ex); 
            } 
 
            // Return info. 
            return result; 
        } 
 
        #endregion 
 
        #region Helpers 
 
        #region Load Data 
 
        /// <summary> 
        /// Load data method. 
        /// </summary> 
        /// <returns>Returns - Data</returns> 
        private List<SalesOrderDetail> LoadData() 
        { 
            // Initialization. 
            List<SalesOrderDetail> lst = new List<SalesOrderDetail>(); 
 
            try 
            { 
                // Initialization. 
                string line = string.Empty; 
                string srcFilePath = "Content/files/SalesOrderDetail.txt"; 
                var rootPath = Path.GetDirectoryName(Assembly.GetExecutingAssembly().CodeBase); 
                var fullPath = Path.Combine(rootPath, srcFilePath); 
                string filePath = new Uri(fullPath).LocalPath; 
                StreamReader sr = new StreamReader(new FileStream(filePath, FileMode.Open, FileAccess.Read)); 
 
                // Read file. 
                while ((line = sr.ReadLine()) != null) 
                { 
                    // Initialization. 
                    SalesOrderDetail infoObj = new SalesOrderDetail(); 
                    string[] info = line.Split(','); 
 
                    // Setting. 
                    infoObj.Sr = Convert.ToInt32(info[0].ToString()); 
                    infoObj.OrderTrackNumber = info[1].ToString(); 
                    infoObj.Quantity = Convert.ToInt32(info[2].ToString()); 
                    infoObj.ProductName = info[3].ToString(); 
                    infoObj.SpecialOffer = info[4].ToString(); 
                    infoObj.UnitPrice = Convert.ToDouble(info[5].ToString()); 
                    infoObj.UnitPriceDiscount = Convert.ToDouble(info[6].ToString()); 
                    infoObj.Link = this.Url.Action("TestPage", "Home"); 
 
                    // Adding. 
                    lst.Add(infoObj); 
                } 
 
                // Closing. 
                sr.Dispose(); 
                sr.Close(); 
            } 
            catch (Exception ex) 
            { 
                // info. 
                Console.Write(ex); 
            } 
 
            // info. 
            return lst; 
        } 
 
        #endregion 
 
        #endregion 
    } 
}

In the above code, I have created a simple index() & TestPage() action methods along with a helper method LoadData() for data loading from text file and finally, GetData() action method which will be called by Google charts API AJAX method in order to map the data on the chart. The GetData() action method will return top the top two rows only which are sorted by product and unit price and grouped by product name.

Step 5
Create a new "Scripts\script-custom-graphs.js" script file and replace the following code in it.
// Load the Visualization API and the piechart package. 
google.load('visualization', '1.0', { 'packages': ['corechart'] }); 
 
// Set a callback to run when the Google Visualization API is loaded. 
$(document).ready(function () 
{ 
    $.ajax( 
    { 
        type: 'POST', 
        dataType: 'JSON', 
        url: '/Home/GetData', 
        success: 
            function (response) 
            { 
                // Set chart options 
                var options = 
                    { 
                        width: 1100, 
                        height: 900, 
                        sliceVisibilityThreshold: 0, 
                        legend: { position: "top", alignment: "end" }, 
                        chartArea: { left: 370, top: 50, height: "90%" }, 
 
                        bar: { groupWidth: "50%" }, 
                    }; 
 
                // Draw. 
                drawGraph(response, options, 'graphId'); 
            } 
    }); 
}); 
 
// Callback that creates and populates a data table, 
// instantiates the pie chart, passes in the data and 
// draws it. 
function drawGraph(dataValues, options, elementId) { 
    // Initialization. 
    var data = new google.visualization.DataTable(); 
 
    // Setting. 
    data.addColumn('string', 'Product Name'); 
    data.addColumn('number', 'Unit Price'); 
    data.addColumn('string', 'Link'); 
 
    // Processing. 
    for (var i = 0; i < dataValues.length; i++) 
    { 
        // Setting. 
        data.addRow([dataValues[i].ProductName, dataValues[i].UnitPrice, dataValues[i].Link]); 
    } 
 
    // Setting label. 
    var view = new google.visualization.DataView(data); 
    view.setColumns([0, 1, 
        { 
            calc: "stringify", 
            sourceColumn: 1, 
            type: "string", 
            role: "annotation" 
        } 
    ]); 
 
    // Instantiate and draw our chart, passing in some options. 
    var chart = new google.visualization.ColumnChart(document.getElementById(elementId)); 
 
    // Draw chart. 
    chart.draw(view, options); 
 
    // Link interaction. 
    var selectHandler = function (e) 
    { 
        // Verification. 
        if (chart.getSelection() != null && 
             chart.getSelection()[0] != null && 
             chart.getSelection()[0]['row'] != null && 
             chart.getSelection().length > 0) 
        { 
            if (chart.getSelection()[0]['column'] == 1) 
            { 
                // Setting. 
                var link = data.getValue(chart.getSelection()[0]['row'], 2) 
                window.open(link, '_blank'); 
            } 
        } 
    } 
 
    // Add our selection handler. 
    google.visualization.events.addListener(chart, 'select', selectHandler); 
}

Let's break down the code chunk by chunk. First, I have loaded the Google Charts API charts visualization package.
// Load the Visualization API and the piechart package. 
google.load('visualization', '1.0', { 'packages': ['corechart'] });

Then, I call the GetData() server side method via AJAX call and after successfully receiving the data, I simply set the default chart options then pass those options to a user-define JavaScript method "drawGraph(...)".
// Set a callback to run when the Google Visualization API is loaded. 
$(document).ready(function () 
{ 
    $.ajax( 
    { 
        type: 'POST', 
        dataType: 'JSON', 
        url: '/Home/GetData', 
        success: 
            function (response) 
            { 
                // Set chart options 
                var options = 
                    { 
                        width: 1100, 
                        height: 900, 
                        sliceVisibilityThreshold: 0, 
                        legend: { position: "top", alignment: "end" }, 
                        chartArea: { left: 370, top: 50, height: "90%" }, 
                        hAxis: 
                            { 
                                slantedText: true, 
                                slantedTextAngle: 18 
                            }, 
                        bar: { groupWidth: "50%" }, 
                    }; 
 
                // Draw. 
                drawGraph(response, options, 'graphId'); 
            } 
    }); 
});

Now, in the below drawGraph(...) method code, I add three new columns per row, the zero column will be the name of the products which will be shown on the chart axis, the first column will be the unit price of the product which will be shown on the graph for each product. After adding the column metadata for the chart, I will convert the received data from the server into DataTables data type accepted by the chart. Then I will set the annotation option for the first chart column which will display the correspondent values on the chart columns per each product. Then, I will draw the ColumnChart by calling Google charts API method. Next, I add the selection handler which will map target link to the target chart display column. Finally, I add the listener event which will call our selection handler method and open the link in a new window as we have coded in the selection handler; i.e.:

// Callback that creates and populates a data table, 
// instantiates the pie chart, passes in the data and 
// draws it. 
function drawGraph(dataValues, options, elementId) { 
    // Initialization. 
    var data = new google.visualization.DataTable(); 
 
    // Setting. 
    data.addColumn('string', 'Product Name'); 
    data.addColumn('number', 'Unit Price'); 
    data.addColumn('string', 'Link'); 
 
    // Processing. 
    for (var i = 0; i < dataValues.length; i++) 
    { 
        // Setting. 
        data.addRow([dataValues[i].ProductName, dataValues[i].UnitPrice, dataValues[i].Link]); 
    } 
 
    // Setting label. 
    var view = new google.visualization.DataView(data); 
    view.setColumns([0, 1, 
        { 
            calc: "stringify", 
            sourceColumn: 1, 
            type: "string", 
            role: "annotation" 
        } 
    ]); 
 
    // Instantiate and draw our chart, passing in some options. 
    var chart = new google.visualization.ColumnChart(document.getElementById(elementId)); 
 
    // Draw chart. 
    chart.draw(view, options); 
 
    // Link interaction. 
    var selectHandler = function (e) 
    { 
        // Verification. 
        if (chart.getSelection() != null && 
             chart.getSelection()[0] != null && 
             chart.getSelection()[0]['row'] != null && 
             chart.getSelection().length > 0) 
        { 
            if (chart.getSelection()[0]['column'] == 1) 
            { 
                // Setting. 
                var link = data.getValue(chart.getSelection()[0]['row'], 2) 
                window.open(link, '_blank'); 
            } 
        } 
    } 
 
    // Add our selection handler. 
    google.visualization.events.addListener(chart, 'select', selectHandler); 
}

Step 6
Create "Views\Home\_ViewGraphPartial.cshtml" & "Views\Home\Index.cshtml" files and replace following code in it.
Views\Home\_ViewGraphPartial.cshtml
<section> 
    <div class="well bs-component"> 
        <div class="row"> 
            <div class="col-xs-12"> 
                <!-- CHART --> 
                <div class="box box-primary"> 
                    <div class="box-header with-border"> 
                        <h3 class="box-title custom-heading">Product wise Graph</h3> 
                    </div> 
                    <div class="box-body"> 
                        <div class="chart"> 
                            <div id="graphId" style="width: 1100px; height: 900px; margin:auto;"></div> 
                        </div> 
                    </div><!-- /.box-body --> 
                </div><!-- /.box --> 
            </div> 
        </div> 
    </div> 
</section>

View\Home\Index.cshtml
@{ 
    ViewBag.Title = "ASP.NET MVC5 - Clickable Google Charts"; 
} 
 
<div class="row"> 
    <div class="panel-heading"> 
        <div class="col-md-8  custom-heading3"> 
            <h3> 
                <i class="fa fa-pie-chart"></i> 
                <span>ASP.NET MVC5 - Clickable Google Charts</span> 
            </h3> 
        </div> 
    </div> 
</div> 
 
<div class="row"> 
    <section class="col-md-12 col-md-push-0"> 
        @Html.Partial("_ViewGraphPartial") 
    </section> 
</div>

In the above code, I have simply created the view code for the page which will display the chart. I have divided the page into two parts for better manageability.

Step 7
Now, create new "Views\Home\TestPage.cshtml" file and replace following code in it.
@{ 
    ViewBag.Title = "ASP.NET MVC5 - Clickable Google Charts"; 
} 
 
<div class="row"> 
    <div class="panel-heading"> 
        <div class="col-md-8  custom-heading3"> 
            <h3> 
                <i class="fa fa-pie-chart"></i> 
                <span>ASP.NET MVC5 - Clickable Google Charts</span> 
            </h3> 
        </div> 
    </div> 
</div> 
 
<div class="row"> 
    <section class="col-md-12 col-md-push-0"> 
        <div class="well bs-component"> 
            <div class="row"> 
                <div class="col-xs-12"> 
                    <h1>Hello! I am Clickable Test Page</h1> 
                </div> 
            </div> 
        </div> 
    </section> 
</div>

In the above code, I have simply added a new page structure for the chart click event target.

HostForLIFE.eu ASP.NET MVC 6 Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.