C#ASP MVC问题中的JavaScript

时间:2012-08-03 13:28:42

标签: c# jquery asp.net-mvc google-visualization castle

我们有一个Web项目,它从MS SQL数据库中获取数据,并使用Google Visualization API在Web视图中显示这些图表。

最近我们添加了castle windsor,因此我们可以使用XML文件为不同的用户配置应用程序。在我们添加之前,视图工作正常,使用此查询所需的烘焙参数。出于某种原因,当我们从XML文件发送参数时(使用断点运行显示参数正在传递给页面的主控制器操作),不会返回数据。这里有一些代码。

JavaScript

<script type="text/javascript">
var csvDataUrl = '@Url.Action("TradeValuesDataCsv", "Dashboard")';
var jsonDataUrl = '@Url.Action("TradeValuesDataJson", "Dashboard")';
 google.load("visualization", "1", { packages: ['table', 'corechart', 'gauge'] });
 google.setOnLoadCallback(drawCharts);
 drawCharts();

 $("body").on({
     ajaxStart: function () {
         $(this).addClass("loading");
     },
     ajaxStop: function () {
         $(this).removeClass("loading");
     }
 });

function drawCharts() {
    var queryString = 'platform=' + $('#PlatformDropDownList').val();
    queryString += '&startDate=' + $('#startDatePicker').val();
    queryString += '&endDate=' + $('#endDatePicker').val();
    queryString += '&model=' + $('#ModelDropDownList').val();
    queryString += '&eventType=' + '@Model.EventType';
    queryString += '&parameterName=' + '@Model.ParameterName';
        $.ajax({
            type: "POST",
            url: jsonDataUrl,
            data: queryString,
            statusCode: {
                200: function (r) {
                    drawToolbar(queryString);
                    drawTable(r);
                    drawChart(r);
                },
                400: function (r) {

                },
                500: function (r) {

                }
            }
        });
}

此页面的主控制器方法:

        public ActionResult ActionResultName(EventTypeParameterNameEditModel model)
    {
        var viewModel = new EventTypeParameterNameViewModel(_queryMenuSpecific);
        viewModel.EventType = model.EventType;
        viewModel.ParameterName = model.ParameterName;
        PopulateFilters(viewModel);
        return this.View(viewModel);
    }

检索JSON数据控制器方法:

        public ActionResult ActionResultNameJson(EventTypeParameterNameEditModel filters)
    {
        List<CustomDataType> results = this.GetTradeValues(filters);
        return this.Json(results, JsonRequestBehavior.AllowGet);
    }

编辑我设法找到了一个解决方案,即使它是一个相当混乱的解决方案。我在页面中内置了一些过滤器,允许用户按设备和操作系统进行过滤,这些过滤器使用'undefined'填充页面加载。我没有在NHProf Running中首次发现这一点,但是在我们将输入配置为XML之前加载页面时没有发生这种情况。我会将此作为答案添加并接受并关闭问题。感谢大家的帮助。开始真的喜欢这个社区。作为研究生开发人员寻求帮助的理想场所。

2 个答案:

答案 0 :(得分:0)

是的。我不是Razor语法专家,但我认为这些属性引用可能是你的问题。我怀疑razor会倾向于避免在JS上下文中具有属性的语句中使用的字符串中断言。或者您可以尝试实现可能有效的getter函数。否则是@和a。如果不是一个明显的方法调用,在字符串中很容易导致混淆混淆与电子邮件地址:

queryString += '&eventType=' + '@Model.EventType';
queryString += '&parameterName=' + '@Model.ParameterName';

作为任何服务器到客户端方案的一般规则,我的建议是将JavaScript直接从后端限制到JSON对象。这样,您可以更精细地控制http请求墙两侧的内容,如果短期需要快速修改,则客户端开发人员无需确定构建内容的位置。一般情况下,如果可以避免,请不要使用其他代码构建行为代码。

起初我无法说服我的.net MVC老板,但几个月后他就慢慢接受了这个想法。

我们还在一个标准JSON对象中存储了一个URL基本路径以及一些其他上下文转换参数,这些对象加载到每个页面上,因此JS开发人员可以添加这些链接的JS文件,而不必在HTML中使用JS(我不记得为什么但是document.location并不总是有用。)

最后,尝试将JS保留在HTML之外。链接它。这似乎是一个程序性POV的痛苦,但相信我。当你将3个主要问题分别作为一个球而不是同一个混乱的HTML /模板混乱时,它会让生活变得更加轻松。

答案 1 :(得分:0)

事实证明问题不在我的Javascript中。我在那里有一些过滤器,允许用户过滤我的模型和操作系统和日期的结果,什么不是。这些是在页面加载时使用'undefined'自动填充的,这不是数据库中的选项。我在查询调用中添加了一些东西来捕获它,它似乎解决了问题。