How to Insert Page Numbers and Navigate in ASP.NET MVC DOCX Editor

27 Aug 20263 minutes to read

You can insert a page number and navigate to a specific page in the ASP.NET MVC DOCX Editor (Document Editor) component in the following ways.

Insert page number

You can use the [insertPageNumber] API in the editor module to insert the page number at the current cursor position. By default, the page number will be inserted in Arabic number style. You can change it by providing the number style in the parameter.

Currently, the DOCX Editor has options to insert a page number at the current cursor position.

The following example code illustrates how to insert page number in header.

CSHTML

@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()

<script>
    var documenteditor;
    var container;
    function onCreated() {
        var documenteditorElement = document.getElementById("container");
        container = documenteditorElement.ej2_instances[0];
       // To insert text in cursor position
       container.documentEditor.editor.insertText('Document editor');
       // To move the selection to header
       container.documentEditor.selection.goToHeader();
       // Insert page number in the current cursor position
       container.documentEditor.editor.insertPageNumber();
    }
</script>

You can also use the [insertField] API in the editor module to insert the page number at the current position.

//Current page number
container.documentEditor.editor.insertField('PAGE \* MERGEFORMAT', '1');

Get page count

You can use the [pageCount] API to get the total number of pages in the document.

The following example code illustrates how to get the number of pages in the document.

CSHTML

@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()


<script>
    var documenteditor;
    var container;
    function onCreated() {
        var documenteditorElement = document.getElementById("container");
        container = documenteditorElement.ej2_instances[0];
       // To insert text in cursor position
       container.documentEditor.editor.insertText('Document editor');
       // To get the total number of pages
       var pageCount =container.documentEditor.pageCount;
    }
</script>

Navigate to specific page

You can use the [goToPage] API in the Selection module to move the selection to the start of the specified page number.

The following example code illustrates how to move the selection to a specific page.

CSHTML

@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()

<script>
    var documenteditor;
    var container;
    function onCreated() {
        var documenteditorElement = document.getElementById("container");
        container = documenteditorElement.ej2_instances[0];
        // To move selection to page number 2
        container.documentEditor.selection.goToPage(2);
    }
</script>