使用asp.net MVC,JSON jqPlot图 [英] jqPlot Chart using asp.net MVC, JSON

查看:105
本文介绍了使用asp.net MVC,JSON jqPlot图的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我是新来的MVC和jQuery和jqPlot。

谁能给例子,我可以一步程序找到演示项目,或一步才达到。

我需要的是:


  • 如何返回一个JSON查看。

  • 当添加视图 - 它应该是局部视图或普通视图

  • 如何使用jQuery从视图中获得JSON。

  • 如何通过JSON对象jqPlot?

非常感谢在前进。

===============================================

有试过低于code,它总是要的错误部分,任何人都可以解释的原因是什么?

 <! -  [如果LT IE 9]>< SCRIPT LANGUAGE =JavaScript的TYPE =文/ JavaScript的SRC =../脚本/ excanvas。 JS>< / SCRIPT><![ENDIF]  - >
        < SCRIPT SRC =../ JS / jQuery的-1.3.2.min.js类型=文/ JavaScript的>< / SCRIPT>
        <脚本类型=文/ JavaScript的LANGUAGE =JavaScript的>
            $(文件)。就绪(函数(){
                $(#btnClick)。点击(函数(){
                    警报('内单击功能');
                    $阿贾克斯(
                        输入:GET,
                        网址:JSONSample.aspx / GetItSerialized
                        过程数据:真实,
                        数据:{},
                        的contentType:应用/ JSON的;字符集= UTF-8,
                        数据类型:JSON
                        成功:功能(数据){
                            $。每个(data.d,函数(指数,项目){
                                警报('内成功);
                            });
                            //警报('内成功);
                            //过程数据(数据);
                        },
                        错误:功能(jqXHR,textStatus,errorThrown){警报(错误);}                    });                    功能过程数据(数据){
                        警报('测试');
                    }
                });
            });
        < / SCRIPT>
    <身体GT;
        <表ID =form1的=服务器>
        < D​​IV>
        <输入ID =btnClick=服务器值=点击这里类型=按钮/>
        < / DIV>
        < /表及GT;
    < /身体GT;公共字符串GetItSerialized()
        {
            员工oEmployee1 =新员工{名称=ABC,ID =111,年龄=30};
            员工oEmployee2 =新员工{名称=FDFID =RTRT,年龄=31};
            员工oEmployee3 =新员工{名称=dfdfID =FDFD,年龄=20};            清单<员工> listEmp =新的List<员工>
            {
                oEmployee1,
                oEmployee2,
                oEmployee3
            };            字符串str =(新的JavaScriptSerializer()序列化(listEmp));            返回海峡;
        }    }    公共类员工
    {
        公共字符串名称{;组; }
        公共字符串年龄{搞定;组; }
        公共字符串ID {搞定;组; }
    }


解决方案

嗯,首先$ C $的c您提供的是一个ASP.NET WebForms的样本。结果
关于如何使用MVC使用jqPlot教程:这里这里 。结果
为了回答您的问题休息:


  1. 如何JSON返回到View?的结果请参阅回答没有。 4


  2. 虽然添加视图 - 它应该是局部视图或普通视图的结果这真的取决于你所要完成的任务。如果你想创造的东西就像一个小部件,然后使用部分景色。


  3. 如何使用jQuery从视图中获得JSON?的结果我真的不知道你是什么意思。


  4. 如何通过JSON对象jqPlot?的结果呼叫控制器动作,将返回JSON对象。按照此<一个href=\"http://stackoverflow.com/questions/227624/asp-net-mvc-controller-actions-that-return-json-or-partial-html\">Example与此教程

I am new to MVC and jQuery and jqPlot.

Can anyone give example where I can find demo projects or step by step procedure to achive.

What I need is:

  • How to Return a JSON to view.
  • While adding View - it should be partial view or normal view?
  • How to get JSON from view using jQuery.
  • How to pass JSON object in jqPlot?

Thanks a lot in advance.

===============================================

Tried with below code, it is always going to ERROR part, can anyone explain what is the reason?

<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../Scripts/excanvas.js"></script><![endif]-->
        <script src="../js/jquery-1.3.2.min.js" type="text/javascript"></script>
        <script type="text/javascript" language="javascript" >
            $(document).ready(function () {
                $("#btnClick").click(function () {
                    alert('Inside Click Function');
                    $.ajax(
                        type: 'GET',
                        url: "JSONSample.aspx/GetItSerialized",
                        processData: true,
                        data: {},
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (data) {
                            $.each(data.d, function (index, item) {
                                alert('Inside Success');
                            });
                            //alert('Inside Success');
                            //processData(data);
                        },
                        error: function(jqXHR, textStatus, errorThrown) {alert('Error');}

                    });

                    function processData(data) {
                        alert('test');
                    }
                });
            });
        </script>


    <body>
        <form id="form1" runat="server">
        <div>  
        <input id="btnClick" runat="server" value="Click here" type="button" />
        </div>
        </form>
    </body>

public string GetItSerialized()
        {
            Employee oEmployee1 = new Employee { Name = "ABC", ID = "111", Age = "30" };
            Employee oEmployee2 = new Employee { Name = "FDF", ID = "rtrt", Age = "31" };
            Employee oEmployee3 = new Employee { Name = "dfdf", ID = "fdfd", Age = "20" };

            List<Employee> listEmp = new List<Employee>
            {
                oEmployee1,
                oEmployee2,
                oEmployee3
            };

            string str = (new JavaScriptSerializer().Serialize(listEmp));

            return str;
        }

    }

    public class Employee
    {
        public string Name { get; set; }
        public string Age { get; set; }
        public string ID { get; set; }
    }

解决方案

Well, first of all code you provided is an ASP.NET WebForms sample.
Tutorials on how to use jqPlot with MVC: here or here.
To answer rest of your questions:

  1. How to return JSON to a View?
    See answer no. 4

  2. While adding View - it should be partial view or normal view?
    It really depends on what you are trying to accomplish. If you want to create something like a widget then use partial views.

  3. How to get JSON from view using jQuery?
    I'm not really sure what do you mean.

  4. How to pass JSON object to jqPlot?
    Call controller action that will return json object. Follow this Example with this tutorial

这篇关于使用asp.net MVC,JSON jqPlot图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆