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

ایجاد نمودار سازمانی با استفاده از API نمودار سازمانی Google در ASP.Net MVC
0 0
ایجاد نمودار سازمانی با استفاده از API نمودار سازمانی Google در ASP.Net MVC

با سلام در این مقاله با یک مثال توضیح خواهیم داد که چگونه می توانید نمودار سازمانی را از طریق پایگاه داده با استفاده از API نمودار سازمانی Google در ASP.Net MVC 5 Razor ایجاد کنید.
نمودار سازمانی تصاویر را در هر گره از نمودار سازمانی Google نمایش می دهد .
سوابق بانک اطلاعاتی متشکل از اطلاعات سلسله مراتب سازمانی برای جمع آوری نمودار سازمانی Google با نشانگرهای متعدد در ASP.Net MVC 5 Razor استفاده خواهد شد.
بانک اطلاعات
 از جدول زیر EmployeesHierarchy با طرح زیر استفاده کرده ایم.

 قبلاً چند رکورد در جدول وارد کرده ایم. مدیر هر یک از کارمندان را می توان با استفاده از ستون ReportingManager که EmployeeId مدیر یک کارمند را ذخیره می کند ، تعیین کرد.

توجه :

می توانید جدول بانک اطلاعاتی SQL را با کلیک روی لینک دانلود کنید. فایل SQL را بارگیری کنید

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

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

Controller
Controller از دو روش تشکیل شده است.
روش انجام عملیات GET
در داخل این روش Action ، به سادگی نمایش داده می شود.
روش جابجایی عملیات جی کوئری AJAX
در داخل این روش ، سوابق از جدول EmployeesHierarchy با استفاده از ADO.Net گرفته می شوند .
SQL Query سوابق مربوط به همه کارمندان را بدست می آورد و نتایج با استفاده از DataReader در یک آرایه شیء دو بعدی جمع می شود که در نهایت به عنوان یک لیست عمومی از اشیاء به مشتری ارسال می شود.
سرانجام فهرست عمومی اشیاء به عنوان JSON به نمایش داده می شود.

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
 
    public JsonResult AjaxMethod()
    {
        List<object> chartData = new List<object>();
        string query = "SELECT EmployeeId, Name, Designation, ReportingManager";
        query += " FROM EmployeesHierarchy";
        string constr = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
        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 object[]
                        {
                            sdr["EmployeeId"], sdr["Name"], sdr["Designation"] , sdr["ReportingManager"]
                        });
                    }
                }
                con.Close();
            }
        }
 
        return Json(chartData);
    }
}

View
این View شامل یک عنصر HTML DIV است که برای بارگیری و نمایش نمودار سازمانی Google استفاده خواهد شد .
توجه :

برای اجرای برنامه سازمانی Google ، باید ثبت نام کنید و یک کلید API را در Google API ثبت کنید. برای اطلاعات بیشتر به اینجا مراجعه کنید .
برای بدست آوردن داده های نمودار سازمانی از پایگاه داده از روش اکشن AJAX (که در ابتدا توضیح داده شد) و jQuery AJAX و سپس استفاده از داده ها برای جمعیت نمودار سازمانی  Google استفاده می شود .
زمانی که بارگیری بسته های API نمودار سازمانی Google و بارگیری تمام بسته ها انجام شود ، روش DrawChart فراخوانی می شود.
در داخل این روش ، یک ارتباط جی کوئری AJAX به روش AJAX Action ایجاد می شود که سوابق را از پایگاه داده به عنوان مجموعه ای از اشیاء دریافت می کند.
پس از دریافت پاسخ AJAX ، شی در Google Visualization DataTable ایجاد می شود. به منظور جمع آوری نمودار سازمانی ، Google Visualization DataTable باید شامل سه ستون باشد.
توجه :

می توانید هر نام دلخواه خود را روی ستون ها تنظیم کنید. ما بر حسب اهمیت اسم آورده ایم.
1. Entity - این ستون شیء Entity یا Node را در نمودار سازمانی Google ذخیره می کند . این شیء از دو ویژگی تشکیل شده است:
a) v - شناسه منحصر به فرد Entity یا Node را ذخیره می کند. در این مثال ، آن EmployeeId است.
b) f - این جزئیات قالب بندی Entity یا Node را ذخیره می کند. در این مثال ، EmployeeName را در بالا نشان داده ایم ، به دنبال آن نامگذاری و در آخر تصویر کارمند است .
2. ParentEntity - این ستون شناسه منحصر به فرد ParentEntity یعنی ReportingManagerId را ذخیره می کند. این برای یافتن والدین یک گره خاص بسیار مهم است. در صورت خالی ماندن ، گره به عنوان Root Node در نظر گرفته می شود.
3. ToolTip - این ستون برای اتصال ابزار ToolTip به عنوان Node استفاده می شود به طوری که هنگامی که ماوس حرکت کند ، مرورگر پیش فرض ToolTip نمایش داده می شود. اگر نمی خواهید ToolTip را نمایش دهید ، آن را خالی بگذارید.
سرانجام یک حلقه اجرا می شود و یک به یک ، سوابق در Google Visualization DataTable درج می شوند که سپس برای ترسیم نمودار روی عنصر HTML DIV مشخص شده استفاده می شود.

@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi?key=API_KEY"></script>
    <script type="text/javascript">
        google.load("visualization", "1", { packages: ["orgchart"] });
        google.setOnLoadCallback(drawChart);
        function drawChart() {
            $.ajax({
                type: "POST",
                url: "/Home/AjaxMethod",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    var data = new google.visualization.DataTable();
                    data.addColumn('string', 'Entity');
                    data.addColumn('string', 'ParentEntity');
                    data.addColumn('string', 'ToolTip');
                    for (var i = 0; i < r.length; i++) {
                        var employeeId = r[i][0].toString();
                        var employeeName = r[i][1];
                        var designation = r[i][2];
                        var reportingManager = r[i][3] != null ? r[i][3].toString() : '';
                        data.addRows([[{
                            v: employeeId,
                            f: employeeName + '<div>(<span>' + designation + '</span>)</div><img src = "/Pictures/' + employeeId + '.jpg" />'
                        }, reportingManager, designation]]);
                    }
                    var chart = new google.visualization.OrgChart($("#chart")[0]);
                    chart.draw(data, { allowHtml: true });
                },
                failure: function (r) {
                    alert(r);
                },
                error: function (r) {
                    alert(r);
                }
            });
        }
    </script>
    <div id="chart">
    </div>
</body>
</html>

عکس صفحه

 


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

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