【发布时间】:2016-02-05 23:53:35
【问题描述】:
我刚开始使用 MVC、JSON、AJAX 等,作为一个辅助项目,我一直在尝试创建一个数据可视化仪表板。
今天我按照本指南了解如何将简单的数据表从 SQL 作为 JSON 传递到我的视图:http://techfunda.com/howto/292/list-records-using-json
它主要工作:JsonResult 来自我的控制器,包含 值,但不包含 属性名称。 这会导致问题,因为我在处理要在 JavaScript 中显示的数据时引用了属性名称。
这是 SQL 数据:
这是我的模型:
public partial class vw_Dash_ChartData : IEnumerable<object>
{
[Key]
[JsonProperty(PropertyName = "Classification")]
public string Classification { get; set; }
[JsonProperty(PropertyName = "Count")]
public int Count { get; set; }
public IEnumerator<object> GetEnumerator()
{
yield return Classification;
yield return Count;
}
System.Collections.IEnumerator System.Collections.IEnumerable.GetEnumerator()
{
return this.GetEnumerator();
}
}
(你会注意到我试图手动设置 [JsonProperty(...)] 的东西......它没有帮助。)
这是我的 JsonResult:
public JsonResult ChartDataJson()
{
var data = new List<vw_Dash_ChartData>();
data = db.vw_Dash_ChartDatas.ToList();
var jsonData = Json(data, JsonRequestBehavior.AllowGet);
return jsonData;
}
(最初我是直接从我的DbContext 发送数据,但后来我想也许使用我的vw_Dash_ChartData 模型会有所帮助。这并没有什么不同)。
我的视图如下所示:
@{
ViewBag.Title = "Charts";
AjaxOptions options = new AjaxOptions
{
//Confirm = "Are you sure?",
LoadingElementId = "divLoading",
OnSuccess = "processDataMethod",
Url = Url.Action("ChartDataJson")
};
}
<script type="text/javascript">
function processDataMethod(data) {
var output = $("#dataZone");
output.empty();
for (var i = 0; i < data.length; i++) {
var chartData = data[i];
output.append("<tr><td>" + chartData.Classification + "</td><td>" + chartData.Count + "</td></tr>");
}
}
</script>
<div>
<table>
<thead>
<tr>
<th>Classification</th>
<th>Count</th>
</tr>
</thead>
<tbody id="dataZone">
</tbody>
</table>
</div>
@using (Ajax.BeginForm(options))
{
<div id="divLoading" style="color: red; font-size: larger;">
Loading...
</div>
<div>
<button type="submit" id="btnClicky" >Clicky</button>
</div>
}
<script>
$("#btnClicky").trigger("click");
</script>
当我加载页面时,这是我得到的:
这是浏览器开发者工具中显示的 JSON 对象;
感谢您收到任何提示/想法!另外,如果我在做任何愚蠢的事情,请告诉我,因为我想学习这方面的最佳实践。
【问题讨论】:
标签: json ajax asp.net-mvc