TX Text Control .NET Server

Search

Topic

A term that the user entered elsewhere in your application can be found in the Document Viewer as well. Alongside the search users run in the viewer, your code starts, continues and cancels a search from your own page.

The examples change the view of the ASP.NET Core tutorial and load App_Data/template.docx.

How Search Works

The toolbar of the viewer has a search box. When users enter a text and press Enter, the viewer searches the document and highlights the results, and buttons of the toolbar move through the results. The search runs asynchronously and highlights the results in the browser.

While a search is active, the toolbar shows the position of the current result and the number of results next to the search box, for example "1 of 3", followed by the buttons Next search entry, Previous search entry and Cancel search:

The Document Viewer after a search for "invoice": three results are highlighted in the letter, the current one in the heading, and the toolbar shows "1 of 3" with the next, previous and cancel buttons

Search From Code

TXDocumentViewer has three methods for searching. The following view adds a text box and buttons that search the document, move to the next result and cancel the search. Replace the content of Views/Home/Index.cshtml:

@using TXTextControl.Web.MVC.DocumentViewer

<div style="margin-bottom: 8px;">
    <input type="text" id="searchText" placeholder="Search text" />
    <input type="button" id="find" value="Find" />
    <input type="button" id="next" value="Next Result" />
    <input type="button" id="cancel" value="Cancel Search" />
</div>

<div style="width: 800px; height: 600px;">

@Html.TXTextControl().DocumentViewer(settings => {
    settings.DocumentPath = "App_Data/template.docx";
    settings.Dock = DocumentViewerSettings.DockStyle.Fill;
}).Render()

</div>

<script>
    window.addEventListener("documentViewerLoaded", function () {
        document.getElementById("find").addEventListener("click", function () {
            var text = document.getElementById("searchText").value;

            // Don't search for an empty string
            if (text !== "") {
                TXDocumentViewer.find(text);
            }
        });

        document.getElementById("next").addEventListener("click", function () {
            TXDocumentViewer.nextSearchResult();
        });

        document.getElementById("cancel").addEventListener("click", function () {
            TXDocumentViewer.cancelSearch();
        });
    });
</script>

The code works as follows:

  • find searches the loaded document for the string. The code doesn't pass an empty string, because searching for one gave unexpected results in earlier versions.
  • nextSearchResult moves to the next result and scrolls the viewer to it.
  • cancelSearch cancels a search that is running.

Run the application, enter a word of the document and click Find: the results are highlighted. Click Next Result to move to the next one.

All three methods return nothing, and the viewer raises no event when a search has finished. Next Result is a separate button for this reason: because find works asynchronously, the code can't tell when the first results are available.

Limitations

  • The reference doesn't document whether the search is case-sensitive or matches whole words only, and there is no method that returns the number of results. Only the toolbar shows the number to users.
  • There is no method that moves to the previous result. Users move backward with the buttons of the toolbar.
  • The search box of the toolbar is part of the viewer's user interface. To hide the complete toolbar, see User Interface.

Next Steps