リモートでロードおよび保存

FlexSheetでは、C1JSONRequestを使用してExcelファイルをリモートでロードおよび保存できます。それには、リモートURLを指定して、ExcelファイルまたはワークブックからFlexSheetコントロールにデータをロードし、FlexSheetデータをExcelファイルまたはワークブックとしてサーバーに保存します。

次の例は、FlexSheetHelperクラスのLoadメソッドを使用して、サーバーにあるExcelファイルをFlexSheetにロードします。

クライアント側でExcelをロードおよび保存するには、FlexSheetにjszip.min.jsファイルが必要です。そのため、このファイルをアプリケーションに追加し、各ビューまたは_Layout.cshtmlファイルの<head>セクションにファイルへの参照を提供する必要があります。

次のコード例は、ExcelファイルまたはワークブックからFlexSheetコントロールにデータをリモートにロードする方法を示します。

以下に示すように、MVC参照を含めます。

C#	コードのコピー
using C1.Web.Mvc.Sheet; using System; using System.Collections; using System.Globalization; using System.Linq; using System.Web; using System.Web.Mvc; using System.Collections.Generic; using C1.Web.Mvc.Serializition;

コードのコピー

using C1.Web.Mvc.Sheet;
using System;
using System.Collections;
using System.Globalization;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Collections.Generic;
using C1.Web.Mvc.Serializition;

RemoteLoadController.cs

C#	コードのコピー
public class RemoteController : Controller { // GET: /<controller>/ public IActionResult Index() { return View(); } public ActionResult RemoteLoadXlsx() { return this.C1Json(FlexSheetHelper.Load("~/ToLoad/WorkBook.xlsx")); } }

コードのコピー

public class RemoteController : Controller
{
    // GET: /<controller>/
    public IActionResult Index()
    {
        return View();
    }
    public ActionResult RemoteLoadXlsx()
    {
        return this.C1Json(FlexSheetHelper.Load("~/ToLoad/WorkBook.xlsx"));
    }
}

ここでは、リモートでロードされるExcelワークブックは、アプリケーションの「wwwroot」フォルダに配置されます。

RemoteLoading.cshtml

HTML	コードのコピー
@using C1.Web.Mvc.Sheet; <script src="http://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script> <div> <c1-flex-sheet class="flexSheet" id="flexSheet" height="700px" width="700px" load-action-url="@(Url.Action("RemoteLoadXlsx"))"> </c1-flex-sheet> </div>

HTML

コードのコピー

@using C1.Web.Mvc.Sheet;
<script src="http://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>

<div>
    <c1-flex-sheet class="flexSheet" id="flexSheet" height="700px" width="700px"
                   load-action-url="@(Url.Action("RemoteLoadXlsx"))">                 
    </c1-flex-sheet>
</div>

先頭に戻る

コードの場合

RemoteSaveController.cs

C#	コードのコピー
public class RemoteSaveController : Controller { // GET: /<controller>/ public static List<Sale> SALES = Sale.GetData(50).ToList(); public ActionResult Index() { return View(SALES); } private const string FILE_PATH = "\\wwwroot\\uploadFile\\save.xlsx"; public JsonResult RemoteSaveFile([FlexSheetRequest]FlexSheetSaveRequest request) { var success = true; var error = ""; var app = GetService<IApplicationEnvironment>(); var savePath = app.ApplicationBasePath + FILE_PATH; try { Stream st = request.GetFileStream(); using (FileStream fs = new FileStream(savePath, FileMode.Create)) { if (st != null) { st.CopyTo(fs); } } } catch (Exception e) { success = false; error = e.ToString(); } return this.C1Json(FlexSheetHelper.Save(success, error)); } public FileResult DownloadFile() { var app = GetService<IApplicationEnvironment>(); var savePath = app.ApplicationBasePath + FILE_PATH; var name = Path.GetFileName(FILE_PATH); return File(new FileStream(savePath, FileMode.Open, FileAccess.Read), "application/msexcel", name); } public static T GetService<T>() where T : class { var serviceProvider = CallContextServiceLocator.Locator.ServiceProvider; return serviceProvider.GetService(typeof(T)) as T; } }

コードのコピー

public class RemoteSaveController : Controller
{
    // GET: /<controller>/
    public static List<Sale> SALES = Sale.GetData(50).ToList();
    public ActionResult Index()
    {
        return View(SALES);
    }

    private const string FILE_PATH = "\\wwwroot\\uploadFile\\save.xlsx";
    public JsonResult RemoteSaveFile([FlexSheetRequest]FlexSheetSaveRequest request)
    {
        var success = true;
        var error = "";
        var app = GetService<IApplicationEnvironment>();
        var savePath = app.ApplicationBasePath + FILE_PATH;
        try
        {
            Stream st = request.GetFileStream();
            using (FileStream fs = new FileStream(savePath, FileMode.Create))
            {
                if (st != null)
                {
                    st.CopyTo(fs);
                }
            }
        }
        catch (Exception e)
        {
            success = false;
            error = e.ToString();
        }

        return this.C1Json(FlexSheetHelper.Save(success, error));
    }

    public FileResult DownloadFile()
    {
        var app = GetService<IApplicationEnvironment>();
        var savePath = app.ApplicationBasePath + FILE_PATH;
        var name = Path.GetFileName(FILE_PATH);
        return File(new FileStream(savePath, FileMode.Open, FileAccess.Read),
            "application/msexcel", name);
    }

    public static T GetService<T>() where T : class
    {
        var serviceProvider = CallContextServiceLocator.Locator.ServiceProvider;
        return serviceProvider.GetService(typeof(T)) as T;
    }
}

RemoteSaving.cshtml

HTML	コードのコピー
<script> function remoteSave() { var flexSheet = wijmo.Control.getControl('#flexSheet'); flexSheet.remoteSave(c1.mvc.grid.sheet.ContentType.Xlsx); } function onFileSaved(sender, args) { if (args.success) { window.location.href = '@Url.Action("DownloadFile")'; } else { alert(args.error); } } </script> <div> <button type="button" class="btn btn-default" onclick="remoteSave()"> 保存</button> <br /> <c1-flex-sheet class="flexSheet" id="flexSheet" width="500px" height="700px" save-action-url="@(Url.Action("RemoteSaveFile"))" remote-saved="onFileSaved"> <c1-bound-sheet> <c1-items-source source-collection="Model"> </c1-items-source> </c1-bound-sheet> </c1-flex-sheet> </div>

HTML

コードのコピー

<script>
        function remoteSave() {
            var flexSheet = wijmo.Control.getControl('#flexSheet');
            flexSheet.remoteSave(c1.mvc.grid.sheet.ContentType.Xlsx);
        }

        function onFileSaved(sender, args) {
            if (args.success) {
                window.location.href = '@Url.Action("DownloadFile")';
            } else {
                alert(args.error);
            }
        }
</script>

<div>
    <button type="button" class="btn btn-default" onclick="remoteSave()">
保存</button>
    <br />

        <c1-flex-sheet class="flexSheet" id="flexSheet" width="500px" 
height="700px" save-action-url="@(Url.Action("RemoteSaveFile"))"
                       remote-saved="onFileSaved">
            <c1-bound-sheet>
                <c1-items-source source-collection="Model">
</c1-items-source>
            </c1-bound-sheet>
        </c1-flex-sheet>
    </div>

先頭に戻る