توضیحات و دانلود

استفاده از کنترل نمودار در ASP.Net MVC Razor
0 0
استفاده از کنترل نمودار در ASP.Net MVC Razor

با سلام  در این مقاله با یک مثال توضیح خواهیم داد که چگونه می توان از کنترل نمودار برای ایجاد نمودارها از بانک اطلاعاتی با استفاده از کلاس Charts Helper در ASP.Net MVC Razor استفاده کرد.
در این مقاله نحوه ایجاد نمودارهای پای از پایگاه داده با استفاده از کلاس Charts Helper در ASP.Net MVC Razor توضیح داده خواهد شد.
بانک اطلاعات
در اینجا از پایگاه داده Northwind استفاده می کنیم. شما می توانید آن را از اینجا دانلود کنید.
پایگاه داده Northwind را بارگیری و نصب کنید
Model
کلاس Model زیر از دو ویژگی یعنی ShipCity و TotalOrders تشکیل شده است.

public class OrderModel
{
    public string ShipCity { get; set; }
    public int TotalOrders { get; set; }
}

فضاهای نام
باید نامهای زیر را وارد کنید.

using System.Data;
using System.Data.SqlClient;
using System.Configuration;

Controller
Controller از روش Index Action تشکیل شده است. در داخل این روش Action ، داده های آماری برای نمودار Pie از جدول Orders گرفته شده و در لیست عمومی از اشیاء کلاس OrderModel جمع آوری می شوند.
سرانجام لیست عمومی کلاس OrderModel به View باز مي گردد

public ActionResult Index()
{
    string query = "SELECT ShipCity, COUNT(orderid) TotalOrders";
    query += " FROM Orders WHERE ShipCountry = 'USA' GROUP BY ShipCity";
    string constr = ConfigurationManager.ConnectionStrings["Constring"].ConnectionString;
    List<OrderModel> chartData = new List<OrderModel>();
 
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand(query))
        {
            cmd.CommandType = CommandType.Text;
            cmd.Connection = con;
            con.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    chartData.Add(new OrderModel
                    {
                        ShipCity = sdr["ShipCity"].ToString(),
                        TotalOrders = Convert.ToInt32(sdr["TotalOrders"])
                    });
                }
            }
 
            con.Close();
        }
    }
 
    return View(chartData);
}

View
در داخل View، در خط اول ، لیست عمومی کلاس OrderModel به عنوان Modelبرای Viewاعلام شد
نمودار Pie با استفاده از روش Chart ایجاد می شود که پارامترهای زیر را می پذیرد.
Width - عرض نمودار.
Height - ارتفاع نمودار.
Theme (اختیاری) - اجازه می دهد تا موضوع نمودار را از تم های پیش تعریف شده تنظیم کنید.
روش های زیر نیز استفاده می شود.
AddTitle - عنوان را برای نمودار تنظیم می کند.
AddSeries - این روش نوع نمودار یعنی Pie ، Bar و غیره را تعیین می کند و همچنین مقادیر X و Y را برای نمودار تعیین می کند.
Write - روش نوشتن برای ارائه نمودار در صفحه استفاده می شود.

@model List<Charts_MVC.Models.OrderModel>
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    @{
        var chart = new Chart(width: 500, height: 500, theme: ChartTheme.Yellow)
       .AddTitle("USA City Distribution")
       .AddSeries("Default", chartType: "Pie",
            xValue: Model, xField: "ShipCity",
            yValues: Model, yFields: "TotalOrders")
        .Write();
    }
</body>
</html>

عکس صفحه

 


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :