TX Text Control .NET Server for ASP.NET是一款Web應(yīng)用程序的文檔處理控件，包括用于 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 中創(chuàng)建 ASP.NET 應(yīng)用程序。

通常，文檔編輯器和文檔查看器具有不同的使用情況，并在 Web 應(yīng)用程序中的不同視圖中使用。在大多數(shù)情況下，編輯器嵌入在應(yīng)用程序中，用于在協(xié)作過程中創(chuàng)建模板、編輯文檔或?qū)忛單臋n。在這些情況下，編輯器占據(jù)了大部分視圖，以便用戶可以專注于編輯文檔。

但是，有多個(gè)應(yīng)用程序在同一個(gè)視圖中使用文檔編輯器和文檔查看器：

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

如果你按照文檔中所述使用 Razor 中的 Html 助手（該助手在編輯器和查看器中均有實(shí)現(xiàn)），則會(huì)收到如下錯(cuò)誤：

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

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

創(chuàng)建實(shí)例

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

@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 幫助程序類添加。文檔查看器在代碼中實(shí)例化，并Render顯式調(diào)用該方法以在視圖中呈現(xiàn)查看器。這允許您在同一視圖中創(chuàng)建兩個(gè)組件。

用例：實(shí)時(shí)預(yù)覽

在同一視圖中使用文檔編輯器和文檔查看器的一個(gè)用例是在用戶鍵入時(shí)提供文檔的實(shí)時(shí)預(yù)覽。這對(duì)于需要在用戶編輯文檔時(shí)提供實(shí)時(shí)反饋的應(yīng)用程序非常有用。

設(shè)想這樣一個(gè)場(chǎng)景：用戶創(chuàng)建了一個(gè)包含合并字段、重復(fù)塊和格式的郵件合并模板。當(dāng)用戶編輯或輸入文本時(shí)，空閑計(jì)時(shí)器會(huì)運(yùn)行并等待用戶空閑。如果用戶未更改任何內(nèi)容，則文檔會(huì)保存并與服務(wù)器端的實(shí)時(shí)數(shù)據(jù)合并，然后加載到文檔查看器中進(jìn)行預(yù)覽。

這使得用戶可以更好地了解合并的結(jié)果，并且無需在編輯器中預(yù)覽文檔即可設(shè)計(jì)模板。

空閑時(shí)預(yù)覽更新

空閑定時(shí)器

此解決方案的代碼非常簡(jiǎn)單。實(shí)現(xiàn)為 JavaScript 空閑計(jì)時(shí)器，setTimeout將在事件發(fā)生時(shí)中止changed。達(dá)到空閑狀態(tài)時(shí)，將保存模板并將其發(fā)送到Merge端點(diǎn)。然后將返回的合并文檔加載到文檔查看器中。

	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);
            }
        });
    })
}

合并端點(diǎn)

服務(wù)器端合并端點(diǎn)只是采用模板并使用郵件合并 將 JSON 數(shù)據(jù)合并到其中以創(chuàng)建返回給客戶端并加載到文檔查看器的預(yù)覽文檔。

[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);
    }
}

結(jié)論

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