I am new to MVC3 and I am trying to figure out how to use dotnet.highcharts. BTW I have read several post and none seem to help. I have tried to use the simple examples that accompanied the download from codeplex. I can't even get that to work even by copying and pasting. I hardly register with forums, I mainly just search for answers. I usually don't have much trouble and I feel bad that I have to ask a question like this, but I need help. All I want to do is to simply create a chart. I will post my code any help will be appreciated.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using DotNet.Highcharts.Options;
using DotNet.Highcharts.Helpers;
using DotNet.Highcharts.Enums;
using DotNet.Highcharts;
namespace MyProject.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.Message = "Welcome to ASP.NET MVC!";
return View();
}
public ActionResult About()
{
return View();
}
public ActionResult PartialChart()
{
Highcharts chart = new Highcharts("chart")
.InitChart(new Chart { DefaultSeriesType = ChartTypes.Bar })
.SetTitle(new Title { Text = "Stacked bar chart" })
.SetXAxis(new XAxis { Categories = new[] { "Apples", "Oranges", "Pears", "Grapes", "Bananas" } })
.SetYAxis(new YAxis
{
Min = 0,
Title = new YAxisTitle { Text = "Total fruit consumption" }
})
.SetTooltip(new Tooltip { Formatter = "function() { return ''+ this.series.name +': '+ this.y +''; }" })
.SetPlotOptions(new PlotOptions { Bar = new PlotOptionsBar { Stacking = Stackings.Normal } })
.SetSeries(new[]
{
new Series { Name = "John", Data = new Data(new object[] { 5, 3, 4, 7, 2 }) },
new Series { Name = "Jane", Data = new Data(new object[] { 2, 2, 3, 2, 1 }) },
new Series { Name = "Joe", Data = new Data(new object[] { 3, 4, 4, 2, 5 }) }
});
return PartialView(chart);
}
}
}
This is the partialview:
#model DotNet.Highcharts.Highcharts
#(Model)
This is the index page:
#{
ViewBag.Title = "Home Page";
}
<h2>#ViewBag.Message</h2>
<p>
To learn more about ASP.NET MVC visit http://asp.net/mvc.
</p>
<p>
#Html.Action("PartialChart", "Home")
#Html.Partial("PartialChart")
</p>
And this is the master page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/highcharts.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="logindisplay">
#Html.Partial("_LogOnPartial")
</div>
<nav>
<ul id="menu">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
</ul>
</nav>
</header>
<section id="main">
#RenderBody()
</section>
<footer>
</footer>
</div>
</body>
</html>
With the help of a friend I have the answer. Just in case someone out there still cares. The problem was the reference to the Highcharts scripts. The scripts were located differently than listed in the example and being completely oblivous I didn't notice.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/Highcharts-2.2.1/js/highcharts.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="logindisplay">
#Html.Partial("_LogOnPartial")
</div>
<nav>
<ul id="menu">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
</ul>
</nav>
</header>
<section id="main">
#RenderBody()
</section>
<footer>
</footer>
</div>
</body>
</html>
Related
I am new to AngularJS and i need your help. I have created a JSON file which consists of a list of items inside another list. I want to access the items in the second list but I don't know how. I have searched all day in the Internet but I hardly found anything useful. Please help me. Below is my code:
categoryItems.json
[
{
"$id":"1",
"name":"Business",
"cat":[
{
"cname":"CyberSecurity",
"img":"img3_1.jpg",
"cat_kurs":"7-course specialization",
"txt":"Rice University"
},
{
"cname":"Google Cloud Platform for Systems Operations",
"img":"img3_2.jpg",
"cat_kurs":"6-course specialization",
"txt":"University of California"
},
{
"cname":"Data Security",
"img":"img3_1.jpg",
"cat_kurs":"7-course specialization",
"txt":"Rice University"
}
]
},
{
"$id":"2",
"name":"Foreign Language",
"cat":[
{
"cname":"Data Security",
"img":"img3_1.jpg",
"cat_kurs":"7-course specialization",
"txt":"Rice University"
},
{
"cname":"Google Cloud",
"img":"img3_2.jpg",
"cat_kurs":"3-course specialization",
"txt":"University of California"
}
]
}
]
script.js
var myItemsApp = angular.module('myItemsApp', []);
myItemsApp.factory('itemsFactory', ['$http', function($http){
var itemsFactory ={
itemDetails: function() {
return $http(
{
url: "categoryItems.json",
method: "GET",
})
.then(function (response) {
return response.data;
angular.forEach(data.itemDetails, function(item) {
});
});
}
};
return itemsFactory;
}]);
myItemsApp.controller('ItemsController', ['$scope', 'itemsFactory', function($scope, itemsFactory){
var promise = itemsFactory.itemDetails();
promise.then(function (data) {
$scope.itemDetails = data;
console.log(data);
});
$scope.select = function(item) {
$scope.selected = item;
};
$scope.selected = {};
}]);
index.html
<!DOCTYPE html>
<html ng-app="myItemsApp">
<head>
<meta charset="utf-8" />
<title>Test</title>
<!-- <link data-require="bootstrap-css" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />-->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen" />
<link href="css/bootstrap-theme.min.css" rel="stylesheet" media="screen"/>
<script src="js/angular.min.js"></script>
<script src="js/angular.js"></script>
<script src="script.js"></script>
<style>
span.el{
background-color:#85929E;
font-size: xx-small;
font-color: #FDFEFE;
width: 60px;
}
span.txt{
font-size:xx-small;
}
div.cat{
background-color:#F2F3F4 ;
}
</style>
</head>
<body>
<div ng-controller="ItemsController">
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<ul class="list-group">
<a class="list-group-item" ng-click="select(item)" ng-repeat="item in itemDetails">{{item.name}}</a>
</ul>
</div>
</div>
<div class="col-md-8">
<div class="panel panel-default" style="width: 70%">
<div class="panel-heading">{{selected.name}}</div>
<div class="panel-body">
<div ng-repeat="subcat in item.cat ">
{{subcat.cname}}
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Please HELP ME.
Looks like you need todo another ng-repeat on the sub categories.
<div class="col-md-8" ng-show="selected.name.length">
<div class="panel panel-default" style="width: 70%">
<div class="panel-heading">{{selected.name}}</div>
<div class="panel-body">
<div ng-repeat="subcat in itemDetails | filter:{name:selected.name}">
<div ng-repeat="cat in subcat.cat">
{{cat.cname}}
</div>
</div>
</div>
</div>
Have a look at this example ive mocked up for you
You need to deserialize the response using angular.fromJson
more reference: https://docs.angularjs.org/api/ng/function/angular.fromJson
LAYOUT:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/bootstrap")
#Scripts.Render("~/bundles/modernizr")
<link rel="Stylesheet" href="../../Content/bootstrap.min.css" />
<link rel="Stylesheet" href="../../Content/bootstrap-theme.min.css" />
</head>
#*<body style="background-image: url(../../Content/Images/old-paper.jpg)">*#
<body style="background-color: #EEE">
#*---- WEB PAGE ---- *#
<div class="wrap-middle">
#*---- TITLE OF THE WEBSITE ----*#
<div class="container-fluid" style="width: 100%; background-image: url('/Content/Images/Header.bmp')">
<div>
<h1>
ONLINE VOTING SYSTEM</h1>
</div>
</div>
#*---- BODY SECTION ----*#
<div class="jumbotron">
<div class="container">
#RenderBody()
</div>
</div>
<div class="navbar navbar-inverse navbar-fixed-bottom" style="box-shadow: 0 0 20px black;">
<div class="container-fluid" style="color: Yellow">
Copyright <sup><span class="glyphicon glyphicon-copyright-mark"></span></sup>2014.
</div>
</div>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")
#Scripts.Render("~/bundles/jqueryval")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
VIEW:
#model IEnumerable<Online_Voting_System_site.DAL.tbl_candidate>
#{
ViewBag.Title = "CandidateApproval";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#Ajax.ActionLink("Approve",
"ApproveCandidate",
new { _CandidateID = item.CandidateID },
new AjaxOptions { UpdateTargetId = item.CandidateID.ToString() },
new { #id = item.CandidateID.ToString(), #class = "btn btn-sm btn-success" })
ACTION METHOD:
public string ApproveVoter(string ID)
{
/* Logic is hidden.I use that ID parameter in here */
return "Approved";
}
I'm trying to change button text by calling action method using
ajax.actionlink. That action method is returning a string as button ID
but it displayed in new page.
Edit: The string should the text of the button. But the text is getting displayed in a new page.
I got a jquery reference in my _Layout.cshtml . It does not look like this is working in my Index.cshtml page though: the /Home/GetSquareRoot is not hit? (it works when I uncomment the jquery reference in the index.cshtml though)
ViewStart.cshtml
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
Index.cshtml
#{
ViewBag.Title = "Home Page";
}
<h2>#ViewBag.Message</h2>
<p>
To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">
http://asp.net/mvc</a>.
</p>
#*<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>*#
<script type="text/javascript">
function calculateSquareRoot(numberToCalculate) {
$.ajax({
type: 'GET',
url: '/Home/GetSquareRoot',
data: { number: numberToCalculate },
success: function (data) { alert(data.result); }
});
}
</script>
<button type="button" onclick="calculateSquareRoot(9);">
Calculate Square</button>
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.5.1-vsdoc.js" type="text/javascript"></script>
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="logindisplay">
#Html.Partial("_LogOnPartial")
</div>
<nav>
<ul id="menu">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
</ul>
</nav>
</header>
<section id="main">
#RenderBody()
</section>
<footer>
</footer>
</div>
</body>
</html>
homecontroller
public JsonResult GetSquareRoot(long number)
{
var square = Math.Sqrt(number);
return Json(new { result = square }, JsonRequestBehavior.AllowGet);
}
It works when you have the jQuery reference commented out, because your _Layout.cshtml file has the reference as well (just stating the facts, I realise you probably know this).
This also means that you have your routing set up correctly and that there is nothing wrong with the URL '/Home/GetSquareRoot'
The code looks fine, the only unknown that I can see is that ../../Scripts/ actually goes to the same place as ~/Scripts/ (will depend on what the URL of your page looks like).
I would use Google Chrome to check for script errors on your page: go to your page, right click and 'inspect element' on the page, then check that you don't have any script errors (bottom right of the inspector will have a red circle if you do).
If you have script errors that could be stopping the AJAX call from running.
When referring to hard-coded content URLs in your application, it's always a good idea to use Url.Content.
So instead of this:
<script src="../../Scripts/jquery-1.5.1-vsdoc.js" type="text/javascript"></script>
use this:
<script src="#Url.Content("~/Scripts/jquery-1.5.1-vsdoc.js")" type="text/javascript"></script>
This way the correct URL to the jQuery script file will always be used, no matter what the URL of the page is.
Try out this one...
public JsonResult GetSquareRoot(long? number)
{
var square = Math.Sqrt(number);
return Json(new { result = square }, JsonRequestBehavior.AllowGet);
}
I am trying out knockoutjs at the moment, with my fairly rudimentary knowledge of javascript. I have set up a basic ASP.NET MVC 3 app for this purpose. Here's the snippet I set up in the Home/Index.cshtml view:
#if(false)
{
<script src="../../Scripts/jquery-1.6.3.js" type="text/javascript"></script>
<script src="../../Scripts/knockout-1.3.0beta.debug.js" type="text/javascript"></script>
}
#{
ViewBag.Title = "Home Page";
}
<script type="text/javascript">
var entryDataViewModel = {
registration: ko.observable("Registration"),
registeredName: ko.observable("Name"),
entryClass: ko.observable("Junior")
};
ko.applyBindings(entryDataViewModel);
</script>
<h2>#ViewBag.Message</h2>
<p>
Registration: <span data-bind="text: registration"></span><br />
Name: <span data-bind="text: registeredName"></span><br />
Class: <span data-bind="text: entryClass"></span><br />
To learn more about ASP.NET MVC visit http://asp.net/mvc.
</p>
For some weird reason nothing is showing, not even the default values. If I debug through Firebug the ViewModel is showing the properties as being empty too. Have I missed something here?
Many thanks,
Dany.
ADDED: the content of the _Layout.cshtml - it's all stock standard stuff, except for the addition of knockout, and using jquery 1.6.3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/knockout-1.3.0beta.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-1.6.3.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="logindisplay">
#Html.Partial("_LogOnPartial")
</div>
<nav>
<ul id="menu">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
</ul>
</nav>
</header>
<section id="main">
#RenderBody()
</section>
<footer>
</footer>
</div>
</body>
</html>
The answer I voted above only worked when I tried it in a plain webpage - not when I tried it in my MVC view. As it turned out I put the script block in the wrong position. I moved it to the end of the view, after the page elements have been processed. The other option is to wrap it within $(document).ready() then you can put the script block containing ViewModel and call to ko.applyBindings() anywhere you want...
use $(document).load(function(){:
<script type='text/javascript'>
//<![CDATA[
$(document).load(function(){
var entryDataViewModel = {
registration: ko.observable("Registration"),
registeredName: ko.observable("Name"),
entryClass: ko.observable("Junior")
};
ko.applyBindings(entryDataViewModel);
});
//]]>
</script>
Have a look: http://jsfiddle.net/S8Rh5/ - it works just fine.
Hi I have problem with my html helper extension method in razor view engine. I want to render SideMenu if I have any nodes to print:
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
</head>
#using MyNamespace.Helpers
<body>
<div id = "page" style = "width: 90%; margin: 0 auto" class="pageSection">
<div id="logo" class="pageSection">aaaa</div>
<div id = "LeftMenuContainer">
#{ if (ViewBag.Menu.LeftMenu.Count > 0)
{
Html.RenderSideMenu((ICollection<MyNamespace.MenuNode>)(ViewBag.Menu.LeftMenu));
}
}
</div>
<div id="content" class="pageSection">#RenderBody()</div>
<div id="footer" class="pageSection"></div>
</div>
</body>
</html>
and here's my method:
public static MvcHtmlString RenderSideMenu(this HtmlHelper helper, ICollection<MenuNode> nodes)
{
string result = "<h3>Menu</h3>";
result += "<ul class=\"SideMenu\">";
foreach (var node in nodes)
result += MenuRenderEngine.RenderNode(node);
result += "</ul>";
return MvcHtmlString.Create(result);
}
The problem is that method is executed and returns well prepared string but doesn't print it in view so I'm confused what did I wrong?
Use # if you want to output the result on the page:
<div id = "LeftMenuContainer">
#if (ViewBag.Menu.LeftMenu.Count > 0)
{
#Html.RenderSideMenu((ICollection<MyNamespace.MenuNode>)(ViewBag.Menu.LeftMenu));
}
</div>
Also, as a side note, don't use ViewBag, use view models instead.