MVC-Chart_WebGrid 显示漂亮chart

最新推荐文章于 2022-04-03 10:35:02 发布
最新推荐文章于 2022-04-03 10:35:02 发布
阅读量1.1k 收藏
点赞数
分类专栏： MVC/asp.net 文章标签： mvc website asp.net


原文：http://www.tuicool.com/articles/maQrYn


Demo_Chart_WebGrid

Two Part:

(1) design a table for test, create a view or procedure and input some records for test.

(2) use the view or procedure of the database, design a image by the class of chart and display all the data by the help of WebGrid.

Note: the Part(1) designed is to test and you can use the same method in the database of  you computer or server.

In this demo use the view of database.

Part(1) Database

1.Oracle SQL Developer

1.1 USE THE URSR SCOTT,CREATE TABLE METRICS and input some data (ID IS PK), you can copy them from the PR_SUM.XLS

IDSTR_YEAR_MONTHNCDRbaselinecumulativetargetcumulativetarget
12014/1/17872789999
22014/2/1658914399198
32014/3/1797922299296
42014/4/1808430299395
52014/5/1689837099494
62014/6/1489341899593
72014/7/1808049899691
82014/8/16999790
92014/9/110099889
102014/10/112499988
112014/11/188991086
122014/12/174991185

1.2 Open the METRICS input the data and ensure it.

1.3 Use the ROLE OF SYSDBA  TO CREATE VIEW and    Scheme （方案）： SCOTT ,  VIEW_SUM

2.MVC+ORACLE+ODAC(use the view of database )

in the HomeController.cs  In the HomeController, the Action Index 

 1 using MvcMetrics.DAL;
 2 
 3 using System.Web.Helpers;
 4 
 5  
 6 
 7 //database Context
 8 
 9 private MetricsEntities db = new MetricsEntities();
10 
11  
12 
13  
14 
15  
16 
17         public ActionResult Index()
18 
19         {
20 
21             //ViewBag.Message = "Welcome to ASP.NET MVC!";
22 
23             //use VIEW from database
24 
25             var records = db.VIEW_SUM.ToList();
26 
27  
28 
29             var grid = new WebGrid(
30 
31                                 source: records,
32 
33                                 fieldNamePrefix: "grid_",
34 
35                                 defaultSort: "RELEASEDATE",// the way of sort
36 
37                                 canPage: true,
38 
39                                 canSort: true,
40 
41                                 ajaxUpdateContainerId: "DivGrid", // ajaxUpadate bind
42 
43                                 pageFieldName: "paging",
44 
45                                 sortDirectionFieldName: "RELEASEDATE",
46 
47                                  rowsPerPage: 4 //per page the count of records
48 
49                                   );
50 
51             return View(grid);
52 
53  
54 
55         }
View Code

In the view of Index,you can see that 

@{

  ViewBag.Title = "Home Page";

}

 

<h2>@ViewBag.Message</h2>

<p>

  To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.

</p>

Change it. 

 1 @model WebGrid
 2 
 3  
 4 
 5 @{
 6 
 7     ViewBag.Title = "Test";
 8 
 9 }
10 
11  
12 
13 <div id="DivGrid">
14 
15 @Model.GetHtml(
16 
17         columns: @Model.Columns(
18 
19                      @Model.Column("ID", "NO"),
20 
21                      @Model.Column("STR_YEAR_MONTH", format: @<i>@item.STR_YEAR_MONTH</i>, canSort: false),
22 
23                      @Model.Column("NCDR", "NCDR", format: @<b><i>@item.NCDR</i></b>, canSort: false),
24 
25                      @Model.Column("baseline", format: @<i>@item.baseline</i>, canSort: false),
26 
27                      @Model.Column("cumulative",format: @<i>@item.cumulative</i>, canSort: false),
28 
29                      @Model.Column("target", format: @<i>@item.target</i>, canSort: false),
30 
31                      @Model.Column("cumulativetarget", format: @<i>@item.cumulativetarget</i>, canSort: false)),
32 
33        tableStyle: "grid", headerStyle: "headerStyle1",
34 
35        selectedRowStyle: "selectedRowStyle",
36 
37        caption: "List METRICS_DATA Table",
38 
39        displayHeader: !IsPost,
40 
41        fillEmptyRows: !IsPost,
42 
43        emptyRowCellValue: "",
44 
45        mode: WebGridPagerModes.All,
46 
47        firstText: "First",
48 
49        previousText: "Previous", nextText: "Next",
50 
51        lastText: "Last"
52 
53  
54 
55 )
56 
57 </div>
58 
59 <h3>
60 
61     Page Count:
62 
63     @Html.Encode(@Model.PageCount)
64 
65     <br/>
66 
67     Total Record:
68 
69     @Html.Encode(@Model.TotalRowCount)
70 
71 </h3>
View Code

Note: @model WebGrid,   Declare variables the you will use.

In the Models ,add a class of member 

1         public string Date { get; set; }
2 
3         public double Value { get; set; }
View Code

In the HomeController, add this Action

Firstly, add reference System.Web.DataVisualization

using MvcMetrics.Models;

using System.Web.UI.DataVisualization.Charting;

using System.IO;

 

 

        public FileResult GetChart()

        {

  //NCDR,baseline,cumulative,target,cumulativetarge

  //We use target make the  scale of X and Y

  //use VIEW of database,get the all records

  var records = db.VIEW_SUM.ToList();

  

  List<double> dataNCDR = new List<double>();//NCDR

  List<double> databaseline = new List<double>();//baseline

  List<double> datacumulative = new List<double>();//cumulative

  List<Member> datatarget = new List<Member>();//target, X and Y

  List<double> datacumulativetarget = new List<double>();//cumulativetarget

 

  //spefical null,get the data for NCD,baseline,cumulative,target,cumulativetarge

  foreach (var record in records)

  {

      //note : the start is not null,so can deal with it in this way

      if (record.NCDR != null)

          dataNCDR.Add((double)record.NCDR);

 

      databaseline.Add((double)record.BASELINE);

 

      if (record.CUMULATIVE != null)

          datacumulative.Add((double)record.CUMULATIVE);

 

      //Member.Data is the X scale, Member.Value is the Y scale,the important is X scale

      Member temp = new Member() { Date = record.STR_YEAR_MONTH, Value = (double)record.TARGET };

      datatarget.Add(temp);

      datacumulativetarget.Add((double)record.CUMULATIVETARGET);

  }

 

 

  System.Web.UI.DataVisualization.Charting.Chart Chart1 = new System.Web.UI.DataVisualization.Charting.Chart();

 

  //the Height and Width of Chart1

  Chart1.Width = 800;//412

  Chart1.Height = 480;//296

 

  Chart1.RenderType = System.Web.UI.DataVisualization.Charting.RenderType.ImageTag;

  Chart1.Palette = ChartColorPalette.BrightPastel;

  Title t = new Title("NCDR Test MVC", Docking.Top, new System.Drawing.Font("Trebuchet MS", 14, System.Drawing.FontStyle.Bold),System.Drawing.Color.FromArgb(26, 59, 105));

  Chart1.Titles.Add(t);//add Title of Chart1

 

 

  //create a area of Chart1,use "Series 1" or others.

  Chart1.ChartAreas.Add("Series 1");

 

  //set Coordinate axis intervals Of X = 1

  Chart1.ChartAreas[0].AxisX.Interval = 1;   

  Chart1.ChartAreas[0].AxisX.IntervalOffset = 1;  

  //the scale of X display in one line or two line when it >= 9

  Chart1.ChartAreas[0].AxisX.LabelStyle.IsStaggered = false;   

  //change the x display Angle

  Chart1.ChartAreas[0].AxisX.LabelStyle.Angle = 45;

 

 

  //add Series, five .   the "Series 6" is used to make other effect

  Chart1.Series.Add("Series 1");

  Chart1.Series.Add("Series 2");

  Chart1.Series.Add("Series 3");

  Chart1.Series.Add("Series 4");

  Chart1.Series.Add("Series 5");

  Chart1.Series.Add("Series 6");//make other effect

 

  //test，in one Chart, Column 1 and Line 4

  Chart1.Series["Series 1"].ChartType = SeriesChartType.Column;//StackedColumn  Column

  Chart1.Series["Series 2"].ChartType = SeriesChartType.Line;

  Chart1.Series["Series 3"].ChartType = SeriesChartType.Line;

  Chart1.Series["Series 4"].ChartType = SeriesChartType.Line;

  Chart1.Series["Series 5"].ChartType = SeriesChartType.Line;

 

  ////make other effect

  Chart1.Series["Series 6"].ChartType = SeriesChartType.Point;

  // display the value of the Point

  Chart1.Series["Series 3"].IsValueShownAsLabel = true;

  Chart1.Series["Series 5"].IsValueShownAsLabel = true;

 

 

  //DataBindXY()  ,X scale,Y scale,use datatarget,"Series 4"

  Chart1.Series["Series 4"].Points.DataBindXY(datatarget, "date", datatarget, "value");

 

  //make Chart

  foreach (double value in dataNCDR)

  {

      Chart1.Series["Series 1"].Points.AddY(value);

  }

   

  foreach (double value in databaseline)

  {

      Chart1.Series["Series 2"].Points.AddY(value);

  }

 

  foreach (double value in datacumulative)

  {

      //double effects use the "Series 3" and "Series 6"

      Chart1.Series["Series 3"].Points.AddY(value);

      Chart1.Series["Series 6"].Points.AddY(value);

  }

 

  foreach (double value in datacumulativetarget)

  {

      Chart1.Series["Series 5"].Points.AddY(value);

  }

 

 

  //NCDR,baseline,cumulative,target,cumulativetarge

  Chart1.Series["Series 1"].Name = "NCDR";

  Chart1.Series["Series 2"].Name = "baseline";

  Chart1.Series["Series 3"].Name = "cumulative";

  Chart1.Series["Series 4"].Name = "target";

  Chart1.Series["Series 5"].Name = "cumulativetarge";

 

  //the "Series 6" do not displey in the Legend

  Chart1.Series["Series 6"].IsVisibleInLegend = false;

 

 

  //X Title

  Chart1.ChartAreas[0].AxisX.Title = "Date";

  Chart1.ChartAreas[0].AxisX.TitleFont = new System.Drawing.Font("Anonymous Pro", 10, System.Drawing.FontStyle.Regular);

 

  //Y Title

  Chart1.ChartAreas[0].AxisY.Title = "Value";

  Chart1.ChartAreas[0].AxisY.TitleFont = new System.Drawing.Font("Anonymous Pro", 10, System.Drawing.FontStyle.Regular);

 

  //x Major Line

  Chart1.ChartAreas[0].AxisX.MajorGrid.Enabled = false;

  Chart1.ChartAreas[0].BorderDashStyle = ChartDashStyle.Solid;   //设置chartareas区域的边框样式

  

 

  //Border    the style of Border

  Chart1.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;

  Chart1.BorderlineWidth = 2;

  Chart1.BorderColor = System.Drawing.Color.Black;

  Chart1.BorderlineDashStyle = ChartDashStyle.Solid;

  Chart1.BorderWidth = 2;

 

  //the location of Legend

  Legend legend1 = new Legend();

  legend1.Docking = Docking.Top;

  legend1.Alignment = System.Drawing.StringAlignment.Center;

 

  Chart1.Legends.Add(legend1);

 

  //IO

  MemoryStream imageStream = new MemoryStream();

  Chart1.SaveImage(imageStream, ChartImageFormat.Png);

  imageStream.Position = 0;

  return new FileStreamResult(imageStream, "image/png");

 

 

        }

in index.cshtml，add 

<div>

    <img src="/Home/GetChart" alt="Chart" />

</div>

Run,Result:

Code Details

HomeController.cs 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

 

using MvcMetrics.DAL;

using System.Web.Helpers;

 

using MvcMetrics.Models;

using System.Web.UI.DataVisualization.Charting;

using System.IO;

 
namespace MvcMetrics.Controllers

{
    public class HomeController : Controller

    {  

        //Database context,

        private MetricsEntities db = new MetricsEntities();

         public ActionResult Index()

        {

  //ViewBag.Message = "Welcome to ASP.NET MVC!";

  //use VIEW of database,get the all records

  var records = db.VIEW_SUM.ToList();

  

  var grid = new WebGrid(

            source: records,

            fieldNamePrefix: "grid_",

            defaultSort: "RELEASEDATE",// the way of sort

            canPage: true,

            canSort: true,

            ajaxUpdateContainerId: "DivGrid", // ajaxUpadate bind

            pageFieldName: "paging",

            sortDirectionFieldName: "RELEASEDATE",

             rowsPerPage: 4 //per page the count of records

              );

  return View(grid);

         }


        public FileResult GetChart()

        {

  //NCDR,baseline,cumulative,target,cumulativetarge

  //We use target make the  scale of X and Y

  //use VIEW of database,get the all records

  var records = db.VIEW_SUM.ToList();

  

  List<double> dataNCDR = new List<double>();//NCDR

  List<double> databaseline = new List<double>();//baseline

  List<double> datacumulative = new List<double>();//cumulative

  List<Member> datatarget = new List<Member>();//target, X and Y

  List<double> datacumulativetarget = new List<double>();//cumulativetarget

 

  //spefical null,get the data for NCD,baseline,cumulative,target,cumulativetarge

  foreach (var record in records)

  {

      //note : the start is not null,so can deal with it in this way

      if (record.NCDR != null)

          dataNCDR.Add((double)record.NCDR);

      databaseline.Add((double)record.BASELINE);

 
      if (record.CUMULATIVE != null)

          datacumulative.Add((double)record.CUMULATIVE);

       //Member.Data is the X scale, Member.Value is the Y scale,the important is X scale

      Member temp = new Member() { Date = record.STR_YEAR_MONTH, Value = (double)record.TARGET };

      datatarget.Add(temp);

      datacumulativetarget.Add((double)record.CUMULATIVETARGET);

  }


  System.Web.UI.DataVisualization.Charting.Chart Chart1 = new System.Web.UI.DataVisualization.Charting.Chart();

 
  //the Height and Width of Chart1

  Chart1.Width = 800;//412

  Chart1.Height = 480;//296
 

  Chart1.RenderType = System.Web.UI.DataVisualization.Charting.RenderType.ImageTag;

  Chart1.Palette = ChartColorPalette.BrightPastel;

  Title t = new Title("NCDR Test MVC", Docking.Top, new System.Drawing.Font("Trebuchet MS", 14, System.Drawing.FontStyle.Bold),System.Drawing.Color.FromArgb(26, 59, 105));

  Chart1.Titles.Add(t);//add Title of Chart1

 
  //create a area of Chart1,use "Series 1" or others.

  Chart1.ChartAreas.Add("Series 1");

 

  //set Coordinate axis intervals Of X = 1

  Chart1.ChartAreas[0].AxisX.Interval = 1;   

  Chart1.ChartAreas[0].AxisX.IntervalOffset = 1;  

  //the scale of X display in one line or two line when it >= 9

  Chart1.ChartAreas[0].AxisX.LabelStyle.IsStaggered = false;   

  //change the x display Angle

  Chart1.ChartAreas[0].AxisX.LabelStyle.Angle = 45;

 
  //add Series, five .   the "Series 6" is used to make other effect

  Chart1.Series.Add("Series 1");

  Chart1.Series.Add("Series 2");

  Chart1.Series.Add("Series 3");

  Chart1.Series.Add("Series 4");

  Chart1.Series.Add("Series 5");

  Chart1.Series.Add("Series 6");//make other effect

 
  //test，in one Chart, Column 1 and Line 4

  Chart1.Series["Series 1"].ChartType = SeriesChartType.Column;//StackedColumn  Column

  Chart1.Series["Series 2"].ChartType = SeriesChartType.Line;

  Chart1.Series["Series 3"].ChartType = SeriesChartType.Line;

  Chart1.Series["Series 4"].ChartType = SeriesChartType.Line;

  Chart1.Series["Series 5"].ChartType = SeriesChartType.Line;

 

   ////make other effect

  Chart1.Series["Series 6"].ChartType = SeriesChartType.Point;

  // display the value of the Point

  Chart1.Series["Series 3"].IsValueShownAsLabel = true;

  Chart1.Series["Series 5"].IsValueShownAsLabel = true;

 
  //DataBindXY()  ,X scale,Y scale,use datatarget,"Series 4"

  Chart1.Series["Series 4"].Points.DataBindXY(datatarget, "date", datatarget, "value");

 

  //make Chart

  foreach (double value in dataNCDR)

  {
      Chart1.Series["Series 1"].Points.AddY(value);
  }

  foreach (double value in databaseline)

  {
      Chart1.Series["Series 2"].Points.AddY(value);
  } 

  foreach (double value in datacumulative)

  {

      //double effects use the "Series 3" and "Series 6"

      Chart1.Series["Series 3"].Points.AddY(value);

      Chart1.Series["Series 6"].Points.AddY(value);

  }

  foreach (double value in datacumulativetarget)

  {

      Chart1.Series["Series 5"].Points.AddY(value);

  }

   //NCDR,baseline,cumulative,target,cumulativetarge

  Chart1.Series["Series 1"].Name = "NCDR";

  Chart1.Series["Series 2"].Name = "baseline";

  Chart1.Series["Series 3"].Name = "cumulative";

  Chart1.Series["Series 4"].Name = "target";

  Chart1.Series["Series 5"].Name = "cumulativetarge";

 

  //the "Series 6" do not displey in the Legend

  Chart1.Series["Series 6"].IsVisibleInLegend = false;

 

 

  //X Title

  Chart1.ChartAreas[0].AxisX.Title = "Date";

  Chart1.ChartAreas[0].AxisX.TitleFont = new System.Drawing.Font("Anonymous Pro", 10, System.Drawing.FontStyle.Regular);

 

  //Y Title

  Chart1.ChartAreas[0].AxisY.Title = "Value";

  Chart1.ChartAreas[0].AxisY.TitleFont = new System.Drawing.Font("Anonymous Pro", 10, System.Drawing.FontStyle.Regular);

 

  //Y Major Line

  Chart1.ChartAreas[0].AxisX.MajorGrid.Enabled = false;

  Chart1.ChartAreas[0].BorderDashStyle = ChartDashStyle.Solid;   //border Style	 

 

  //Border    the style of Border

  Chart1.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;

  Chart1.BorderlineWidth = 2;

  Chart1.BorderColor = System.Drawing.Color.Black;

  Chart1.BorderlineDashStyle = ChartDashStyle.Solid;

  Chart1.BorderWidth = 2;

 

  //the location of Legend

  Legend legend1 = new Legend();

  legend1.Docking = Docking.Top;

  legend1.Alignment = System.Drawing.StringAlignment.Center;

 
  Chart1.Legends.Add(legend1);
 

  //IO

  MemoryStream imageStream = new MemoryStream();

  Chart1.SaveImage(imageStream, ChartImageFormat.Png);

  imageStream.Position = 0;

  return new FileStreamResult(imageStream, "image/png");
 
        }
 

        public ActionResult About()

        {

  return View();

        }
 
    }

}
 

Home/index.cshtml 
 

@model WebGrid

 

@{

    ViewBag.Title = "Test";

}

 

<div id="DivGrid">

@Model.GetHtml(

        columns: @Model.Columns(

                     @Model.Column("ID", "NO"),

                     @Model.Column("STR_YEAR_MONTH", format: @<i>@item.STR_YEAR_MONTH</i>, canSort: false),

                     @Model.Column("NCDR", "NCDR", format: @<b><i>@item.NCDR</i></b>, canSort: false),

                     @Model.Column("baseline", format: @<i>@item.baseline</i>, canSort: false),

                     @Model.Column("cumulative",format: @<i>@item.cumulative</i>, canSort: false),

                     @Model.Column("target", format: @<i>@item.target</i>, canSort: false),

                     @Model.Column("cumulativetarget", format: @<i>@item.cumulativetarget</i>, canSort: false)),

       tableStyle: "grid", headerStyle: "headerStyle1",

       selectedRowStyle: "selectedRowStyle",

       caption: "List METRICS_DATA Table",

       displayHeader: !IsPost,

       fillEmptyRows: !IsPost,

       emptyRowCellValue: "",

       mode: WebGridPagerModes.All,

       firstText: "First",

       previousText: "Previous", nextText: "Next",

       lastText: "Last"

 

)

</div>

<h3>

    Page Count:

    @Html.Encode(@Model.PageCount)

    <br/>

    Total Record:

    @Html.Encode(@Model.TotalRowCount)

</h3>

 

<div>

    <img src="/Home/GetChart" alt="Chart" />

</div>
 

Member.cs 
 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

 

namespace MvcMetrics.Models

{

    public class Member

    {

        public string Date { get; set; }

        public double Value { get; set; }

    }

}

                

        

        

    




    

      

        

            

              
                
                  liuxufeiyang000
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
ASP.NET MVC4中的WebGrid

				
			

			

				

					04-05
				

			

		

		

			
				
ASP.NET MVC4中的WebGrid是一个强大的工具，用于在网页上展示...为了深入了解和实践，你可以参考提供的资源“WebGrid-in-ASP-NET-MVC4.pdf”，或者直接下载LogOn.aspx页面提供的“WebGrid.zip”压缩包进行学习和实验。

			
		

	



                

              
                



	

		

			

				
					
asp.net MVC WebGrid源码

				
			

			

				

					06-08
				

			

		

		

			
				
WebGrid是ASP.NET MVC中用于数据呈现的一个功能强大的控件，它允许开发者在网页上方便地显示数据表格。  在这个名为"PhototsMVC"的项目中，我们可以看到作者应用了ASP.NET MVC来实现用户管理、权限管理、菜单管理...

			
		

	



                


  
              

                


	

		

			

				
					
使用jQuery和chart.js获取并展示环境检测数据

				
			

			

				

					gc_2299的博客
				

				

					09-08
					
					462
					
				

			

		

		

			
				
Ubuntu下，使用jQuery调用WebAPI获取环境检测数据，并以图表（chart.js)方式展示

			
		

	





	

		

			

				
					
BootstrapBlazor实战 Chart 图表使用(1)

				
			

			

				

					alex_zoucn的博客
				

				

					04-03
					
					2883
					
				

			

		

		

			
				
BootstrapBlazor组件 Chart 图表介绍
通过给定数据，绘画各种图表的组件
本文主要介绍三种图表使用:折线图,柱状图,饼图



1.新建工程
新建工程b06chart,使用 nuget.org 进行 BootstrapBlazor 组件安装, Chart 库,字体. 将项目添加到解决方案中
dotnet new blazorserver -o b06chart
dotnet add b06chart package BootstrapBlazor
dotnet add b06chart p

			
		

	



		

			
		



	

		

			

				
					
MVC3-RAZOR尝鲜之漂亮的chart图表

				
			

			

				

					weixin_33840661的博客
				

				

					12-06
					
					224
					
				

			

		

		

			
				
 目录    1 创建一个Chart    2 添加标题    3 添加数据源     3.1 反复调用AddSeries可以添加多个     3.2 重复绑定 3.3 使用xml作为数据源    4 数据绑定    5 添加图注    6 保存数据    7 图表与缓存    8 保存到文件    9 其他             1创建一个Chart  public Chart(  int w...

			
		

	





	

		

			

				
					
MVC学习笔记三：WebGrid控件的简单使用

				
			

			

				

					sudazf的专栏
				

				

					11-06
					
					3813
					
				

			

		

		

			
				
WebGrid控件的使用
之前只是记录了MVC+EF在数据库进行简单的增删改查，但是实际项目却要用到很多控件，这里先记录下WebGrid控件的简单使用。


首先将我们之前用的Index视图代码修改成如下：



@model IEnumerable

@{
    ViewBag.Title = "Index";
}

Index


    @Html.ActionLink("

			
		

	





	

		

			

				
					
C#编程学习47：图表控件Chart的使用

				
			

			

				

					m1m2m3mmm的博客
				

				

					09-23
					
					4266
					
				

			

		

		

			
				
使用细节及需求总结

			
		

	





	

		

			

				
					
如何在MVC 3 razor + asp.net中将texbox添加到webgrid的页脚中

				
			

			

				

					04-04
				

			

		

		

			
				
1. **WebGrid控件**：WebGrid是ASP.NET MVC框架的一部分，用于在网页上显示表格数据。它可以自动绑定到各种数据源，如List、IEnumerable或IQueryable对象，提供了分页、排序和筛选等功能。  2. **Razor语法**：Razor...

			
		

	





	

		

			

				
					
WebGrid ASP.NET DataGrid Control-开源

				
			

			

				

					05-15
				

			

		

		

			
				
WebGrid是ASP.NET框架中的一个强大控件，它允许开发者创建功能丰富的、跨浏览器兼容的Web数据网格。这个开源的数据网格控件旨在简化数据呈现和交互，尤其在处理数据源的更新、插入和删除操作时。下面将详细介绍...

			
		

	





	

		

			

				
					
WebGrid标头对齐和排序图标

				
			

			

				

					04-05
				

			

		

		

			
				
.webgrid-header .sort-asc::before {  content: '\2191'; /* Unicode character for up arrow */ }  .webgrid-header .sort-desc::before {  content: '\2193'; /* Unicode character for down arrow */ } ``` 这段...

			
		

	





	

		

			

				
					
MVCChart图表展示

				
			

			

				

					12-19
				

			

		

		

			
				
MVC写的图表展示小程序，曲线图，柱状图等，供初学MVC者使用

			
		

	





	

		

			

				
					
基于C#的Chart控件完整示例(源码)

				
			

			

				

					10-31
				

			

		

		

			
				
股票K线图、饼状图、柱状图、折线图，各种开源制表图形源代码

			
		

	





	

		

			

				
					
好看数据表格GRID

				
			

			

				

					12-06
				

			

		

		

			
				
grid能很好的显示数据，相信大家会喜欢

			
		

	





	

		

			

				
					
爱上MVC~图表的使用Chart

				
			

			

				

					weixin_33924220的博客
				

				

					05-20
					
					119
					
				

			

		

		

			
				
回到目录
图表在一个系统中是必须的，MVC架构把它当然是一个扩展集成了进来，通过简单的几句话就可以生成一个风格多样的图表，这给报表的开发带来了很大的方便，大叔的项目中也做了一个测试，把主要的代码贴出来，和大家分享一下。
首先一个Action，返回你需要的图表

 　　　  public void Chart(string type = "Column")
        {
     ...

			
		

	





	

		

			

				
					
ASP.NET MVC使用Echarts动态生成图表

				
			

			

				

					5653325的专栏
				

				

					08-16
					
					8657
					
				

			

		

		

			
				
ASP.NET MVC使用Echarts动态生成图表

			
		

	





	

		

			

				
					
利用MVC Chart 打造后台图表、前端图表

				
			

			

				

					weixin_30932215的博客
				

				

					05-19
					
					219
					
				

			

		

		

			
				
　　应用场景是这个样子的：要做导出数据到PDF的功能，涉及到文本、表格、图表等内容。在做图表功能时，发现之前用Highcharts做的图表根本就不能集成到PDF中。这里需要一个能在程序后台就生成图表的功能，通过两个步骤进行集成：
　　1）将图表生成到一个图片文件中，存储在服务器上；
　　2）根据指定的图片路径，将图片集成到PDF。
　　那么集成的核心就为：如何在.net程序后台就生成一个图表...

			
		

	





	

		

			

				
					
C# .net mvc实战项目 数据动态绑定到图表+动态绑定颜色+多Y轴实现+对应通道单位绑定显示+设置相应通道量程 （四）

				
			

			

				

					weixin_39448579的博客
				

				

					09-17
					
					1092
					
				

			

		

		

			
				
效果图

视图代码：

@{
    ViewBag.Title = "Index";
}

<head>
    <script src="~/Content/echarts.min.js"></script>
    <script src="~/Content/jquery-3.5.1.js"></script>
    <script src="~/Content/jquery-3.5.1.min.js"></script

			
		

	





	

		

			

				
					
Infragistics2 v6.2

					
最新发布

				
			

			

				

					07-27
				

			

		

		

			
				
- *2* [NetAdvantage v6.2中WebGrid中提供删除确认提示](https://blog.csdn.net/iteye_9104/article/details/81421283)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值