في هذه المقالة ، ستتعلم كيفية إنشاء جداول بيانات Excel وقراءتها وتحريرها في تطبيق ASP.NET MVC. لهذا ، سننشئ تطبيق جدول بيانات يتكون من عنصر تحكم شبكة غني بالميزات لعرض ملفات Excel وتحريرها ، كما هو موضح أدناه.
![](images/ASP.NET-UI.jpg#center)
- 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 جديد (Model-View-Controller) في Visual Studio.
![](images/Create-Project.jpg#center)
- قم بتثبيت Aspose.Cells.GridJs من NuGet.
![](images/Install-AsposeCells_GridJs.jpg#center)
- أدخل الكود التالي في 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 في مجلد الطرازات وأضف الكود التالي (قم بتغيير مسارات المجلد وفقًا لبيئتك).
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 في مجلد الطرازات وقم بإضافة التعليمات البرمجية التالية.
/* 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؟ 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 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);
}
// احصل على: / 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 ، فأنت بحاجة إلى ضبط واجهة برمجة التطبيقات هذه
// احصل على: / 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";
}
// احصل على: / 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 ضمن مجلد طرق العرض / الصفحة الرئيسية / وقم بإدراج التعليمات البرمجية التالية.
<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 ، كما هو موضح أدناه.
![](images/Import-GridJs-Folder.jpg#center)
تأكد من أن رقم المنفذ المحدد في wwwroot / xspread / index.html هو نفس رقم منفذ المشروع.
قم ببناء التطبيق وتشغيله في متصفحك المفضل.
عرض توضيحي - إنشاء ملفات Excel أو تحريرها في ASP.NET MVC
فيما يلي عرض توضيحي لتطبيق جداول بيانات ASP.NET MVC الذي أنشأناه للتو.
![](images/GridJsDemo.gif#center)
تحميل شفرة المصدر
يمكنك تنزيل الكود المصدري الكامل لتطبيق جدول البيانات من GitHub.
احصل على رخصة مجانية
يمكنك استخدام Aspose.Cells.GridJs بدون قيود تقييمية باستخدام ترخيص مؤقت.
استنتاج
في هذه المقالة ، تعلمت كيفية إنشاء تطبيق جداول بيانات ASP.NET MVC مع مجموعة من الميزات لإنشاء وتحرير Excel وملفات جداول البيانات الأخرى. يمكنك تخصيص هذا التطبيق أو دمجه في تطبيق الويب الخاص بك. في حال كان لديك أي استفسارات ، فلا تتردد في النشر على المنتدى الخاص بنا.