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()
view raw Editor.cshtml hosted with ❤ by GitHub

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>
view raw Index.cshtml hosted with ❤ by GitHub

Before the partial view can be loaded, the Javascript: TXTextControl.removeFromDom method TX Text Control .NET Server for ASP.NET
JavaScript API
TXTextControl Object
removeFromDom Method
Closes the WebSocket connection gracefully and removes the whole editor from the DOM.
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");
}
view raw HomeController.cs hosted with ❤ by GitHub