如何使用Entity Framework Core和Highcharts创建费用管理器

最新推荐文章于 2023-07-24 17:08:54 发布

cumian9828

最新推荐文章于 2023-07-24 17:08:54 发布

阅读量230

点赞数

文章标签：数据库 java mvc python vue ViewUI

原文链接：https://www.freecodecamp.org/news/how-to-create-an-expense-manager-using-entity-framework-core-and-highcharts-32f3b1ad0dbc/

版权

介绍 (Introduction)

In this article, we will be creating a personal expense manager using ASP.NET Core 2.1 and Entity Framework (EF) core Code First approach. This expense manager tracks your daily expenses and provides comparative charts to show your expense summary. We are using modal dialog to handle user inputs and to show monthly and weekly expense summary chart using Highcharts. Hence, this will be a Single Page Application (SPA).

在本文中，我们将使用ASP.NET Core 2.1和Entity Framework(EF)核心代码优先方法创建个人费用管理器。该费用经理跟踪您的日常费用并提供比较图表以显示您的费用摘要。我们正在使用模式对话框来处理用户输入，并使用Highcharts显示每月和每周的费用摘要表。因此，这将是一个单页应用程序(SPA)。

We will be using Visual Studio 2017 and SQL Server 2017 for our demo.

我们将在演示中使用Visual Studio 2017和SQL Server 2017。

Let us look at the final application:

让我们看一下最终的应用程序：

先决条件 (Prerequisites)

Install .NET Core 2.1 SDK from here
从此处安装.NET Core 2.1 SDK
Install the latest version of Visual Studio 2017 from here
从此处安装最新版本的Visual Studio 2017
SQL Server 2008 or above
SQL Server 2008或以上

源代码 (Source Code)

Before proceeding, I recommend you get the source code from GitHub.

在继续之前，建议您从GitHub获取源代码。

创建ASP.NET Core项目 (Create the ASP.NET Core project)

Open Visual Studio and select “File” > “New” > “Project”.

打开Visual Studio，然后选择“文件”>“新建”>“项目”。

After selecting the project, a “New Project” dialog will open. Select “.NET Core” in the left panel inside the Visual C# menu.

选择项目后，将打开“新建项目”对话框。在Visual C＃菜单内的左侧面板中选择“ .NET Core”。

Then, select “ASP.NET Core Web Application” from the available project types. Put the name of the project as “ExpenseManager” and press “OK” to create the ASP.NET Core Project.

然后，从可用的项目类型中选择“ ASP.NET Core Web应用程序”。将项目名称命名为“ ExpenseManager”，然后按“确定”以创建ASP.NET Core项目。

After clicking on OK, a new dialog will open asking you to select the project template.

单击确定后，将打开一个新对话框，要求您选择项目模板。

You will see two drop-down menus at the top left of the template window. Select “.NET Core” and “ASP.NET Core 2.1” from these dropdowns. Then, select “Web application (Model-View-Controller)” template and press “OK”.

您将在模板窗口的左上方看到两个下拉菜单。从这些下拉列表中选择“ .NET Core”和“ ASP.NET Core 2.1”。然后，选择“ Web应用程序(模型-视图-控制器)”模板，然后按“确定”。

将模型添加到应用程序 (Adding the model to the application)

Since we are using the EF core Code First approach, first we will create our model class. Then we will generate our database tables using the model.

由于我们使用的是EF核心代码优先方法，因此首先我们将创建模型类。然后，我们将使用该模型生成数据库表。

Right click on the “Models” folder and select “Add” > “Class”. Name your class “ExpenseReport.cs”. This class will contain our “Employee” model properties.

右键单击“模型”文件夹，然后选择“添加”>“类”。将您的班级命名为“ ExpenseReport。 cs ”。该类将包含我们的“ Employee”模型属性。

Open the “ExpenseReport.cs” file and put in the following code:

打开“ ExpenseReport.cs”文件，并输入以下代码：

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Linq;
using System.Threading.Tasks;

namespace ExpenseManager.Models
{
    public class ExpenseReport
    {
        [Key]
        public int ItemId { get; set; }
        [Required]
        public string ItemName { get; set; }

        [Required]
        [DataType(DataType.Currency)]
        [Column(TypeName = "decimal(10, 2)")]
        public decimal Amount { get; set; }

        [DataType(DataType.Date)]
        [DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}", ApplyFormatInEditMode = true)]
        [Required]
        public DateTime ExpenseDate { get; set; } = DateTime.Now;

        [Required]
        public string Category { get; set; }
    }
}

We have used the [Key] attribute with ItemId to make it the primary key while creating the database table.

在创建数据库表时，我们已将[Key]属性与ItemId一起用作主键。

使用EF Core Code First方法创建数据库表 (Creating the database table using the EF Core Code First approach)

In order to create our tables using EF Core Code First approach, we need to install few NuGet packages.

为了使用EF Core Code First方法创建表，我们需要安装一些NuGet软件包。

Navigate to “Tools” > “NuGet Package Manager” > “Package Manager Console”.

导航到“工具”>“ NuGet软件包管理器”>“软件包管理器控制台”。

We have to install the package for the database provider that we are targeting. In this case, it is SQL Server. Hence, run the following command:

我们必须为目标数据库安装程序安装软件包。在这种情况下，它是SQL Server。因此，运行以下命令：

Install-Package Microsoft.EntityFrameworkCore.SqlServer

Since we are using EF Tools to create a table from the existing model, we will install the Tools package as well. Run the following command:

由于我们使用EF Tools从现有模型创建表，因此我们还将安装Tools软件包。运行以下命令：

Install-Package Microsoft.EntityFrameworkCore.Tools

After the package installations are successful, we will create a dbcontext class. Add a file “ExpenseDBContext.cs” in the Models folder and put in the following code:

软件包安装成功后，我们将创建一个dbcontext类。在“模型”文件夹中添加文件“ ExpenseDBContext.cs”，并输入以下代码：

using Microsoft.EntityFrameworkCore;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace ExpenseManager.Models
{
    public class ExpenseDBContext : DbContext
    {
        public virtual DbSet<ExpenseReport> ExpenseReport { get; set; }

        protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
        {
            if (!optionsBuilder.IsConfigured)
            {
#warning To protect potentially sensitive information in your connection string, you should move it out of source code. See http://go.microsoft.com/fwlink/?LinkId=723263 for guidance on storing connection strings.
                optionsBuilder.UseSqlServer("Your connection string");
            }
        }
    }
}

Do not forget to put your own connection string (inside “”).

不要忘记在连接字符串中放入“” 。

We will create a dataset migration which is used to keep the database schema in sync with the model. There is no database at this moment, so the first migration will create it, and add tables for the entities represented by the DbSet properties on the ExpenseDBContext that we have created.

我们将创建一个数据集迁移，用于使数据库架构与模型保持同步。目前没有数据库，因此第一次迁移将创建数据库，并在我们创建的DbSet上为ExpenseDBContext属性表示的实体添加表。

To create the dataset migration, navigate to the project folder and open the PowerShell window. Execute the following command in it:

要创建数据集迁移，请导航到项目文件夹并打开PowerShell窗口。在其中执行以下命令：

dotnet ef  migrations add ExpenseMigration

Refer to the image below:

请参考下图：

This will create a folder named “Migrations” into our project, which contains the code for the migration and a model snapshot. Refer to the image below:

这将在我们的项目中创建一个名为“ Migrations”的文件夹，其中包含迁移代码和模型快照。请参考下图：

Enter the following command in the PowerShell window to execute the migration:

在PowerShell窗口中输入以下命令以执行迁移：

dotnet ef database update

Refer to the image below:

请参考下图：

This will create the table “ExpenseReport” in our database that we have mentioned in the connection string. You can see that the column ItemId is the primary key here.

这将在连接字符串中提到的数据库中创建表“ ExpenseReport”。您可以在此处看到ItemId列是主键。

Hence, the database creation is completed successfully using the EF Code First approach.

因此，使用EF Code First方法成功完成了数据库创建。

将数据访问层添加到我们的应用程序 (Adding the Data Access layer to our application)

Add a class file “ExpensesDataAcessLayer.cs” into the “Models” folder and put in the following code:

将类文件“ ExpensesDataAcessLayer.cs”添加到“ Models”文件夹中，并输入以下代码：

using Microsoft.EntityFrameworkCore;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace ExpenseManager.Models
{
    public class ExpensesDataAcessLayer
    {
        ExpenseDBContext db = new ExpenseDBContext();
        public IEnumerable<ExpenseReport> GetAllExpenses()
        {
            try
            {
                return db.ExpenseReport.ToList();
            }
            catch
            {
                throw;
            }
        }

        // To filter out the records based on the search string 
        public IEnumerable<ExpenseReport> GetSearchResult(string searchString)
        {
            List<ExpenseReport> exp = new List<ExpenseReport>();
            try
            {
                exp = GetAllExpenses().ToList();
                return exp.Where(x => x.ItemName.IndexOf(searchString, StringComparison.OrdinalIgnoreCase) != -1);
            }
            catch
            {
                throw;
            }
        }

        //To Add new Expense record       
        public void AddExpense(ExpenseReport expense)
        {
            try
            {
                db.ExpenseReport.Add(expense);
                db.SaveChanges();
            }
            catch
            {
                throw;
            }
        }

        //To Update the records of a particluar expense  
        public int UpdateExpense(ExpenseReport expense)
        {
            try
            {
                db.Entry(expense).State = EntityState.Modified;
                db.SaveChanges();

                return 1;
            }
            catch
            {
                throw;
            }
        }

        //Get the data for a particular expense  
        public ExpenseReport GetExpenseData(int id)
        {
            try
            {
                ExpenseReport expense = db.ExpenseReport.Find(id);
                return expense;
            }
            catch
            {
                throw;
            }
        }

        //To Delete the record of a particular expense  
        public void DeleteExpense(int id)
        {
            try
            {
                ExpenseReport emp = db.ExpenseReport.Find(id);
                db.ExpenseReport.Remove(emp);
                db.SaveChanges();

            }
            catch
            {
                throw;
            }
        }

        // To calculate last six months expense
        public Dictionary<string, decimal> CalculateMonthlyExpense()
        {
            ExpensesDataAcessLayer objexpense = new ExpensesDataAcessLayer();
            List<ExpenseReport> lstEmployee = new List<ExpenseReport>();

            Dictionary<string, decimal> dictMonthlySum = new Dictionary<string, decimal>();

            decimal foodSum = db.ExpenseReport.Where
                (cat => cat.Category == "Food" && (cat.ExpenseDate > DateTime.Now.AddMonths(-7)))
                .Select(cat => cat.Amount)
                .Sum();

            decimal shoppingSum = db.ExpenseReport.Where
               (cat => cat.Category == "Shopping" && (cat.ExpenseDate > DateTime.Now.AddMonths(-7)))
               .Select(cat => cat.Amount)
               .Sum();

            decimal travelSum = db.ExpenseReport.Where
               (cat => cat.Category == "Travel" && (cat.ExpenseDate > DateTime.Now.AddMonths(-7)))
               .Select(cat => cat.Amount)
               .Sum();

            decimal healthSum = db.ExpenseReport.Where
               (cat => cat.Category == "Health" && (cat.ExpenseDate > DateTime.Now.AddMonths(-7)))
               .Select(cat => cat.Amount)
               .Sum();

            dictMonthlySum.Add("Food", foodSum);
            dictMonthlySum.Add("Shopping", shoppingSum);
            dictMonthlySum.Add("Travel", travelSum);
            dictMonthlySum.Add("Health", healthSum);

            return dictMonthlySum;
        }

        // To calculate last four weeks expense
        public Dictionary<string, decimal> CalculateWeeklyExpense()
        {
            ExpensesDataAcessLayer objexpense = new ExpensesDataAcessLayer();
            List<ExpenseReport> lstEmployee = new List<ExpenseReport>();

            Dictionary<string, decimal> dictWeeklySum = new Dictionary<string, decimal>();

            decimal foodSum = db.ExpenseReport.Where
                (cat => cat.Category == "Food" && (cat.ExpenseDate > DateTime.Now.AddDays(-7)))
                .Select(cat => cat.Amount)
                .Sum();

            decimal shoppingSum = db.ExpenseReport.Where
               (cat => cat.Category == "Shopping" && (cat.ExpenseDate > DateTime.Now.AddDays(-28)))
               .Select(cat => cat.Amount)
               .Sum();

            decimal travelSum = db.ExpenseReport.Where
               (cat => cat.Category == "Travel" && (cat.ExpenseDate > DateTime.Now.AddDays(-28)))
               .Select(cat => cat.Amount)
               .Sum();

            decimal healthSum = db.ExpenseReport.Where
               (cat => cat.Category == "Health" && (cat.ExpenseDate > DateTime.Now.AddDays(-28)))
               .Select(cat => cat.Amount)
               .Sum();

            dictWeeklySum.Add("Food", foodSum);
            dictWeeklySum.Add("Shopping", shoppingSum);
            dictWeeklySum.Add("Travel", travelSum);
            dictWeeklySum.Add("Health", healthSum);

            return dictWeeklySum;
        }
    }
}

This file will have methods to handle CRUD operations on our database. We are also calculating the totals for the last six months’ expenses and the last four weeks’ expenses for each category.

该文件将具有处理数据库上的CRUD操作的方法。我们还在计算每个类别的最近六个月的支出和最近四个星期的支出的总计。

将控制器添加到应用程序 (Adding the controller to the application)

Right click on the “Controllers” folder and select “Add” > “New Item”. An “Add New Item” dialog box will open. Select “ASP.NET Core” from the left panel, then select “Controller Class” from the templates panel, and put the name as “ExpenseController.cs”. Press “Add”.

右键单击“ Controllers”文件夹，然后选择“ Add”>“ New Item”。 “添加新项”对话框将打开。从左侧面板中选择“ ASP.NET Core”，然后从模板面板中选择“ Controller Class”，然后将名称命名为“ ExpenseController.cs”。按“添加”。

This will create our controller ExpenseController inside the “Controllers” folder. Open the “ExpenseController.cs” file and put in the following code:

这将创建我们的控制器ExpenseController 内 “控制器”文件夹。打开“ ExpenseController.cs”文件，并输入以下代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using ExpenseManager.Models;
using Microsoft.AspNetCore.Mvc;

namespace ExpenseManager.Controllers
{
    public class ExpenseController : Controller
    {
        ExpensesDataAcessLayer objexpense = new ExpensesDataAcessLayer();
        public IActionResult Index(string searchString)
        {
            List<ExpenseReport> lstEmployee = new List<ExpenseReport>();
            lstEmployee = objexpense.GetAllExpenses().ToList();

            if (!String.IsNullOrEmpty(searchString))
            {
                lstEmployee = objexpense.GetSearchResult(searchString).ToList();
            }
            return View(lstEmployee);
        }

        public ActionResult AddEditExpenses(int itemId)
        {
            ExpenseReport model = new ExpenseReport();
            if (itemId > 0)
            {
                model = objexpense.GetExpenseData(itemId);
            }
            return PartialView("_expenseForm", model);
        }

        [HttpPost]
        public ActionResult Create(ExpenseReport newExpense)
        {
            if (ModelState.IsValid)
            {
                if (newExpense.ItemId > 0)
                {
                    objexpense.UpdateExpense(newExpense);
                }
                else
                {
                    objexpense.AddExpense(newExpense);
                }
            }
            return RedirectToAction("Index");
        }

        [HttpPost]
        public IActionResult Delete(int id)
        {
            objexpense.DeleteExpense(id);
            return RedirectToAction("Index");
        }

        public ActionResult ExpenseSummary()
        {
            return PartialView("_expenseReport");
        }

        public JsonResult GetMonthlyExpense()
        {
            Dictionary<string, decimal> monthlyExpense = objexpense.CalculateMonthlyExpense();
            return new JsonResult(monthlyExpense);
        }

        public JsonResult GetWeeklyExpense()
        {
            Dictionary<string, decimal> weeklyExpense = objexpense.CalculateWeeklyExpense();
            return new JsonResult(weeklyExpense);
        }
    }
}

The Controller will have the methods to call our data access layer methods to handle database operations.

Controller将具有调用我们的数据访问层方法的方法来处理数据库操作。

向应用程序添加视图 (Adding views to the application)

We will create three view files:

我们将创建三个视图文件：

“Index.cshtml” — this view will display all the expense data, and contains a search box to search for a particular item.
“ Index.cshtml”-此视图将显示所有费用数据，并包含一个搜索框以搜索特定项目。
“_expenseForm.cshtml” — this is a partial view, which contains the form to handle user inputs. This is used for both add and edit functionality, and will be rendered in a modal dialog.
“ _expenseForm.cshtml”-这是局部视图，其中包含用于处理用户输入的表单。这用于添加和编辑功能，并将在模式对话框中呈现。
“_expenseReport.cshtml”:— this is also a partial view, which will show the expense summary in a bar chart using Highcharts. It is also rendered as a modal dialog.
“ _expenseReport.cshtml”：这也是局部视图，它将使用Highcharts在条形图中显示费用摘要。它还呈现为模式对话框。

索引检视 (Index view)

To create the view file, right click on the “Index” method in our controller and select “Add View…”. This will open an “Add MVC View” dialog box. Put in the name of view as “Index” and click “Add”. Make sure that the “Create as a partial view” check box is not checked. Refer to the image below:

要创建视图文件，请在控制器中右键单击“索引”方法，然后选择“添加视图…”。这将打开“添加MVC视图”对话框。在视图名称中输入“索引”，然后单击“添加”。确保未选中“创建为局部视图”复选框。请参考下图：

This will create the “Index.cshtml” file inside the “Expense” folder, under the “Views” folder. Open the “Index.cshtml” file and put in the following code:

这将在“视图”文件夹下的“费用”文件夹中创建“ Index.cshtml”文件。打开“ Index.cshtml”文件，并输入以下代码：

@model IEnumerable<ExpenseManager.Models.ExpenseReport>

@{
    ViewData["Title"] = "Personal Expense Manager";
}
<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel="stylesheet">

<h2>Personal Expense Manager</h2>
<br />
<div>
    <div style="float:left">
        <button class="btn btn-primary" onclick="AddEditExpenses(0)">Add Expense</button>
        <button class="btn btn-success" onclick="ReportExpense()">Expense Report</button>
    </div>
    <div style="float:right; width:40%;">
        <form asp-controller="Expense" asp-action="Index" class="form-group">
            <div class="col-sm-6">
                <input class="form-control" type="text" name="SearchString" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default btn-info">Filter</button>
        </form>
    </div>
</div>
<br />
<br />
<table class="table">
    <thead>
        <tr>
            <th>@Html.DisplayNameFor(model => model.ItemId)</th>
            <th>@Html.DisplayNameFor(model => model.ItemName)</th>
            <th>@Html.DisplayNameFor(model => model.Amount)</th>
            <th>@Html.DisplayNameFor(model => model.ExpenseDate)</th>
            <th>@Html.DisplayNameFor(model => model.Category)</th>
            <th>Action Item</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>@Html.DisplayFor(modelItem => item.ItemId)</td>
                <td>@Html.DisplayFor(modelItem => item.ItemName)</td>
                <td>@Html.DisplayFor(modelItem => item.Amount)</td>
                <td>@Html.DisplayFor(modelItem => item.ExpenseDate)</td>
                <td>@Html.DisplayFor(modelItem => item.Category)</td>
                <td>
                    <button class="btn btn-default" onclick="AddEditExpenses(@item.ItemId)">Edit</button>
                    <button class="btn btn-danger" onclick="DeleteExpense(@item.ItemId)">Delete</button>
                </td>
            </tr>
        }
    </tbody>
</table>

<div class="modal fade" id="expenseFormModel" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <a href="#" class="close" data-dismiss="modal">&times;</a>
                <h3 id="title" class="modal-title">Add Expense</h3>
            </div>
            <div class="modal-body" id="expenseFormModelDiv">
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="expenseReportModal" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <a href="#" class="close" data-dismiss="modal">&times;</a>
                <h3 class="modal-title">Expense Report</h3>
            </div>
            <div class="modal-body" id="expenseReportModalDiv">
            </div>
        </div>
    </div>
</div>

<script>

    var AddEditExpenses = function (itemId) {
        var url = "/Expense/AddEditExpenses?itemId=" + itemId;
        if (itemId > 0)
            $('#title').html("Edit Expense");

        $("#expenseFormModelDiv").load(url, function () {
            $("#expenseFormModel").modal("show");

        });

        $('#expenseFormModel').on('shown.bs.modal', function () {

            $('#calender-container .input-group.date').datepicker({
                todayBtn: true,
                calendarWeeks: true,
                todayHighlight: true,
                autoclose: true,
                container: '#expenseFormModel modal-body'
            });

        });
    }

    var ReportExpense = function () {
        var url = "/Expense/ExpenseSummary";

        $("#expenseReportModalDiv").load(url, function () {
            $("#expenseReportModal").modal("show");
        })
    }

    var DeleteExpense = function (itemId) {

        var ans = confirm("Do you want to delete item with Item Id: " + itemId);

        if (ans) {
            $.ajax({
                type: "POST",
                url: "/Expense/Delete/" + itemId,
                success: function () {
                    window.location.href = "/Expense/Index";
                }
            })
        }
    }
</script>

<script>

    $('body').on('click', "#btnSubmit", function () {
        var myformdata = $("#expenseForm").serialize();

        $.ajax({
            type: "POST",
            url: "/Expense/Create",
            data: myformdata,
            success: function () {
                $("#myModal").modal("hide");
                window.location.href = "/Expense/Index";
            },
            error: function (errormessage) {
                alert(errormessage.responseText);
            }
        })
    })
</script>

Let us understand this code.

让我们了解这段代码。

At the top, we have included the bootstrap and jQuery references.

在顶部，我们包括了引导程序和jQuery参考。

After that, we have added two buttons for adding a new expense, and for creating the expense summary.

之后，我们添加了两个按钮，用于添加新费用和创建费用摘要。

We have also included a form containing a search box to filter out the records. On clicking of “Filter” button, the form is submitted and it invokes the Index method in our controller — which will return the items matching the search criteria. The search functionality is provided only on the item name field.

我们还提供了一个表格，其中包含一个用于过滤记录的搜索框。单击“过滤器”按钮后，将提交表单，并在我们的控制器中调用Index方法-该方法将返回与搜索条件匹配的项目。搜索功能仅在项目名称字段上提供。

We are using a table to display all the expense records in our database. Each record has two action buttons corresponding to it — “Edit” and “Delete”.

我们正在使用一个表来显示数据库中的所有费用记录。每个记录都有两个与之对应的操作按钮-“编辑”和“删除”。

We have also created two modal dialogs. One is for adding/editing the expense data, and the other for displaying the expense summary report.

我们还创建了两个模式对话框。一种用于添加/编辑费用数据，另一种用于显示费用摘要报告。

In the script section, we have defined anAddEditExpenses function. This function will be invoked when the “Add Expense” or “Edit” button is clicked. We are passing the itemId as the parameter in this method. If the ItemId value is not set, then it is considered an Add function. If the ItemId is set, then it is an Edit function.

在脚本部分，我们定义了一个AddEditExpenses函数。单击“添加费用”或“编辑”按钮时，将调用此功能。在此方法中，我们将itemId作为参数传递。如果未设置 ItemId值，则将其视为Add函数。如果设置了ItemId ，则它是一个Edit函数。

We will call AddEditExpenses in our controller which will return the partial view “_expenseForm” and bind it to the ExpenseReport model. The modal dialog will be empty for an Add call and will contain the expense item data in case of an Edit call. We are using a bootstrap datepicker to select the expense date, hence we have set the datepicker properties on modal dialog load.

我们将在控制器中调用AddEditExpenses ，它将返回部分视图“ _expenseForm”并将其绑定到ExpenseReport模型。对于“ Add呼叫，模式对话框将为空，并且在“ Edit呼叫的情况下将包含费用项目数据。我们正在使用引导日期选择器来选择费用日期，因此我们在模式对话框加载中设置了日期选择器属性。

The ReportExpense function will call the ExpenseSummary method in our controller. This will return the partial view “_expenseReport” to be displayed as a modal dialog. This partial view will display the monthly and weekly expense summary chart using Highcharts.

ReportExpense函数将在我们的控制器中调用ExpenseSummary方法。这将返回部分视图“ _expenseReport”，以显示为模式对话框。此局部视图将使用Highcharts显示每月和每周费用摘要图表。

The DeleteExpense function is used to delete the record of a particular expense. This will invoke the Delete method in our controller to remove the expense record from our database.

DeleteExpense函数用于删除特定费用的记录。这将在我们的控制器中调用Delete方法，以从我们的数据库中删除费用记录。

We are also using dynamic binding to bind the submit event of the “expenseForm” modal. This form is defined in the “_expenseForm.cshtml” view. On submitting the form, we are invoking an ajax call to the Create method in our controller class.

我们还使用动态绑定来绑定“ expenseForm”模式的Submit事件。此表单在“ _expenseForm.cshtml”视图中定义。在提交表单时，我们正在对控制器类中的Create方法进行ajax调用。

Since we are using the same form for both the Edit and Add functionality, we need to distinguish between both using the ItemId value. In the Create method of the controller, if the ItemId is set, then we will invoke the UpdateExpense method. Otherwise, the AddExpense method is invoked. After a successful submit, we will close the modal and redirect to the Index view to show the updated list of expenses.

由于我们为“ Edit和“ Add功能使用的表单相同，因此我们需要使用ItemId值来区分两者。在控制器的Create方法中，如果设置了ItemId ，则将调用UpdateExpense方法。否则，将调用AddExpense方法。成功提交后，我们将关闭模式并重定向到“索引”视图以显示更新的费用列表。

ExpenseForm视图 (ExpenseForm view)

This is a partial view that will be displayed in a modal dialog on clicking the “Add Expense” button in the “Index” view.

单击“索引”视图中的“添加费用”按钮后，将在模式对话框中显示该局部视图。

To create the view file, right click anywhere inside our controller file and select “Add View…”. This will open an “Add MVC View” dialog box. Put in the name of the view as “_expenseForm” and click “Add”. Make sure that the “Create as a partial view” check box is selected. Refer to the image below:

要创建视图文件，请在我们的控制器文件中的任意位置单击鼠标右键，然后选择“添加视图…”。这将打开“添加MVC视图”对话框。在视图名称中输入“ _expenseForm”，然后单击“添加”。确保 “创建的局部视图”复选框被选中。请参考下图：

Open the “_expenseForm.cshtml file” and put in the following code:

打开“ _expenseForm.cshtml文件”，然后输入以下代码：

@model ExpenseManager.Models.ExpenseReport

<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel="stylesheet">

<div>
    <div class="row">
        <div class="col-md-8">
            <form id="expenseForm">
                <input type="hidden" asp-for="ItemId" />
                <div class="form-group">
                    <label asp-for="ItemName" class="control-label"></label>
                    <input asp-for="ItemName" class="form-control" />
                </div>
                <div class="form-group">
                    <label asp-for="Category" class="control-label"></label>
                    <select asp-for="Category" class="form-control">
                        <option value="">-- Select Category --</option>
                        <option value="Food">Food</option>
                        <option value="Shopping">Shopping</option>
                        <option value="Travel">Travel</option>
                        <option value="Health">Health</option>
                    </select>
                </div>
                <div class="form-group">
                    <label asp-for="Amount" class="control-label"></label>
                    <input asp-for="Amount" class="form-control" />
                </div>
                <div class="form-group" id="calender-container">
                    <label asp-for="ExpenseDate" class="control-label"></label>
                    <div class="input-group date">
                        <input asp-for="ExpenseDate" type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                    </div>
                </div>
                <div class="form-group">
                    <button type="button" id="btnSubmit" class="btn btn-block btn-info">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

At the top, we are including the cdn reference to the bootstrap-datepicker so that we can use it in our modal dialog. Then we have a <form> element, which binds to our model. We also have a submit button which will post the form data to the Create method in our controller using an ajax call.

在顶部，我们包括对bootstrap- cdn引用，以便我们可以在模态对话框中使用它。然后，我们有一个<fo rm>元素，该元素绑定到我们的模型。我们还ave a提交按钮，它将使用ajax调用将表单数据发布到控制器中o the Create方法中。

ExpenseReport视图 (ExpenseReport view)

This is a partial view that is displayed in the modal dialog on clicking the “Expense Report” button in the “Index” view.

单击“索引”视图中的“费用报告”按钮时，这是显示在模式对话框中的局部视图。

Create a new partial view “_expenseReport.cshtml” and put in the following code:

创建一个新的局部视图“ _expenseReport.cshtml”，并输入以下代码：

<script src="https://code.highcharts.com/highcharts.js"></script>

<button id="btnMonthlyReport" class="btn btn-info">Monthly Report</button>
<button id="btnWeeklyReport" class="btn btn-warning">Weekly Report</button>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto">

</div>

<script>

    $(document).ready(function () {
        $("#btnWeeklyReport").click(function () {
            var titleMessage = "Expenses in last four weeks is : ";

            $.ajax({
                type: "GET",
                url: "/Expense/GetWeeklyExpense",
                contentType: "application/json",
                dataType: "json",
                success: function (result) {
                    var keys = Object.keys(result);
                    var weeklydata = new Array();
                    var totalspent = 0.0;
                    for (var i = 0; i < keys.length; i++) {
                        var arrL = new Array();
                        arrL.push(keys[i]);
                        arrL.push(result[keys[i]]);
                        totalspent += result[keys[i]];
                        weeklydata.push(arrL);
                    }
                    createCharts(weeklydata, titleMessage, totalspent.toFixed(2));
                }
            })
        })

        $("#btnMonthlyReport").click(function () {
            var titleMessage = "Expenses in last six months is : ";

            $.ajax({
                type: "GET",
                url: "/Expense/GetMonthlyExpense",
                contentType: "application/json",
                dataType: "json",
                success: function (result) {
                    var keys = Object.keys(result);
                    var monthlydata = new Array();
                    var totalspent = 0.0;
                    for (var i = 0; i < keys.length; i++) {
                        var arrL = new Array();
                        arrL.push(keys[i]);
                        arrL.push(result[keys[i]]);
                        totalspent += result[keys[i]];
                        monthlydata.push(arrL);
                    }
                    createCharts(monthlydata, titleMessage, totalspent.toFixed(2));
                }
            })
        })
    })

    function createCharts(sum, titleText, totalspent) {
        Highcharts.chart('container', {
            chart: {
                type: 'column'
            },
            title: {
                text: titleText + ' ' + totalspent
            },
            xAxis: {
                type: 'category',
                labels: {
                    rotation: -45,
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif'
                    }
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Money spent'
                }
            },
            legend: {
                enabled: false
            },
            tooltip: {
                pointFormat: 'Total money spent: <b>{point.y:.2f} </b>'
            },
            series: [{
                type: 'column',
                data: sum,
            }]
        });
    }

</script>

At the top, we included the cdn reference to Highcharts. We have also provided two buttons. One is used to view a monthly report of the last six months. The other is to view a weekly report for the last four weeks. The report will be generated as a bar chart to provide a comparative study of expense summaries.

在顶部，我们包括对Highcharts的cdn引用。我们还提供了两个按钮。一个用于查看最近六个月的月度报告。另一种是查看过去四个星期的每周报告。该报告将以条形图的形式生成，以提供费用摘要的比较研究。

On clicking the weekly report button, we will invoke the GetWeeklyExpense method of our controller. This will return the data in JSON format. We will pass this data to the createCharts function to create the weekly expense bar chart using Highcharts.

单击每周报告按钮时，我们将调用控制器的GetWeeklyExpense方法。这将以JSON格式返回数据。我们会将这些数据传递给createCharts函数，以使用Highcharts创建每周费用条形图。

Similarly, we will invoke the GetMonthlyExpense method of our controller on clicking the “Monthly Report” button. The JSON result will be passed to the createCharts function to create the monthly expense bar chart using Highcharts.

同样，我们将在单击“每月报告”按钮时调用控制器的GetMonthlyExpense方法。 JSON结果将传递到createCharts函数，以使用Highcharts创建月度支出条形图。

配置路由URL (Configure route URL)

Open the “Startup.cs” file to set the format for app routes. Scroll down to the app.UseMvc method where you can set the route URL.

打开“ Startup.cs”文件以设置应用程序路由的格式。向下滚动到app.UseMvc方法，您可以在其中设置路由URL。

Make sure that your route URL is set like this:

确保您的路线网址设置如下：

app.UseMvc(routes =>
{
    routes.MapRoute(
        name: "default",
        template: "{controller=Expense}/{action=Index}");
});

This URL pattern sets ExpenseController as the default controller and the Index method as the default action method. Default route parameters need not be present in the URL path for a match.

此URL模式将ExpenseController设置为默认控制器，并将Index方法设置为默认操作方法。默认路由参数不需要在URL路径中进行匹配。

If we do not append any controller name in the URL, then it will take ExpenseController as the default controller and the Index method of ExpenseController as default action method.

如果我们在URL中未添加任何控制器名称，则它将ExpenseController作为默认控制器，而ExpenseController的Index方法作为默认操作方法。

Similarly, if we append only /Expense to the URL, it will navigate to the Index action method of the Expense controller.

同样，如果仅将/Expense附加到URL，它将导航到Expense控制器的Index操作方法。

执行演示 (Execution demo)

Press F5 to launch the application. You can see a page similar to the one shown below:

按F5启动应用程序。您会看到类似于以下内容的页面：

Here we have an “Add Expense” button to add a new expense report. The “Expense Report” button will open a dialog box to show the bar chart of monthly and weekly expense data. On the top right corner, we have a search box to search the records using item name.

在这里，我们有一个“添加费用”按钮来添加新的费用报告。 “费用报告”按钮将打开一个对话框，以显示每月和每周费用数据的条形图。在右上角，我们有一个搜索框，用于使用项目名称搜索记录。

Look at the below GIF image for the demo of application:

在下面的GIF图片中查看应用程序演示：

结论 (Conclusion)

We created a personal expense manager application using ASP.NET Core and Entity Framework Core with the help of Visual Studio 2017 and SQL Server 2017. We have also used Highcharts to create a bar chart for monthly and weekly expense summary.

我们在Visual Studio 2017和SQL Server 2017的帮助下，使用ASP.NET Core和Entity Framework Core创建了个人费用管理器应用程序。我们还使用Highcharts创建了每月和每周费用汇总的条形图。

Please download the source code from GitHub and play around to get a better understanding.

请从GitHub下载源代码，然后试玩以获得更好的理解。

You can read my other articles on ASP .NET Core here.

您可以在此处阅读有关ASP.NET Core的其他文章。

Are you preparing for interviews? Read my article on C# Coding Questions For Technical Interviews.

您准备面试吗？阅读有关技术面试的C＃编码问题的文章。

其他有用的资源 (Other useful resources)

Originally published at https://ankitsharmablogs.com/

最初发布在https://ankitsharmablogs.com/

翻译自: https://www.freecodecamp.org/news/how-to-create-an-expense-manager-using-entity-framework-core-and-highcharts-32f3b1ad0dbc/

cumian9828

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何使用Entity Framework Core和Highcharts创建费用管理器

介绍 (Introduction)In this article, we will be creating a personal expense manager using ASP.NET Core 2.1 and Entity Framework (EF) core Code First approach. This expense manager tracks your daily exp...
复制链接

扫一扫