Asp.net core 6.0+DevExpress+Entity Framework Core (EF Core)+Sql Server DataGrid 导入EXCEL

uoz98

已于 2024-06-18 11:13:42 修改

阅读量283

点赞数 8

文章标签： asp.net excel 后端 c# javascript 前端 visualstudio

于 2024-06-14 16:22:24 首次发布

本文链接：https://blog.csdn.net/weixin_52625246/article/details/139682992

版权

前端小白学习asp.net的一些碎碎念和记录2，使用的开发软件是vs2022，框架：asp.net core mvc 6.0，前端控件：DevExpress，数据库：sqlserver 2008 R2，连接数据库：Entity Framework Core (EF Core)。

前几篇帖子有详细写到如何使用EF连接SQL Server数据（Asp.net core mvc 6.0+DevExpress+连接SqlServer数据库编写TreeView生成左侧菜单栏【使用Entity Framework Core (EF Core)】_devexpress treeview-CSDN博客），这篇就不做详细连接过程，主要内容是解析excel和接口。

1.数据库中建立一张名为postExcelOrder的表，ID为主键并且可自增标识

2.在Model中添加跟数据库表一样的Model类，然后在MVCsqlDbContext中注册这个Model类

using System.ComponentModel.DataAnnotations;

namespace DevExtremeAspNetCoreApp3.Models
{
    public class PostExcelModel
    {
       // 这里的所有字段必须和数据库中的表字段名一致包括数据类型，否则会报错。
        public class postExcelOrder
        {
            [Key]
            public int ID { get; set; }
            public string CompanyName { get; set; }
            public string Address { get; set; }
            public string City { get; set; }
            public string State { get; set; }
            public int Zipcode { get; set; }
            public string Phone { get; set; }
            public string Fax { get; set; }
            public string Website { get; set; }
        }
    }
}

using Microsoft.EntityFrameworkCore;

namespace DevExtremeAspNetCoreApp3.Models
{
    public class MVCSqlXcContext : DbContext
    {
        // 这里的postExcelOrder 必须要和数据库中的表名称一致
        public DbSet<PostExcelModel.postExcelOrder> postExcelOrder { get; set; }

        public MVCSqlXcContext(DbContextOptions<MVCSqlXcContext> options) : base(options) 
       { }

        protected override void OnModelCreating(ModelBuilder modelBuilder)
        {
            base.OnModelCreating(modelBuilder);
            modelBuilder.ApplyConfigurationsFromAssembly(this.GetType().Assembly);
        }
    }
}

3.编写一个名为AboutApiController.cs的控制器


using DevExtremeAspNetCoreApp3.Models;
using Microsoft.AspNetCore.Mvc;
using static DevExtremeAspNetCoreApp3.Models.PostExcelModel;

namespace DevExtremeAspNetCoreApp3.Controllers
{
    /// <summary>
    /// About控制器
    /// </summary>
    [ApiController]
    [Route("/api/[controller]/[action]")]
    public class AboutApiController : Controller
    {
        private readonly MVCSqlXcContext _context;

        public AboutApiController (MVCSqlXcContext context)
        {
            _context = context;
        }

        /// <summary>
        /// 获取导入的Excel文件的数据
        /// </summary>
        [HttpGet]
        public IActionResult GetProductData()
        {
            if (ModelState.IsValid)
            {
                var jsonData = _context.postExcelOrder.ToList();
                return Json(jsonData);
            }
            return BadRequest(ModelState);
        }

        /// <summary>
        ///  将解析后的excel文件的数据存到数据库中
        /// </summary>
        [HttpPost]
        [Produces("application/json")]
        public async Task<IActionResult> CreateProduct([FromBody] List<postExcelOrder> postExcelOrder)
        {
            if (ModelState.IsValid)
            {
                foreach (var item in postExcelOrder)
                {
                    _context.postExcelOrder.Add(item);
                }
                var i = await _context.SaveChangesAsync();
                Console.WriteLine(i); // 控制台若输出1则是保存成功
                return Ok(new {code = 200, success = true }); // 设置此接口成功返回的值
            }
            return BadRequest(ModelState);
        }
    }
}

4.编写cshtml页面

@* 引用解析excel所需的js文件 *@
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.10.1/polyfill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/3.8.0/exceljs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>

<style>
     // 选择文件的样式
    .inputstyle::file-selector-button {
        padding: 6px 10px;
        background-color: #1E9FFF;
        border: 1px solid #1E9FFF;
        border-radius: 3px;
        cursor: pointer;
        color: #fff;
        font-size: 12px;
    }
</style>

@* 选择文件和导入excel *@
<input type="file" id="fileInput" class="inputstyle" />
@(Html.DevExtreme().Button()
     .Text("导入Excel")
     .Type(ButtonType.Normal)
     .StylingMode(ButtonStylingMode.Contained)
     .Width(120)
     .OnClick("import_btn")
)
<br/>
<br />


@* 展示数据表格 *@
@(Html.DevExtreme().DataGrid()
    .ID("gridContainer")
    .Columns(columns =>
    {
        columns.Add().DataField("ID");
        columns.Add().DataField("CompanyName");
        columns.Add().DataField("Address");
        columns.Add().DataField("City");
        columns.Add().DataField("State");
        columns.Add().DataField("Zipcode");
        columns.Add().DataField("Phone");
        columns.Add().DataField("Fax");
        columns.Add().DataField("Website");
    })
     @* 把导入的Excel文件数据从数据库中拿出来渲染在表格中 *@
    .DataSource(d => d.Mvc().Controller("AboutApi").LoadAction("GetProductData").Key("ID"))
    .ShowBorders(true)
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.2/xlsx.full.min.js"></script>

<script>
    // 导入excel到网格
    function import_btn() {
       var jsonData = [];

        var fileInput = document.getElementById('fileInput');
        var file = fileInput.files[0];
        var reader = new FileReader();
         // 获取选中的excel文件并解析为数组json格式
        reader.onload = function (e) {
            const data = new Uint8Array(e.target.result);
            const workbook = XLSX.read(data, { type: 'array' });
            const firstSheetName = workbook.SheetNames[0];
            const worksheet = workbook.Sheets[firstSheetName];
            const datas = XLSX.utils.sheet_to_json(worksheet);
            jsonData = JSON.stringify(datas);
          // 请求AboutApicontroller中的post接口，把数据存到数据库中
          // ！！！请注意excel文件中每一列的列名必须与数据库表中的列名一致！！！
            fetch('/api/AboutApi/CreateProduct', {
                method: "POST",
                headers: {
                    'Content-Type': 'application/json'
                },
                body: jsonData
            })
            .then(response => response.json())
            .then(data => {
              // 导入成功后的信息返回前面接口写的code:200,success:true则成功
              // 需要自行刷新页面才能在表格看到数据，可自行编写若导入成功则两秒后刷新页面
                console.log(data)
            })
            .catch(Error => console.error("Error:",error));
        }
        reader.readAsArrayBuffer(file);
    }

</script>

Model类中的字段、需要导入的EXCEL文件列名必须要和数据库表中的字段名一致，数据类型也必须一致。

若表格名称需要编译为中文则这样编写：

@* 引用解析excel所需的js文件 *@
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.10.1/polyfill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/3.8.0/exceljs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>

<style>
     // 选择文件的样式
    .inputstyle::file-selector-button {
        padding: 6px 10px;
        background-color: #1E9FFF;
        border: 1px solid #1E9FFF;
        border-radius: 3px;
        cursor: pointer;
        color: #fff;
        font-size: 12px;
    }
</style>

@* 选择文件和导入excel *@
<input type="file" id="fileInput" class="inputstyle" />
@(Html.DevExtreme().Button()
     .Text("导入Excel")
     .Type(ButtonType.Normal)
     .StylingMode(ButtonStylingMode.Contained)
     .Width(120)
     .OnClick("import_btn")
)
<br/>
<br />


@* 展示数据表格 *@
@(Html.DevExtreme().DataGrid()
    .ID("gridContainer")
    .Columns(columns =>
    {
        @* 加上Caption后表格表头则会显示中文名称 *@
        columns.Add().DataField("ID").Caption("Id"); 
        columns.Add().DataField("CompanyName").Caption("公司名称");
        columns.Add().DataField("Address").Caption("地址");
        columns.Add().DataField("City").Caption("城市");
        columns.Add().DataField("State").Caption("国家");
        columns.Add().DataField("Zipcode").Caption("邮编码");
        columns.Add().DataField("Phone").Caption("电话号码");
        columns.Add().DataField("Fax").Caption("传真");
        columns.Add().DataField("Website").Caption("网址");
    })
     @* 把导入的Excel文件数据从数据库中拿出来渲染在表格中 *@
    .DataSource(d => d.Mvc().Controller("AboutApi").LoadAction("GetProductData").Key("ID"))
    .ShowBorders(true)
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.2/xlsx.full.min.js"></script>

<script>

   // 重命名函数
   function renameKeys(obj, newKeys) {
       return Object.keys(obj).reduce((acc, key) => {
           acc[newKeys[key] || key] = obj[key];
           return acc;
       }, {});
   }

   // 要重命名的新字段名（excel表格列名对应数据库字段名）
   const newKeys = {
       'Id': 'ID',
       '公司名称': 'CompanyName',
       '地址': 'Address',
       '城市': 'City',
       '国家': 'State',
       '邮编码': 'Zipcode',
       '电话号码': 'Phone',
       '传真': 'Fax',
       '网址': 'Website',
   };
    // 导入excel到网格
    function import_btn() {
       var jsonData = [];

        var fileInput = document.getElementById('fileInput');
        var file = fileInput.files[0];
        var reader = new FileReader();
         // 获取选中的excel文件并解析为数组json格式
        reader.onload = function (e) {
            const data = new Uint8Array(e.target.result);
            const workbook = XLSX.read(data, { type: 'array' });
            const firstSheetName = workbook.SheetNames[0];
            const worksheet = workbook.Sheets[firstSheetName];
            const datas = XLSX.utils.sheet_to_json(worksheet);
            // 在这里调用重命名方法将列名为中文的excel表格数据转成英文再存储到数据库中
            let renamedJsonArray = datas.map(obj => renameKeys(obj, newKeys));
            jsonData = JSON.stringify(renamedJsonArray);
          // 请求AboutApicontroller中的post接口，把数据存到数据库中
          // ！！！请注意excel文件中每一列的列名必须与页面表格中的列名一致！！！
            fetch('/api/AboutApi/CreateProduct', {
                method: "POST",
                headers: {
                    'Content-Type': 'application/json'
                },
                body: jsonData
            })
            .then(response => response.json())
            .then(data => {
              // 导入成功后的信息返回前面接口写的code:200,success:true则成功
              // 需要自行刷新页面才能在表格看到数据，可自行编写若导入成功则两秒后刷新页面
                console.log(data)
            })
            .catch(Error => console.error("Error:",error));
        }
        reader.readAsArrayBuffer(file);
    }

</script>

excel表格和页面表格列名一致，然后在解析excel后的json数据中，转成与数据库表中一致的字段名即可再存储到数据库中

uoz98

关注

8
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Asp.net core 6.0+DevExpress+Entity Framework Core (EF Core)+Sql Server DataGrid 导入EXCEL

前端小白学习asp.net的一些碎碎念和记录2，使用的开发软件是vs2022，框架：asp.net core mvc 6.0，前端控件：DevExpress，数据库：sqlserver 2008 R2，连接数据库：Entity Framework Core (EF Core)。
复制链接

扫一扫