Pada artikel ini, Anda akan mempelajari cara membuat, membaca, dan mengedit spreadsheet Excel di aplikasi ASP.NET MVC. Untuk ini, kami akan membuat aplikasi spreadsheet yang terdiri dari kontrol kisi kaya fitur untuk menampilkan dan mengedit file Excel, seperti yang ditunjukkan di bawah ini.
![](images/ASP.NET-UI.jpg#center)
- .NET API untuk Membuat Aplikasi ASP.NET Spreadsheet
- Langkah-langkah Membuat Aplikasi ASP.NET Spreadsheet
- Demo
- Unduh Kode Sumber
.NET API untuk Membuat Aplikasi ASP.NET MVC Spreadsheet
Untuk membuat aplikasi spreadsheet di ASP.NET MVC, kami akan menggunakan Aspose.Cells.GridJs. API memungkinkan Anda membuat aplikasi berbasis web untuk menampilkan atau mengedit dokumen spreadsheet dengan cepat dan mudah. Selain itu, Anda dapat mengimpor format file spreadsheet populer (XLS, XLSX, XLSM, XLSB, CSV, SpreadsheetML, ODS) (baca selengkapnya). Selain itu, ia menyediakan Mesin Perhitungan Rumus yang kuat dan kaya untuk menghitung tidak hanya fungsi bawaan tetapi juga rumus khusus. Anda dapat menginstal Aspose.Cells.GridJs dari NuGet.
PM> Install-Package Aspose.Cells.GridJs
Langkah-langkah Membuat Aplikasi ASP.NET MVC Spreadsheet
Berikut langkah-langkah membuat aplikasi spreadsheet berbasis web di ASP.NET MVC.
- Buat Aplikasi Web Inti ASP.NET baru (Model-View-Controller) di Visual Studio.
![](images/Create-Project.jpg#center)
- Instal Aspose.Cells.GridJs dari NuGet.
![](images/Install-AsposeCells_GridJs.jpg#center)
- Masukkan kode berikut ke 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 });
}
}
- Buat kelas baru bernama TestConfig.cs di folder Models dan tambahkan kode berikut (ubah jalur folder sesuai dengan lingkungan Anda).
public class TestConfig
{
///<summary>
/// direktori yang berisi file workbook
///</summary>
internal static String ListDir = @"D:\tmpdel\storage\wb";
///<summary>
/// direktori temp untuk menyimpan file
///</summary>
internal static String TempDir = @"D:\tmpdel\storage\wb\tmp\";
}
- Buat kelas baru bernama LocalFileCache.cs di folder Models dan tambahkan kode berikut.
/* Add the following namespaces as well.
using Aspose.Cells.GridJs;
using System.IO;
*/
public class LocalFileCache : GridCacheForStream
{
///<summary>
/// Terapkan metode ini untuk menyimpan cache, simpan aliran ke objek cache dengan id kunci.
///</summary>
///<param name="s"> aliran sumber</param>
///<param name="uid"> dia kunci id.</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>
/// Terapkan metode ini untuk memuat cache dengan uid kunci, kembalikan aliran dari objek cache.
///</summary>
///<param name="uid"> id kunci</param>
///<returns> aliran dari cache</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>
/// terapkan url di pengontrol aksi untuk mendapatkan file
///</summary>
///<param name="uid"> id kunci</param>
///<returns></returns>
public override String GetFileUrl(string uid)
{
return "/GridJs2/GetFile?id=" + uid;
}
}
- Buat controller baru bernama GridJs2Controller.cs dan tambahkan kode berikut.
/* 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 = Daftar baru<object> ();
ArrayList dirlistsss = new ArrayList();
ArrayList filelistsss = new ArrayList();
DirectoryInfo dir = new DirectoryInfo(TestConfig.ListDir);
//temukan file di bawah direktori
FileInfo[] fi = dir.GetFiles();
foreach (FileInfo f in fi)
{
String fname = f.FullName.ToString();
dirlistsss.Add(fname);
filelistsss.Add(Path.GetFileName(fname));
}
// Lihat Data.
ViewBag.dirlist = dirlistsss;
ViewBag.filelist = filelistsss;
return View("~/Views/Home/list.cshtml");
}
// DAPATKAN: /GridJs2/DetailJson?filename=
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);
}
//return File(stream, "application/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]
// posting: /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);
}
// DAPATKAN: /GridJs2/Xspreadtml
public ActionResult Xspreadtml(String filename)
{
return Redirect("~/xspread/index.html?file=" + filename);
}
// DAPATKAN: /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");
}
//jika menggunakan GridCacheForStream Anda perlu mengatur api ini
// DAPATKAN: /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";
}
// DAPATKAN: /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>
/// Unduh berkas
///</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);
}
}
- Sisipkan kode berikut di fungsi Configure dari Startup.cs dan atur jalur file lisensi (dapatkan lisensi gratis).
/* 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");
- Masukkan kode berikut di Views/Home/index.cshtml.
@{
ViewData["Title"] = "Home Page";
}
- Buat tampilan baru bernama list.cshtml di bawah folder Views/Home/ dan masukkan kode berikut.
<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>
- Unduh folder xspread dari GitHub dan letakkan di bawah folder wwwroot, seperti yang ditunjukkan di bawah ini.
![](images/Import-GridJs-Folder.jpg#center)
Pastikan nomor port yang ditentukan di wwwroot/xspread/index.html sama dengan nomor port proyek.
Bangun aplikasi dan jalankan di browser favorit Anda.
Demo - Buat atau Edit File Excel di ASP.NET MVC
Berikut adalah demonstrasi aplikasi spreadsheet ASP.NET MVC yang baru saja kita buat.
![](images/GridJsDemo.gif#center)
Unduh Kode Sumber
Anda dapat mengunduh kode sumber lengkap aplikasi spreadsheet dari GitHub.
Dapatkan Lisensi Gratis
Anda dapat menggunakan Aspose.Cells.GridJs tanpa batasan evaluasi menggunakan lisensi sementara.
Kesimpulan
Pada artikel ini, Anda telah mempelajari cara membuat aplikasi spreadsheet ASP.NET MVC dengan berbagai fitur untuk membuat dan mengedit Excel dan file spreadsheet lainnya. Anda dapat menyesuaikan aplikasi ini atau mengintegrasikannya ke dalam aplikasi web Anda sendiri. Jika Anda memiliki pertanyaan, jangan ragu untuk memposting ke [forum] kami 7.