Reusable partial views can be used as child views in other views. If you are using the same content again and again, it can be embedded in a partial view. This view can be added in view code or loaded dynamically using JavaScript.

When using the MVC TX Text Control, you will need to remove an existing component from the DOM first as only one TX Text Control is allowed on a view.

The partial view that contains TX Text Control is very simple:

@using TXTextControl.Web
@using TXTextControl.Web.MVC

@Html.TXTextControl().TextControl().Render()

The view that embeds the partial view contains a div into which the partial view is loaded dynamically using jQuery code:

<input type="button" onclick="loadEditor()" value="Load Editor" />

<div id="editor"></div>

<script>
    function loadEditor() {
        // check, if editor exists and
        // closes the WebSocket connection gracefully
        // and removes the whole editor from the DOM.
        if (typeof TXTextControl !== 'undefined')
            TXTextControl.removeFromDom();

        // load the partial view
        $('#editor').load('@Url.Action("EditorPartial")');
    }
</script>

Before the partial view can be loaded, the Javascript: TXTextControl.removeFromDom method is used to close the WebSocket connection gracefully and to remove the editor from the DOM.

The controller method EditorPartial returns the partial view and is called by jQuery asynchronously:

public ActionResult EditorPartial()
{
    // return the partial view with editor
    return PartialView("~/Views/Partials/Editor.cshtml");
}