ในบทความนี้ คุณจะได้เรียนรู้วิธีสร้าง อ่าน และแก้ไขสเปรดชีต Excel ในแอปพลิเคชัน ASP.NET MVC สำหรับสิ่งนี้ เราจะสร้างแอปพลิเคชันสเปรดชีตซึ่งประกอบด้วยตัวควบคุมกริดที่มีคุณลักษณะหลากหลายเพื่อแสดงและแก้ไขไฟล์ Excel ดังที่แสดงด้านล่าง
- .NET API เพื่อสร้างแอปพลิเคชันสเปรดชีต ASP.NET
- ขั้นตอนในการสร้างแอปพลิเคชันสเปรดชีต ASP.NET
- การสาธิต
- ดาวน์โหลดซอร์สโค้ด
.NET API เพื่อสร้างแอปพลิเคชันสเปรดชีต ASP.NET MVC
ในการสร้างแอปพลิเคชันสเปรดชีตใน ASP.NET MVC เราจะใช้ Aspose.Cells.GridJs API ช่วยให้คุณสร้างแอปพลิเคชันบนเว็บเพื่อแสดงหรือแก้ไขเอกสารสเปรดชีตได้อย่างรวดเร็วและง่ายดาย นอกจากนี้ คุณสามารถนำเข้ารูปแบบไฟล์สเปรดชีตยอดนิยม (XLS, XLSX, XLSM, XLSB, CSV, SpreadsheetML, ODS) (อ่านเพิ่มเติม) นอกจากนี้ยังมีเครื่องมือคำนวณสูตรที่แข็งแกร่งและสมบูรณ์เพื่อคำนวณไม่เพียงแค่ฟังก์ชันในตัวเท่านั้น แต่ยังรวมถึงสูตรที่กำหนดเองอีกด้วย คุณสามารถติดตั้ง Aspose.Cells.GridJs ได้จาก NuGet
PM> Install-Package Aspose.Cells.GridJs
ขั้นตอนในการสร้างแอปพลิเคชันสเปรดชีต ASP.NET MVC
ต่อไปนี้เป็นขั้นตอนในการสร้างแอปพลิเคชันสเปรดชีตบนเว็บใน ASP.NET MVC
- สร้าง ASP.NET Core Web App ใหม่ (Model-View-Controller) ใน Visual Studio
- ติดตั้ง Aspose.Cells.GridJs จาก NuGet
- ใส่รหัสต่อไปนี้ใน HomeController.cs
public class HomeController : Controller
{
public IActionResult Index()
{
return RedirectToRoute("default",
new { controller = "GridJs2", action = "List" });
}
public IActionResult Privacy()
{
return Redirect("https://about.aspose.app/legal/privacy-policy");
}
[ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
public IActionResult Error()
{
return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
}
}
- สร้างคลาสใหม่ชื่อ TestConfig.cs ในโฟลเดอร์ Models และเพิ่มโค้ดต่อไปนี้ (เปลี่ยนพาธโฟลเดอร์ตามสภาพแวดล้อมของคุณ)
public class TestConfig
{
///<summary>
/// ไดเรกทอรีที่มีไฟล์สมุดงาน
///</summary>
internal static String ListDir = @"D:\tmpdel\storage\wb";
///<summary>
/// temp ไดเร็กทอรีสำหรับเก็บไฟล์
///</summary>
internal static String TempDir = @"D:\tmpdel\storage\wb\tmp\";
}
- สร้างคลาสใหม่ชื่อ LocalFileCache.cs ในโฟลเดอร์ Models และเพิ่มโค้ดต่อไปนี้
/* Add the following namespaces as well.
using Aspose.Cells.GridJs;
using System.IO;
*/
public class LocalFileCache : GridCacheForStream
{
///<summary>
/// ใช้วิธีนี้เพื่อ savecache บันทึกสตรีมไปยังวัตถุแคชด้วยรหัสคีย์
///</summary>
///<param name="s"> สตรีมต้นทาง</param>
///<param name="uid"> เขาคีย์รหัส</param>
public override void SaveStream(Stream s, String uid)
{
String filepath = Path.Combine(Config.FileCacheDirectory + Path.DirectorySeparatorChar + "streamcache", uid.Replace('/', '.'));
using (FileStream fs = new FileStream(filepath, FileMode.Create))
{
s.Position = 0;
s.CopyTo(fs);
}
}
///<summary>
/// ใช้วิธีนี้เพื่อโหลดแคชด้วยคีย์ uid ส่งคืนสตรีมจากวัตถุแคช
///</summary>
///<param name="uid"> รหัสคีย์</param>
///<returns> สตรีมจากแคช</returns>
public override Stream LoadStream(String uid)
{
String filepath = Path.Combine(Config.FileCacheDirectory + Path.DirectorySeparatorChar + "streamcache", uid.Replace('/', '.'));
FileStream fs = new FileStream(filepath, FileMode.Open);
return fs;
}
///<summary>
/// ใช้ url ในการดำเนินการควบคุมเพื่อรับไฟล์
///</summary>
///<param name="uid"> รหัสคีย์</param>
///<returns></returns>
public override String GetFileUrl(string uid)
{
return "/GridJs2/GetFile?id=" + uid;
}
}
- สร้างคอนโทรลเลอร์ใหม่ชื่อ GridJs2Controller.cs และเพิ่มโค้ดต่อไปนี้
/* Add the following namespaces as well.
System.IO;
System.Collections;
System.Threading;
Microsoft.AspNetCore.StaticFiles;
Aspose.Cells.GridJs;
*/
[Route("[controller]/[action]")]
[ApiController]
public class GridJs2Controller : Controller
{
public ActionResult List()
{
//this.ViewBag.list = รายการใหม่<object> ();
ArrayList dirlistsss = new ArrayList();
ArrayList filelistsss = new ArrayList();
DirectoryInfo dir = new DirectoryInfo(TestConfig.ListDir);
//ค้นหาไฟล์ภายใต้ไดเร็กทอรี
FileInfo[] fi = dir.GetFiles();
foreach (FileInfo f in fi)
{
String fname = f.FullName.ToString();
dirlistsss.Add(fname);
filelistsss.Add(Path.GetFileName(fname));
}
// ดูข้อมูล
ViewBag.dirlist = dirlistsss;
ViewBag.filelist = filelistsss;
return View("~/Views/Home/list.cshtml");
}
// GET: /GridJs2/DetailJson?ชื่อไฟล์=
public ActionResult DetailFileJson(string filename)
{
String file = Path.Combine(TestConfig.ListDir, filename);
return DetailJson(file);
}
private ActionResult DetailJson(string path)
{
GridJsWorkbook wbj = new GridJsWorkbook();
try
{
GridInterruptMonitor m = new GridInterruptMonitor();
wbj.SetInterruptMonitorForLoad(m, 50 * 1000);
Thread t1 = new Thread(new ParameterizedThreadStart(InterruptMonitor));
t1.Start(new object[] { m, 90 * 1000 });
using (FileStream fs = new FileStream(path, FileMode.Open))
{
wbj.ImportExcelFile(fs, GridJsWorkbook.GetGridLoadFormat(Path.GetExtension(path)));
}
}
catch (Exception ex)
{
if (ex is GridCellException)
{
return Content(wbj.ErrorJson(((GridCellException)ex).Message + ((GridCellException)ex).Code), "text/plain", System.Text.Encoding.UTF8);
}
return Content(wbj.ErrorJson(ex.Message), "text/plain", System.Text.Encoding.UTF8);
}
//ส่งคืนไฟล์ (สตรีม, "แอปพลิเคชัน / octet-stream", "streamfile");
return Content(wbj.ExportToJson(), "text/plain", System.Text.Encoding.UTF8);
}
private static void InterruptMonitor(object o)
{
object[] os = (object[])o;
try
{
Thread.Sleep((int)os[1]);
((GridInterruptMonitor)os[0]).Interrupt();
}
catch (ThreadInterruptedException e)
{
Console.WriteLine("Succeeded for load in give time.");
}
}
[HttpPost]
// โพสต์: /GridJs2/UpdateCell
public ActionResult UpdateCell()
{
string p = HttpContext.Request.Form["p"];
string uid = HttpContext.Request.Form["uid"];
GridJsWorkbook gwb = new GridJsWorkbook();
String ret = gwb.UpdateCell(p, uid);
return Content(ret, "text/plain", System.Text.Encoding.UTF8);
}
// GET: /GridJs2/Xspreadtml
public ActionResult Xspreadtml(String filename)
{
return Redirect("~/xspread/index.html?file=" + filename);
}
// GET: /GridJs2/Image?uid=&id=
public FileResult Image()
{
string fileid = HttpContext.Request.Query["id"];
string uid = HttpContext.Request.Query["uid"];
return new FileStreamResult(GridJsWorkbook.GetImageStream(uid, fileid), "image/png");
}
//หากใช้ GridCacheForStream คุณต้องตั้งค่า API นี้
// GET: /GridJs2/ImageUrl?uid=&id=
public JsonResult ImageUrl(string id, string uid)
{
return new JsonResult(GridJsWorkbook.GetImageUrl(uid, id, "."));
}
private string GetMimeType(string FileName)
{
string contentType;
new FileExtensionContentTypeProvider().TryGetContentType(FileName, out contentType);
return contentType ?? "application/octet-stream";
}
// GET: /GridJs2/GetFile?id
public FileResult GetFile(string id)
{
string fileid = id;
string mimeType = GetMimeType(fileid);
return File(GridJsWorkbook.CacheImp.LoadStream(fileid), mimeType, fileid.Replace('/', '.'));
}
///<summary>
/// ดาวน์โหลดไฟล์
///</summary>
///<returns></returns>
[HttpPost]
public JsonResult Download()
{
string p = HttpContext.Request.Form["p"];
string uid = HttpContext.Request.Form["uid"];
string filename = "123.xlsx";
GridJsWorkbook wb = new GridJsWorkbook();
wb.MergeExcelFileFromJson(uid, p);
GridInterruptMonitor m = new GridInterruptMonitor();
wb.SetInterruptMonitorForSave(m);
Thread t1 = new Thread(new ParameterizedThreadStart(InterruptMonitor));
t1.Start(new object[] { m, 30 * 1000 });
try
{
wb.SaveToCacheWithFileName(uid, filename, null);
}
catch (Exception ex)
{
if (ex is GridCellException)
{
return Json(((GridCellException)ex).Message + ((GridCellException)ex).Code);
}
}
if (filename.EndsWith(".html"))
{
filename += ".zip";
}
String fileurl = GridJsWorkbook.CacheImp.GetFileUrl(uid + "/" + filename);
return new JsonResult(fileurl);
}
}
- ใส่รหัสต่อไปนี้ในฟังก์ชันกำหนดค่าของ Startup.cs และกำหนดเส้นทางของไฟล์ใบอนุญาต (รับใบอนุญาตฟรี)
/* Add the following namespace as well.
using Aspose.Cells.GridJs;
*/
License l = new License();
LocalFileCache mwc = new LocalFileCache();
GridJsWorkbook.CacheImp = mwc;
l.SetLicense(@"D:\licenses\Conholdate.Total.Product.Family.lic");
- ใส่โค้ดต่อไปนี้ใน Views/Home/index.cshtml
@{
ViewData["Title"] = "Home Page";
}
- สร้างมุมมองใหม่ชื่อ list.cshtml ภายใต้โฟลเดอร์ Views/Home/ และใส่โค้ดต่อไปนี้
<div id="body" style=" width: 800px; height: 800px; border: 1px solid; overflow-y: scroll; SCROLLBAR-BASE-COLOR: #8ccc8c;">
@foreach (var item in ViewBag.filelist)
{
<a href="Xspreadtml?filename=@item" target="_blank"><em> @item </em> </a> <br />
}
</div>
- ดาวน์โหลดโฟลเดอร์ xspread จาก GitHub และวางไว้ใต้โฟลเดอร์ wwwroot ดังที่แสดงด้านล่าง
ตรวจสอบให้แน่ใจว่าหมายเลขพอร์ตที่ระบุใน wwwroot/xspread/index.html เหมือนกับหมายเลขพอร์ตของโปรเจ็กต์
สร้างแอปพลิเคชันและเรียกใช้งานในเบราว์เซอร์ที่คุณชื่นชอบ
สาธิต - สร้างหรือแก้ไขไฟล์ Excel ใน ASP.NET MVC
ต่อไปนี้เป็นการสาธิตแอปพลิเคชันสเปรดชีต ASP.NET MVC ที่เราเพิ่งสร้างขึ้น
ดาวน์โหลดซอร์สโค้ด
คุณสามารถดาวน์โหลดซอร์สโค้ดทั้งหมดของแอปพลิเคชันสเปรดชีตได้จาก GitHub
รับใบอนุญาตฟรี
คุณสามารถใช้ Aspose.Cells.GridJs ได้โดยไม่มีข้อจำกัดในการประเมินโดยใช้ ใบอนุญาตชั่วคราว
บทสรุป
ในบทความนี้ คุณได้เรียนรู้วิธีสร้างแอปพลิเคชันสเปรดชีต ASP.NET MVC พร้อมคุณสมบัติต่างๆ มากมายในการสร้างและแก้ไขไฟล์ Excel และสเปรดชีตอื่นๆ คุณสามารถปรับแต่งแอปพลิเคชันนี้หรือรวมเข้ากับเว็บแอปพลิเคชันของคุณเองได้ ในกรณีที่คุณมีข้อสงสัย โปรดโพสต์ที่ ฟอรัม ของเรา