I am having trouble displaying bar chart from my ASP.NET-MVC-5 application. I witnessed the JSON comes out correctly (sample is applied below), and as per documentation I had included all, yet the output comes as below:
HTML:
<div class="jumbotron">
<h1>Another Chart</h1>
<canvas id="barChartLoc" width="600" height="400"></canvas>
</div>
This is the Script which calls the Controller, which returns a JSON:
<script type="text/javascript">
function chartFYRevenue() {
$.ajax({
url: '#Url.Action("GetLast5FYRevenueAnalysis", "Utility")',
cache: true
})
.done(function (data) {
var mybarChartLoc = new Chart(document.getElementById("barChartLoc").getContext("2d")).Bar(data);
})
.fail(function () {
alert("Ajax failed to fetch data");
});
}
$(document).ready(function () {
//auto load on page load
chartFYRevenue();
});
</script>
This is the Controller which returns a JSON. I have tested this and things are fine here as well:
public JsonResult GetLast5FYRevenueAnalysis()
{
Models.Chart.BarChartDBContext chartDB = new Models.Chart.BarChartDBContext();
return Json(chartDB.Test, JsonRequestBehavior.AllowGet);
}
This is the Modeler class where I build the Chart Data dynamically:
public class ChartDataSets
{
public string label { get; set; }
public string fillColor { get; set; }
public string highlightFill { get; set; }
public string highlightStroke { get; set; }
public string strokeColor { get; set; }
public string data { get; set; }
}
public class BarChartModel
{
public string labels { get; set; }
public List<ChartDataSets> datasets { get; set; }
}
public class BarChartDBContext : Models.DBHelper.DBHelperClass
{
public BarChartModel GetLast5FInancialYearRevenue
{
get { return getLast5FinancialYearRevenue(); }
}
public BarChartModel Test
{
get { return test(); }
}
private BarChartModel test()
{
List<ChartDataSets> _datasets = new List<ChartDataSets>();
BarChartModel _barChartModel = null;
_datasets.Add(new ChartDataSets()
{
data = string.Format("[{0}]", "10,5,25,35"),
fillColor = "rgba(220,220,220,0.5)",
highlightFill = "rgba(220,220,220,0.75)",
highlightStroke = "rgba(220,220,220,1)",
strokeColor = "rgba(220,220,220,0.8)",
label = "s1"
});
_barChartModel = new BarChartModel();
_barChartModel.labels = string.Format("[{0}]", "c1,c2,c3,c4");
_barChartModel.datasets = _datasets;
return _barChartModel;
}
}
JSON Data Sample:
{
"labels": "[c1,c2,c3,c4]",
"datasets": [
{
"label": "s1",
"fillColor": "rgba(220,220,220,0.5)",
"highlightFill": "rgba(220,220,220,0.75)",
"highlightStroke": "rgba(220,220,220,1)",
"strokeColor": "rgba(220,220,220,0.8)",
"data": "[10,5,25,35]"
}
]
}
Update:
I modified my ChartDataSet and BarChartModel Class to the following:
public class ChartDataSets
{
public string label { get; set; }
public string fillColor { get; set; }
public string highlightFill { get; set; }
public string highlightStroke { get; set; }
public string strokeColor { get; set; }
public string[] data { get; set; }
}
public class BarChartModel
{
public string[] labels { get; set; }
public List<ChartDataSets> datasets { get; set; }
}
Your JSON data generated is incorrect. The right output should be
"{
"labels": ["c1","c2","c3","c4"],
"datasets": [
{
"label":"s1",
"fillColor":"rgba(220,220,220,0.5)",
"highlightFill":"rgba(220,220,220,0.75)",
"highlightStroke":"rgba(220,220,220,1)",
"strokeColor":"rgba(220,220,220,0.8)",
"data":[10,5,25,35]
}
]
}"
Related
I am calling an API that returns nested classes (example below) and I am struggling to bind these to a Picker.
Is it possible to bind them nested classes to a picker as is? or do I need to somehow add them to a IList?
<Picker Title="Select a Currency" ItemsSource="{Binding CurrencyClass}" ItemDisplayBinding="{Binding currencyName}"/>
class MainPageViewModel : INotifyPropertyChanged
{
private Currencies _CurrencyClass;
public Currencies CurrencyClass
{
get { return _CurrencyClass; }
set
{
_CurrencyClass = value;
OnPropertyChanged();
}
}
}
This is a cut of the class they get desterilized too
public class Currencies
{
public class Rootobject
{
public Results results { get; set; }
}
public class Results
{
public XCD XCD { get; set; }
public EUR EUR { get; set; }
}
public class XCD
{
public string currencyName { get; set; }
public string currencySymbol { get; set; }
public string id { get; set; }
}
public class EUR
{
public string currencyName { get; set; }
public string currencySymbol { get; set; }
public string id { get; set; }
}
}
And this a cut of the json I am receiving.
{
"results": {
"XCD": {
"currencyName": "East Caribbean Dollar",
"currencySymbol": "$",
"id": "XCD"
},
"EUR": {
"currencyName": "Euro",
"currencySymbol": "€",
"id": "EUR"
}
}
}
So I figured out a work around for what I was aiming to achieve, this may not be a direct answer to my question but it is a solution for my issue.
I ended up just deserializing the JSON differently into a list of a Currency and then binding easily like you normally would.
class Currency
{
public string currencyName { get; set; }
public string currencySymbol { get; set; }
public string id { get; set; }
}
and how I deserialized it to fit in that class here, I parsed the JSON into a JObject and then for each child of each child I deserialize it into my Currency class.
List<Currency> cList = new List<Currency>();
HttpResponseMessage response = await client.GetAsync(urlAPI);
response.EnsureSuccessStatusCode();
string responseBody = await response.Content.ReadAsStringAsync();
JObject jo = JObject.Parse(responseBody);
var children = jo.SelectToken("results").Children();
foreach(var child in children)
{
var childrenOfChild = child.Children();
foreach(var c in childrenOfChild)
{
cList.Add(JsonConvert.DeserializeObject<Currency>(JsonConvert.SerializeObject(c)));
}
}
I'm trying to send a dropdownlists selected value to controller and retrieve json data back.
When I debug, parameter gets to controller nicely, values are retrieved nicely but after return part on console it says
"Failed to load resource: the server responded with a status of 500 (Internal Server Error)`"
This is my controller action: (in WebContentsController)
[HttpGet]
public JsonResult GetWebContentTypeDetails (int id)
{
var details = db.WebContentTypeDetail.Where(x=>x.WebContentTypeID == id).ToList();
return Json(details, JsonRequestBehavior.AllowGet);
}
this is JS part (printing it to console for testing)
$(document).ready(function () {
$("#WebContentTypeID").change(function () {
var ChangedID = $('#WebContentTypeID option:selected').val();
alert(ChangedID);
$.getJSON('/webcontents/GetWebContentTypeDetails/' + ChangedID, function (data) {
console.log(data);
})
});
});
EDIT:
WebContentTypeDetail model
public partial class WebContentTypeDetail
{
public int WebContentTypeDetailID { get; set; }
public int WebContentTypeID { get; set; }
public string DetailKey { get; set; }
public string Description { get; set; }
public Nullable<short> Rank { get; set; }
public virtual WebContentType WebContentType { get; set; }
}
WebContentType model
public partial class WebContentType
{
[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
public WebContentType()
{
this.WebContent = new HashSet<WebContent>();
this.WebContentTypeDetail = new HashSet<WebContentTypeDetail>();
}
public int WebContentTypeID { get; set; }
public string DisplayName { get; set; }
public string CreatedByUserID { get; set; }
public System.DateTime CreateDate { get; set; }
public string LastEditedByUserID { get; set; }
public Nullable<System.DateTime> LastEditDate { get; set; }
[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
public virtual ICollection<WebContent> WebContent { get; set; }
[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
public virtual ICollection<WebContentTypeDetail> WebContentTypeDetail { get; set; }
}
You cannot directly return a entity list from context query result, because they are not serializable in most of cases, especially in your case: entities got a loop references.
you have 2 options:
var details = db.WebContentTypeDetail.Where(x=>x.WebContentTypeID == id)
map your result to anonymous object list:
return Json(details.select(x=>new {
//you data structure
}).ToList(), JsonRequestBehavior.AllowGet);
create your view model and mark it [Serializable], then return necessary data to client:
return Json(details.select(x=>new YourViewModel {
//you data structure
}).ToList(), JsonRequestBehavior.AllowGet);
Try this:
$(document).ready(function () {
$("#WebContentTypeID").change(function () {
var ChangedID = $('#WebContentTypeID option:selected').val();
alert(ChangedID);
$.getJSON('/webcontents/GetWebContentTypeDetails?id=' + ChangedID, function (data) {
console.log(data);
})
});
});
As parameter id should be passed as querystring. And if you're using mvc then url should be passed in #url.action so it must be
$(document).ready(function () {
$("#WebContentTypeID").change(function () {
var ChangedID = $('#WebContentTypeID option:selected').val();
alert(ChangedID);
var URL = #Url.Action("_GetWebContentTypeDetails", "webcontents");
$.getJSON(URL + '?id=' + ChangedID, function (data) {
console.log(data);
})
});
});
Is it possible in odata4 to create a model such as:
public class PuppyDogs
{
public string Name { get; set; }
public virtual IList<Bone> Bones { get; set; }
}
public class Bone
{
public string ChewType { get; set; }
public int Numberofchews { get; set; }
}
And the controller class looks like
public class PuppyDogController : ODataController
{
List<PuppysDog> mydogs = new List<PuppysDog>();
private PuppyDogController()
{
if (mydogs.Count == 0)
{
PuppysDog mydog = new PuppysDog();
mydog.Name = "Fido";
mydog.Bones = new List<Bone>()
{
new Bone{ ChewType = "Soft", Numberofchews=1 },
new Bone{ ChewType = "Hard", Numberofchews=2 }
};
mydogs.Add(mydog);
}
}
[EnableQuery]
public IQueryable<PuppysDog> Get()
{
return mydogs.AsQueryable();
}
}
Can I include the Bones property of PuppyDogs without using expand? By default Bones is not returned to the client.
There are several things nor clear in your code, for example, the entity set PuppyDogs don't have a key, the naming convention in the controller is a little wired and etc. With the following code, it can work perfectly, please take a look
PuppyDog.cs
public class PuppyDog
{
[Key]
public string Name { get; set; }
public virtual IList<Bone> Bones { get; set; }
}
Bone.cs
public class Bone
{
public string ChewType { get; set; }
public int Numberofchews { get; set; }
}
PupyyDogsController.cs
public class PuppyDogsController : ODataController
{
List<PuppyDog> mydogs = new List<PuppyDog>();
private PuppyDogsController()
{
if (mydogs.Count == 0)
{
PuppyDog mydog = new PuppyDog();
mydog.Name = "Fido";
mydog.Bones = new List<Bone>()
{
new Bone {ChewType = "Soft", Numberofchews = 1},
new Bone {ChewType = "Hard", Numberofchews = 2}
};
mydogs.Add(mydog);
}
}
[EnableQuery]
public IQueryable<PuppyDog> Get()
{
return mydogs.AsQueryable();
}
}
WebApiConfig.cs
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
ODataConventionModelBuilder builder = new ODataConventionModelBuilder();
builder.EntitySet<PuppyDog>("PuppyDogs");
config.MapODataServiceRoute("odata", null, builder.GetEdmModel(), new DefaultODataBatchHandler(GlobalConfiguration.DefaultServer));
config.EnsureInitialized();
}
}
Then when try http://localhost:21830/PuppyDogs, I can successfully got the payload as
{
"#odata.context": "http://localhost:21830/$metadata#PuppyDogs",
"value": [
{
"Name": "Fido",
"Bones": [
{
"ChewType": "Soft",
"Numberofchews": 1
},
{
"ChewType": "Hard",
"Numberofchews": 2
}
]
}
]
}
I wanna create a kendo ui tree view with remote data source in Asp.net mvc4. I'm having a problem with knowledge about kendo. I've tried those examples in kendo website .
But i couldn't even get those images to the treeView.
About the project : This project is to create a TreeView menu for load web forms. Each web form can be taken as an formObject. That objects has following attributes
name
id
List of child objects (List childs)
Here is my Codes on the Controller
public class HomeController : Controller
{
ObjectService service = new ObjectService();
private int cky = 11;
private int usrky=28;
public ActionResult Index()
{
return View();
}
public ActionResult GetAllMenu(int prntKy = 1)// initially the parent key is = 1
{
List<ObjectModel> objects = new List<ObjectModel>();
objects = service.GetObjectsByPrntKy(prntKy, cky, usrky);//get all parent nodes
List<TreeViewModel> tree = new List<TreeViewModel>();
if (objects != null)
{
foreach (ObjectModel model in objects)//for each parent node
{
TreeViewModel treeObj = new TreeViewModel();
treeObj.id = model.ObjKy;
treeObj.name = model.ObjNm;
treeObj.childrens = GetChileByPrntObjKy(model.ObjKy);
tree.Add(treeObj);
}
}
return Json(tree, JsonRequestBehavior.AllowGet);
}
private List<TreeViewModel> GetChileByPrntObjKy(int prntKy)// method to get child nodes
{
List<TreeViewModel> tree = new List<TreeViewModel>();
List<ObjectModel> Objects = new List<ObjectModel>();
Objects = service.GetAllObjects();
foreach (ObjectModel model in Objects)
{
TreeViewModel treeObj = new TreeViewModel();
if (model.PrntObjKy == prntKy)
{
treeObj.id = model.ObjKy;
treeObj.name = model.ObjNm;
treeObj.childrens = GetChileByPrntObjKy(model.ObjKy);
tree.Add(treeObj);
}
}
return tree;
}
}
Here is the model
public class TreeViewModel
{
public int pid { get; set; }
public int id { get; set; }
public string name { get; set; }
public List<TreeViewModel> childrens { get; set; }
}
public class ObjectModel
{
public long UsrObjPrmsnKy { get; set; }
public long UsrKy { get; set; }
public int ObjKy { get; set; }
public string ObjCd { get; set; }
public string ObjNm { get; set; }
public string ObjCaptn { get; set; }
public bool isPrntObj { get; set; }
public Nullable<int> PrntObjKy { get; set; }
public int CallObjKy { get; set; }
public string ObjPath { get; set; }
public bool isAlwAcs { get; set; }
public bool isAlwAdd { get; set; }
public bool isAlwUpdate { get; set; }
public bool isAlwDel { get; set; }
public bool isAlwApr { get; set; }
}
and here is the View
<div id="treeview">
</div>
<script type="text/javascript">
$(document).ready(function () {
LoadTreeView(1);
});
function LoadTreeView(prntKy)
{
var key = prntKy;
homogeneous = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: '#Url.Content("~/Home/GetAllMenu")',
data:{'prntKy':key},
dataType: "json"
}
},
schema: {
model: {
id: "id",
hasChildren: "childrens",
name: "name"
}
}
});
$("#treeview").kendoTreeView({
dataSource: homogeneous,
select: onSelectTree,
dataTextField: "name",
dataValueField: "id",
});
}
function onSelectTree(e) {
var data = $('#treeview').data('kendoTreeView').dataItem(e.node);
alert(data.id);
LoadTreeView(data.id);
}
</script>
I have uploaded the results images too. Please help me.
Your treeview isn't properly configured. You seem to be reinitializing it every time a node is selected which is redundant. I suggest you check the remote binding demo which implements a very similar case to yours. Here is how the treeview declaration looks:
var serviceRoot = "http://demos.kendoui.com/service";
homogeneous = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: serviceRoot + "/Employees",
dataType: "jsonp" // you don't need "json" for your case
}
},
schema: {
model: {
id: "EmployeeId",
hasChildren: "HasEmployees"
}
}
});
$("#treeview").kendoTreeView({
dataSource: homogeneous,
dataTextField: "FullName"
});
In this demo the treeview will ask the data source to load a new level of nodes when a parent node is expanded. For example when the user expands the root node in that demo the data source makes request to http://demos.kendoui.com/service/Employees?EmployeeId=2 which means "return the children of the node whose EmployeeID is equal to 2". Why "EmployeeId"? Because this is what the "id" of the data source model is:
schema: {
model: {
id: "EmployeeId",
hasChildren: "HasEmployees"
}
}
I'm using knockoutjs to render a collection of items. After allowing the user to do some inline editing I need to post the collection back to the server. However, the collection isn't being populated on the server because I'm not using the name="[0].Blah" naming convention. Does anyone know how to either render name attributes like this using knockoutjs OR how to create a model binder that will allow me to extract the values from the ValueProvider?
You can see a screenshot of the ValueProvider during debugging below.
http://i.imgur.com/zSU5Z.png
Here is my managed ViewModel:
public class FundLevelInvestmentUploadResult
{
public string FileName { get; set; }
public IList<FundLevelInvestmentViewModel> Items { get; set; }
public int NumberOfErrors { get; set; }
public bool ShowErrorsOnly { get; set; }
public FundLevelInvestmentUploadResult()
{
Items = new List<FundLevelInvestmentViewModel>();
}
}
Here is the managed class for "Items":
public class FundLevelInvestmentViewModel
{
private string _fund;
private string _fundType;
private string _date;
private string _netOfWaivedFees;
private string _waivedFees;
private string _bcip;
private string _fxRate;
public uint RowIndex { get; set; }
public int? DealCode { get; set; }
public bool DealCodeIsValid { get; set; }
public string Fund
{
get { return _fund; }
set { _fund = GetString(value); }
}
public bool FundIsValid { get; set; }
public string FundType
{
get { return _fundType; }
set { _fundType = GetString(value); }
}
public bool FundTypeIsValid { get; set; }
public string DateOfInvestment
{
get { return _date; }
set { _date = GetString(value); }
}
public bool DateOfInvestmentIsValid { get; set; }
public string NetOfWaivedFees
{
get { return _netOfWaivedFees; }
set { _netOfWaivedFees = GetString(value); }
}
public bool NetOfWaivedFeesIsValid { get; set; }
public string WaivedFee
{
get { return _waivedFees; }
set { _waivedFees = GetString(value); }
}
public bool WaivedFeeIsValid { get; set; }
public string BCIP
{
get { return _bcip; }
set { _bcip = GetString(value); }
}
public bool BCIPIsValid { get; set; }
public string ExchangeRateToUSD
{
get { return _fxRate; }
set { _fxRate = GetString(value); }
}
public bool ExchangeRateToUSDIsValid { get; set; }
public string FileName { get; set; }
private IList<string> _errors;
public IList<string> Errors
{
get { return _errors ?? (_errors = new List<string>());}
set { _errors = value; }
}
public bool Show { get; set; }
public FundLevelInvestmentViewModel()
{
Errors = new List<string>();
Show = true;
}
// knockoutjs is returning "null" instead of "" for a null object when calling ko.mapping.fromJS
private string GetString(string value)
{
if (value == "null")
return string.Empty;
return value;
}
}
Here is my knockout viewModel:
var viewModel = {
FileData: ko.observableArray([]),
validateFile: function (file, event) {
$.ajax({
type: 'post',
url: newUrl,
data: ko.mapping.toJS(file)
}).done(function (data) {
var newFile = ko.mapping.fromJS(data);
var index = file.Items.indexOf(file);
viewModel.FileData.replace(file, newFile);
});
}
};
If you are using version 2.1.0.0 or later of knockout you can render the name attribute as follows from an observable array.
<input data-bind='attr: { name: "Items["+$index()+"].DealCode"}' />