I'm fairly new to ASP.NET (have been coding in WPF a long time, but new to ASP) and I'm trying to create a dashboard application that shows four pie charts. I've followed the instructions on this link, but I either get a chart on the entire page, or a broken image (as if the <img> source is not valid)
Can someone please explain to me how to achieve this behavior? I just want to display a simple pie chart on my page, that's it.
Thanks! (and sorry if this is a duplicated post, I've found other similar questions but none using the Razor syntax)
EDIT - Here's my code:
Index.cshtml:
<!DOCTYPE html>
<html>
<head>
<title>Chart Example</title>
</head>
<body>
<h1>Chart Example</h1>
<p>
The following chart is generated by the <em>ChartView.cshtml</em> file, but is shown
in this page.
</p>
<p><img src="ChartView.cshtml" /> </p>
</body>
</html>
My ChartView.cshtml: (located in the same folder as Index.cshtml)
#{
var myChart = new Chart(600, 400)
.AddTitle("Employees")
.AddSeries(chartType: "column",
xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" },
yValues: new[] { "2", "6", "4", "5", "3" });
if (myChart != null)
{
myChart.Write();
}
}
This is what I get on the browser:
You can't return a .cshtml file (unless you fiddle dangerously with various internal settings - not recommended).
You should be pointing to an action.
The easiest way to test this is by opening the src directly in the browser - in this case "ChartView.cshtml" and you should get a 404.
You'll need to add an action to your controller that returns the view.
public HomeController : Controller
{
public ActionResult ChartView()
{
return View();
}
then
<img src='#Url.Action("ChartView", "Home")' alt="Chart"/>
You can test this by opening in the browser:
/Home/ChartView
(this assumes that ChartView.cshtml is in the folder "Views/Home")
As you're new to MVC, quick explanation. There a 'routeConfig.cs' which routes incoming urls to an action(method) on a controller(class). The controller loads the view (cshtml) and applies all the server-side code then returns the rendered html to the user.
You do not navigate directly to cshtml pages but navigate instead to actions via the url.
The default route config gives you urls such as:
http://[site]/[controller]/[action]
Note that [controller] does not include "Controller", so "HomeController" becomes "/Home/"
Also, by convention, if you don't specify a view name in 'View()' then it will look in your solution folder "/Views/[controller]/[action].cshml' (among other locations such as '/Views/Shared/[action].cshtml' (also configurable, but these are the defaults).
you easely can combine
http://morrisjs.github.io/morris.js/index.html
in mvc (razor syntax)
or you can use chart helper
http://www.asp.net/web-pages/overview/data/7-displaying-data-in-a-chart
change to:
#{
var myChart = new Chart(600, 400)
.AddTitle("Employees")
.AddSeries("SomeName",chartType: "Pie",
xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" },
yValues: new[] { "2", "6", "4", "5", "3" });
if (myChart != null)
{
myChart.Write();
}
}
you have to lunch it in iis or some development server
Related
I recently discovered Areas in ASP.NET MVC 4, which I have successfully implemented, but I'm running into troubles with the #Html.ActionLink helper in my Razor views. The URL this helper generates always seems to be relative to the URL of the current page.
I have my web site configured in IIS 7 (Win7) as an Application virtual directory at /Foo.
I have two Areas registered: Admin and Blogs. I have the default code in the AdminAreaRegistration.cs and BlogsAreaRegistration.cs files. I added namespaces = new[] { "MvcProject.Controllers" } to the defaults of the default RouteConfig:
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new {
controller = "Home", action = "Index", id = UrlParameter.Optional,
namespaces = new[] { "MvcProject.Controllers" }
}
);
}
}
When I go to the home page for my site: http://localhost/Foo, it correctly loads the "home" page for my site. At this point, all the action links have their correct URLs.
Sample code from MvcProject/Views/Shared/_Layout.cshtml
<h2>Main Navigation</h2>
<ul>
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("Blogs", "Index", "Blogs/Home")</li>
<li>#Html.ActionLink("Admin", "Index", "Admin/Home")</li>
</ul>
This is correctly rendering the HTML as:
<h2>Main Navigation</h2>
<ul>
<li>Home</li>
<li><a href="/Foo/Blogs/Home"></li>
<li><a href="/Foo/Admin/Home"></li>
</ul>
When I navigate in the browser to "Blogs" for instance, this URL correctly loads in the browser: /Foo/Blogs/Home.
Now the links in my main navigation change their URLs to:
<h2>Main Navigation</h2>
<ul>
<li>Home</li>
<li><a href="/Foo/Blogs/Blogs/Home"></li>
<li><a href="/Foo/Blogs/Admin/Home"></li>
</ul>
Notice that "Blogs/" is appended to the IIS virtual directory name, so that /Foo/Blogs/Home is now /Foo/Blogs/Blogs/Home.
The controllers and views are rendering fine, it's just the calls to #Html.ActionLink in my MvcProject/Views/Shared/_Layout.cshtml view are not working as I expected.
It feels like I'm missing something trivial, but no amount of searching has come up with an answer. Every blog post and tutorial I've found for implementing Areas in ASP.NET MVC4 makes no mention of changes in how #Html.ActionLink behaves.
I hate answering my own question, but #Matt Bodily put me on the right track.
The #Html.Action method actually invokes a controller and renders the view, so that wouldn't work to create a snippet of HTML in my case, as this was causing a recursive function call resulting in a StackOverflowException. The #Url.Action(action, controller, { area = "abc" }) does indeed return the URL, but I finally discovered an overload of Html.ActionLink that provided a better solution for my case:
#Html.ActionLink("Admin", "Index", "Home", new { area = "Admin" }, null)
Note: , null is significant in this case, to match the right signature.
Documentation: #Html.ActionLink (LinkExtensions.ActionLink)
Documentation for this particular overload:
LinkExtensions.ActionLink(Controller, Action, Text, RouteArgs, HtmlAttributes)
It's been difficult to find documentation for these helpers. I tend to search for "Html.ActionLink" when I probably should have searched for "LinkExtensions.ActionLink", if that helps anyone in the future.
Still marking Matt's response as the answer.
Edit: Found yet another HTML helper to solve this:
#Html.RouteLink("Admin", new { action = "Index", controller = "Home", area = "Admin" })
How I redirect to an area is add it as a parameter
#Html.Action("Action", "Controller", new { area = "AreaName" })
for the href portion of a link I use
#Url.Action("Action", "Controller", new { area = "AreaName" })
Just to add up my bit:
Remember, you're gonna need to have at least 2 areas in your MVC application to get the routeValues: { area="" } working; otherwise the area value will be used as a query-string parameter and you link will look like this: /?area=
If you don't have at least 2 areas, you can fix this behavior by:
1. editing the default route in RouteConfig.cs like this:
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { area = "", controller = "Home", action = "Index", id = UrlParameter.Optional }
);
OR
2. Adding a dummy area to your MVC project.
Below are some of the way by which you can create a link button in MVC.
#Html.ActionLink("Admin", "Index", "Home", new { area = "Admin" }, null)
#Html.RouteLink("Admin", new { action = "Index", controller = "Home", area = "Admin" })
#Html.Action("Action", "Controller", new { area = "AreaName" })
#Url.Action("Action", "Controller", new { area = "AreaName" })
<a class="ui-btn" data-val="abc" href="/Home/Edit/ANTON">Edit</a>
<a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#CustomerList" href="/Home/Germany">Customer from Germany</a>
<a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#CustomerList" href="/Home/Mexico">Customer from Mexico</a>
Hope this will help you.
This is my first time trying to implement a project using MVC, and I am kind of lost.
I have a view, named chart.aspx
and a controller which has the function
public ActionResult GetChartImage()
{
var key = new Chart(width: 300, height: 300)
.AddTitle("Employee Chart")
.AddSeries(
chartType: "Bubble",
name: "Employee",
xValue: new[] { "Peter", "Andrew", "Julie", "Dave" },
yValues: new[] { "2", "7", "5", "3" });
return File(key.ToWebImage().GetBytes(), "image/jpeg");
}
I want to call that from my aspx page, in order to show a chart.
How I can do that?
In your view add the following:
<img src="<%= Html.Action("GetChartImage", "YourControllerName") %>" />
Try this,Use Url.action in your img tag src
and also need to change ActionResult to FileContentResult . But it does not a matter .
<img src="#Url.Action("GetChartImage", "YourControllerName")" />
VS '12 asp.net C# mvc Internet App + Kendo UI , EF Code First, Kendo UI
Using Kendo DDL
#(Html.Kendo().DropDownList()
.Name("dropdownlist")
.BindTo(new string[] { "Leasehold A", "Mineral Owner", "Prospect", "StrangerInTitleNote", "StrangerInTitleNoteInfo", "StrangerLeasingNote", "StrangerLeasingNoteInfo", "Subject To", "Surface Note", "Surface Note Info", "Unreleased Mortage", "Unreleased Oil and Gas Leasors", "Vesting Note" })
)
Very simple right? - now i want to extract the selected Item and place it into an Actionlink
#Html.ActionLink("Create New", "Create", new { id = } )', null) ....
what do I place at the id= spot. How can I get this to work. Thanks for any answers.
PS: Not familiar with MVC to much or any HTML so far, must I use a Script? - preferably I would like to not leave the view.
I do it like this. May not be the best but it works for me.
Here is the link:
#Html.ActionLink("Click Me", "YourAction", new { controller = "YourController"}, new {id="YourActionLinkName"})
The .click function
$('#YourActionLinkName').click(function (e) {
var val = $("#dropdownlist").val();
var href = "/YourApp/YourController/YourAction/" + val;
this.href = ""; //clears out old href for reuse
this.href = href; //changes href value to currently slected dropdown value
});
I am working on a ASP.Net website using web-form & C#.
I have used URL Routing to convert my basic url to SEO Freindly URL for example
Basic URL
en/article.aspx?PageID=13&Language=en-US&parID=5&Issue=17&cid=1&aid=173&wid=17
After Using URL Routing
en/article/en-US/13/13/17/1/173/this-is-the-title-of-the-article
My Routing Code in global.asax
routes.MapPageRoute("ArticleGeneral", "en/article/{Language}/{PageID}/{ParID}/{Issue}/{cid}/{aid}/{ArticleTitle}", "~/en/Article.aspx", false,
new RouteValueDictionary {
{ "Language", "en-US"},
{ "PageID", "0" },
{ "ParID", "0"},
{ "Issue", "0"},
{ "cid", "0"},
{ "aid", "0"},
{ "ArticleTitle", "event-not-found" }},
new RouteValueDictionary {
{"Language", "[a-z]{2}-[a-z]{2}"},
{ "PageID", "[0-9]{1,8}" },
{ "ParID", "[0-9]{1,8}" },
{ "Issue", "[0-9]{1,8}" },
{ "cid", "[0-9]{1,8}" },
{ "aid", "[0-9]{1,8}" }
});
I need to further work on this Routing to make it more like
en/article/CategoryName/WriterName/TitleOfArticle
I am not sure how i can replace ID with actual name using this routing pattern
I want to structure my pages similar to www.asp.net
http://www.asp.net/web-forms/overview
http://www.asp.net/web-forms/tutorials
http://www.asp.net/web-forms/videos
http://www.asp.net/web-forms/tutorials/aspnet-45/getting-started-with-aspnet-45-web-forms/url-routing
How can i structure my URL this way as they look clean. I am confused about this url as they are not passing any PageID's as part of URL are they using hidden fields or how they resolve these url.
My website is multilingual & I pass query-string like PageID & LanguageID for general page & for Articles i pass several query string as showing this example above.
I would appreciate answers regarding this with reference asp.net web-forms not MVC.
Pointer to a complete example would be great mostly example i have seen pass ID as part of Friend Url's.
I am working on a project which is complete & while testing & found that ASP.NET Routing blocks menu from showing up on pages with friendly URL (ASP.Net 4.0, C#)
Routing Code
routes.MapPageRoute("ActivityRoute", "en/activity/{Language}/{EventID}/{PageID}/{EventTitle}", "~/en/Activity-Details.aspx", false,
new RouteValueDictionary {
{ "Language", "en-US"},
{ "EventID", "0" },
{ "PageID", "0"},
{ "EventTitle", "event-not-found" }},
new RouteValueDictionary {
{"Language", "[a-z]{2}-[a-z]{2}"},
{ "EventID", "[0-9]{1,8}" },
{ "PageID", "[0-9]{1,8}" }
});
Everything is working fine & managed to make Fancybox work with friendly URL but i am not able to figure out what is blocking sub menus from showing up on page with friendly URL.
I managed to resolve this issue as it was due to path
Resolved it, Problem was due to the path issue which was resolved