TX Text Control .NET Server for ASP.NET是一款Web應用程序的文檔處理控件，包括用于 ASP.NET、ASP.NET Core 和 Angular 的文檔編輯和查看的客戶端包。目前TX Text Control .NET Server for ASP.NET 支持 .NET 5、.NET 6 和 .NET 4.8 在 Visual Studio 2019 和 2022 中創建 ASP.NET 應用程序。

通常，文檔編輯器和文檔查看器具有不同的使用情況，并在 Web 應用程序中的不同視圖中使用。在大多數情況下，編輯器嵌入在應用程序中，用于在協作過程中創建模板、編輯文檔或審閱文檔。在這些情況下，編輯器占據了大部分視圖，以便用戶可以專注于編輯文檔。

但是，有多個應用程序在同一個視圖中使用文檔編輯器和文檔查看器：

• 文檔編輯：用戶可以在編輯和查看模式之間切換。
• 文檔審閱：用戶可以在審閱文檔的同時查看文檔。
• 模板預覽：用戶可以在編輯模板時預覽模板。

如果你按照文檔中所述使用 Razor 中的 Html 助手（該助手在編輯器和查看器中均有實現），則會收到如下錯誤：

ControlsFactory 不包含“DocumentViewer”的定義，并且找不到接受“ControlsFactory”類型第一個參數的可訪問擴展方法“DocumentViewer”（您是否缺少使用指令或程序集引用？）

上述錯誤可能來自 TextControl 或 DocumentViewer，具體取決于向 using 指令添加了哪個命名空間。

創建實例

除了使用 Razor Html 幫助器之外，您還可以在代碼中創建一個實例來解決此問題。以下代碼片段顯示了如何創建文檔查看器和文檔編輯器的實例：

@using TXTextControl.Web.MVC
@Html.TXTextControl().TextControl(settings =>
{
   settings.Dock = TXTextControl.Web.DockStyle.Fill;
}).LoadDataFromJson(File.ReadAllText("data.json")).Render()
@{
   var settings = new TXTextControl.Web.MVC.DocumentViewer.DocumentViewerSettings();
   settings.Dock = TXTextControl.Web.MVC.DocumentViewer.DocumentViewerSettings.DockStyle.Fill;
   settings.ShowThumbnailPane = false;
   var viewer = new TXTextControl.Web.MVC.DocumentViewer.DocumentViewer(settings);

   @viewer.Render()

}

如您所見，文檔編輯器像往常一樣使用 Html 幫助程序類添加。文檔查看器在代碼中實例化，并Render顯式調用該方法以在視圖中呈現查看器。這允許您在同一視圖中創建兩個組件。

用例：實時預覽

在同一視圖中使用文檔編輯器和文檔查看器的一個用例是在用戶鍵入時提供文檔的實時預覽。這對于需要在用戶編輯文檔時提供實時反饋的應用程序非常有用。

設想這樣一個場景：用戶創建了一個包含合并字段、重復塊和格式的郵件合并模板。當用戶編輯或輸入文本時，空閑計時器會運行并等待用戶空閑。如果用戶未更改任何內容，則文檔會保存并與服務器端的實時數據合并，然后加載到文檔查看器中進行預覽。

這使得用戶可以更好地了解合并的結果，并且無需在編輯器中預覽文檔即可設計模板。

空閑時預覽更新

空閑定時器

此解決方案的代碼非常簡單。實現為 JavaScript 空閑計時器，setTimeout將在事件發生時中止changed。達到空閑狀態時，將保存模板并將其發送到Merge端點。然后將返回的合并文檔加載到文檔查看器中。

	TXTextControl.addEventListener("textControlLoaded", e => {
    let idleTimeout;

    function onIdle() {
        mergeTemplate();
    }

    function resetIdleTimer() {
        clearTimeout(idleTimeout);
        idleTimeout = setTimeout(onIdle, 2000); // Set idle time to 2 seconds
    }

    // Attach event listener to TXTextControl's "changed" event
    TXTextControl.addEventListener("changed", e => {
        resetIdleTimer();
    });

    // Initialize the idle timer
    resetIdleTimer();
});

function mergeTemplate() {
    TXTextControl.saveDocument(TXTextControl.StreamType.InternalUnicodeFormat, document => {
        // call web api endpoint with ajax
        $.ajax({
            url: '/mailmerge/merge',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(document.data),
            success: function (data) {
                // load the document into the viewer
                TXDocumentViewer.loadDocument(data);
            }
        });
    })
}

合并端點

服務器端合并端點只是采用模板并使用郵件合并 將 JSON 數據合并到其中以創建返回給客戶端并加載到文檔查看器的預覽文檔。

[HttpPost]
public string Merge([FromBody] string Template)
{
    byte[] template = System.Convert.FromBase64String(Template);

    using (TXTextControl.ServerTextControl tx = new TXTextControl.ServerTextControl())
    {
        tx.Create();
        tx.Load(template, TXTextControl.BinaryStreamType.InternalUnicodeFormat);
       
        MailMerge mailMerge = new MailMerge();
        mailMerge.TextComponent = tx;

        string jsonData = System.IO.File.ReadAllText("data.json");

        mailMerge.MergeJsonData(jsonData);

        byte[] results;

        tx.Save(out results, TXTextControl.BinaryStreamType.InternalUnicodeFormat);

        return System.Convert.ToBase64String(results);
    }
}

結論

對于需要在用戶編輯文檔時實時反饋的應用程序而言，在同一視圖中使用文檔編輯器和文檔查看器是一項非常強大的功能。通過在代碼中創建文檔查看器的實例，您可以輕松地將此功能添加到您的應用程序中。