How do you render EditFrame programmatically in C#?
up vote
8
down vote
favorite
I am working on an inherited project that was built with minimal support for editing with the Experience Editor (Sitecore
8.2.4). In particular, I need to retrofit EditFrames
(documentation link).
For some background, the project uses the Sitecore.React project as its view engine (razor is replaced by React JS), so existing razor helpers for EditFrame
rendering were not available.
How can I programmatically supply/build EditFrames
within the MVC C# code?
experience-editor sitecore-react
add a comment |
up vote
8
down vote
favorite
I am working on an inherited project that was built with minimal support for editing with the Experience Editor (Sitecore
8.2.4). In particular, I need to retrofit EditFrames
(documentation link).
For some background, the project uses the Sitecore.React project as its view engine (razor is replaced by React JS), so existing razor helpers for EditFrame
rendering were not available.
How can I programmatically supply/build EditFrames
within the MVC C# code?
experience-editor sitecore-react
add a comment |
up vote
8
down vote
favorite
up vote
8
down vote
favorite
I am working on an inherited project that was built with minimal support for editing with the Experience Editor (Sitecore
8.2.4). In particular, I need to retrofit EditFrames
(documentation link).
For some background, the project uses the Sitecore.React project as its view engine (razor is replaced by React JS), so existing razor helpers for EditFrame
rendering were not available.
How can I programmatically supply/build EditFrames
within the MVC C# code?
experience-editor sitecore-react
I am working on an inherited project that was built with minimal support for editing with the Experience Editor (Sitecore
8.2.4). In particular, I need to retrofit EditFrames
(documentation link).
For some background, the project uses the Sitecore.React project as its view engine (razor is replaced by React JS), so existing razor helpers for EditFrame
rendering were not available.
How can I programmatically supply/build EditFrames
within the MVC C# code?
experience-editor sitecore-react
experience-editor sitecore-react
edited Nov 7 at 8:43
Tamas Varga Sitecore
2,5661852
2,5661852
asked Nov 6 at 23:18
TomT
49211
49211
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
8
down vote
I was able to supply the view layer with EditFrame
HTML by adding the opening and closing HTML markup into my MVC Model.
HTMLHelper
Step 1: Obtain access to HtmlHelper using your current context Controller and a "Fake View".
public static HtmlHelper GetHtmlHelper(this Controller controller)
{
StringBuilder sb = new StringBuilder();
HtmlTextWriter htw = new HtmlTextWriter(new System.IO.StringWriter(sb, System.Globalization.CultureInfo.InvariantCulture));
var viewContext = new ViewContext(controller.ControllerContext, new FakeView(), controller.ViewData, controller.TempData, htw);
return new HtmlHelper(viewContext, new ViewPage());
}
An example of using fake view can be found on this question.
EditFrame Rendering
Step 2: Use the EditFrameRendering class (similar to that in Habitat) to obtain the opening and closing HTML markup.
public void SetEditDatasourceEditFrame(IComponentModelBase model, Controller controller)
{
var htmlHelper = controller.GetHtmlHelper();
EditFrameRendering editFrame = new EditFrameRendering(htmlHelper.ViewContext.Writer, model.DataSourcePath, _editFrameLocation, "Edit Component", string.Empty, string.Empty, null);
model.EditDatasourceStart = editFrame.EditFrameStart();
model.EditDatasourceEnd = editFrame.EditFrameEnd();
}
EditFrameRendering.cs
Note the modification to EditFrameRendering.cs from the Habitat project to support the code above.
public string EditFrameStart()
{
StringWriter stringWriter = new StringWriter();
// Put HtmlTextWriter in using block because it needs to call Dispose.
using (HtmlTextWriter writer = new HtmlTextWriter(stringWriter))
{
this._editFrame.RenderFirstPart(writer);
}
// Return the result.
return stringWriter.ToString();
}
public string EditFrameEnd()
{
StringWriter stringWriter = new StringWriter();
// Put HtmlTextWriter in using block because it needs to call Dispose.
using (HtmlTextWriter writer = new HtmlTextWriter(stringWriter))
{
this._editFrame.RenderLastPart(writer);
}
// Return the result.
return stringWriter.ToString();
}
View Layer
In your view layer access the model, writing out the start and end HTML. Adding any content to go within the edit frame between the tags.
Example React View:
const ReactDOMServer = require('react-dom/server');
...
editFrameMarkup() {
const content = (<div>My Edit Frame</div>);
return (<li><div dangerouslySetInnerHTML={this.createMarkup(this.props.data.EditDatasourceStart, content, this.props.data.EditDatasourceEnd)} /></li>);
},
createMarkup(open, content, close) {
const htmlString = ReactDOMServer.renderToStaticMarkup(content);
const wrapper = open + htmlString + close;
return { __html: wrapper };
}
The above markup was taken from a reusable react component used across all renderings. The model was passed to this react component as a property called data.
The Github example is available here.
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
8
down vote
I was able to supply the view layer with EditFrame
HTML by adding the opening and closing HTML markup into my MVC Model.
HTMLHelper
Step 1: Obtain access to HtmlHelper using your current context Controller and a "Fake View".
public static HtmlHelper GetHtmlHelper(this Controller controller)
{
StringBuilder sb = new StringBuilder();
HtmlTextWriter htw = new HtmlTextWriter(new System.IO.StringWriter(sb, System.Globalization.CultureInfo.InvariantCulture));
var viewContext = new ViewContext(controller.ControllerContext, new FakeView(), controller.ViewData, controller.TempData, htw);
return new HtmlHelper(viewContext, new ViewPage());
}
An example of using fake view can be found on this question.
EditFrame Rendering
Step 2: Use the EditFrameRendering class (similar to that in Habitat) to obtain the opening and closing HTML markup.
public void SetEditDatasourceEditFrame(IComponentModelBase model, Controller controller)
{
var htmlHelper = controller.GetHtmlHelper();
EditFrameRendering editFrame = new EditFrameRendering(htmlHelper.ViewContext.Writer, model.DataSourcePath, _editFrameLocation, "Edit Component", string.Empty, string.Empty, null);
model.EditDatasourceStart = editFrame.EditFrameStart();
model.EditDatasourceEnd = editFrame.EditFrameEnd();
}
EditFrameRendering.cs
Note the modification to EditFrameRendering.cs from the Habitat project to support the code above.
public string EditFrameStart()
{
StringWriter stringWriter = new StringWriter();
// Put HtmlTextWriter in using block because it needs to call Dispose.
using (HtmlTextWriter writer = new HtmlTextWriter(stringWriter))
{
this._editFrame.RenderFirstPart(writer);
}
// Return the result.
return stringWriter.ToString();
}
public string EditFrameEnd()
{
StringWriter stringWriter = new StringWriter();
// Put HtmlTextWriter in using block because it needs to call Dispose.
using (HtmlTextWriter writer = new HtmlTextWriter(stringWriter))
{
this._editFrame.RenderLastPart(writer);
}
// Return the result.
return stringWriter.ToString();
}
View Layer
In your view layer access the model, writing out the start and end HTML. Adding any content to go within the edit frame between the tags.
Example React View:
const ReactDOMServer = require('react-dom/server');
...
editFrameMarkup() {
const content = (<div>My Edit Frame</div>);
return (<li><div dangerouslySetInnerHTML={this.createMarkup(this.props.data.EditDatasourceStart, content, this.props.data.EditDatasourceEnd)} /></li>);
},
createMarkup(open, content, close) {
const htmlString = ReactDOMServer.renderToStaticMarkup(content);
const wrapper = open + htmlString + close;
return { __html: wrapper };
}
The above markup was taken from a reusable react component used across all renderings. The model was passed to this react component as a property called data.
The Github example is available here.
add a comment |
up vote
8
down vote
I was able to supply the view layer with EditFrame
HTML by adding the opening and closing HTML markup into my MVC Model.
HTMLHelper
Step 1: Obtain access to HtmlHelper using your current context Controller and a "Fake View".
public static HtmlHelper GetHtmlHelper(this Controller controller)
{
StringBuilder sb = new StringBuilder();
HtmlTextWriter htw = new HtmlTextWriter(new System.IO.StringWriter(sb, System.Globalization.CultureInfo.InvariantCulture));
var viewContext = new ViewContext(controller.ControllerContext, new FakeView(), controller.ViewData, controller.TempData, htw);
return new HtmlHelper(viewContext, new ViewPage());
}
An example of using fake view can be found on this question.
EditFrame Rendering
Step 2: Use the EditFrameRendering class (similar to that in Habitat) to obtain the opening and closing HTML markup.
public void SetEditDatasourceEditFrame(IComponentModelBase model, Controller controller)
{
var htmlHelper = controller.GetHtmlHelper();
EditFrameRendering editFrame = new EditFrameRendering(htmlHelper.ViewContext.Writer, model.DataSourcePath, _editFrameLocation, "Edit Component", string.Empty, string.Empty, null);
model.EditDatasourceStart = editFrame.EditFrameStart();
model.EditDatasourceEnd = editFrame.EditFrameEnd();
}
EditFrameRendering.cs
Note the modification to EditFrameRendering.cs from the Habitat project to support the code above.
public string EditFrameStart()
{
StringWriter stringWriter = new StringWriter();
// Put HtmlTextWriter in using block because it needs to call Dispose.
using (HtmlTextWriter writer = new HtmlTextWriter(stringWriter))
{
this._editFrame.RenderFirstPart(writer);
}
// Return the result.
return stringWriter.ToString();
}
public string EditFrameEnd()
{
StringWriter stringWriter = new StringWriter();
// Put HtmlTextWriter in using block because it needs to call Dispose.
using (HtmlTextWriter writer = new HtmlTextWriter(stringWriter))
{
this._editFrame.RenderLastPart(writer);
}
// Return the result.
return stringWriter.ToString();
}
View Layer
In your view layer access the model, writing out the start and end HTML. Adding any content to go within the edit frame between the tags.
Example React View:
const ReactDOMServer = require('react-dom/server');
...
editFrameMarkup() {
const content = (<div>My Edit Frame</div>);
return (<li><div dangerouslySetInnerHTML={this.createMarkup(this.props.data.EditDatasourceStart, content, this.props.data.EditDatasourceEnd)} /></li>);
},
createMarkup(open, content, close) {
const htmlString = ReactDOMServer.renderToStaticMarkup(content);
const wrapper = open + htmlString + close;
return { __html: wrapper };
}
The above markup was taken from a reusable react component used across all renderings. The model was passed to this react component as a property called data.
The Github example is available here.
add a comment |
up vote
8
down vote
up vote
8
down vote
I was able to supply the view layer with EditFrame
HTML by adding the opening and closing HTML markup into my MVC Model.
HTMLHelper
Step 1: Obtain access to HtmlHelper using your current context Controller and a "Fake View".
public static HtmlHelper GetHtmlHelper(this Controller controller)
{
StringBuilder sb = new StringBuilder();
HtmlTextWriter htw = new HtmlTextWriter(new System.IO.StringWriter(sb, System.Globalization.CultureInfo.InvariantCulture));
var viewContext = new ViewContext(controller.ControllerContext, new FakeView(), controller.ViewData, controller.TempData, htw);
return new HtmlHelper(viewContext, new ViewPage());
}
An example of using fake view can be found on this question.
EditFrame Rendering
Step 2: Use the EditFrameRendering class (similar to that in Habitat) to obtain the opening and closing HTML markup.
public void SetEditDatasourceEditFrame(IComponentModelBase model, Controller controller)
{
var htmlHelper = controller.GetHtmlHelper();
EditFrameRendering editFrame = new EditFrameRendering(htmlHelper.ViewContext.Writer, model.DataSourcePath, _editFrameLocation, "Edit Component", string.Empty, string.Empty, null);
model.EditDatasourceStart = editFrame.EditFrameStart();
model.EditDatasourceEnd = editFrame.EditFrameEnd();
}
EditFrameRendering.cs
Note the modification to EditFrameRendering.cs from the Habitat project to support the code above.
public string EditFrameStart()
{
StringWriter stringWriter = new StringWriter();
// Put HtmlTextWriter in using block because it needs to call Dispose.
using (HtmlTextWriter writer = new HtmlTextWriter(stringWriter))
{
this._editFrame.RenderFirstPart(writer);
}
// Return the result.
return stringWriter.ToString();
}
public string EditFrameEnd()
{
StringWriter stringWriter = new StringWriter();
// Put HtmlTextWriter in using block because it needs to call Dispose.
using (HtmlTextWriter writer = new HtmlTextWriter(stringWriter))
{
this._editFrame.RenderLastPart(writer);
}
// Return the result.
return stringWriter.ToString();
}
View Layer
In your view layer access the model, writing out the start and end HTML. Adding any content to go within the edit frame between the tags.
Example React View:
const ReactDOMServer = require('react-dom/server');
...
editFrameMarkup() {
const content = (<div>My Edit Frame</div>);
return (<li><div dangerouslySetInnerHTML={this.createMarkup(this.props.data.EditDatasourceStart, content, this.props.data.EditDatasourceEnd)} /></li>);
},
createMarkup(open, content, close) {
const htmlString = ReactDOMServer.renderToStaticMarkup(content);
const wrapper = open + htmlString + close;
return { __html: wrapper };
}
The above markup was taken from a reusable react component used across all renderings. The model was passed to this react component as a property called data.
The Github example is available here.
I was able to supply the view layer with EditFrame
HTML by adding the opening and closing HTML markup into my MVC Model.
HTMLHelper
Step 1: Obtain access to HtmlHelper using your current context Controller and a "Fake View".
public static HtmlHelper GetHtmlHelper(this Controller controller)
{
StringBuilder sb = new StringBuilder();
HtmlTextWriter htw = new HtmlTextWriter(new System.IO.StringWriter(sb, System.Globalization.CultureInfo.InvariantCulture));
var viewContext = new ViewContext(controller.ControllerContext, new FakeView(), controller.ViewData, controller.TempData, htw);
return new HtmlHelper(viewContext, new ViewPage());
}
An example of using fake view can be found on this question.
EditFrame Rendering
Step 2: Use the EditFrameRendering class (similar to that in Habitat) to obtain the opening and closing HTML markup.
public void SetEditDatasourceEditFrame(IComponentModelBase model, Controller controller)
{
var htmlHelper = controller.GetHtmlHelper();
EditFrameRendering editFrame = new EditFrameRendering(htmlHelper.ViewContext.Writer, model.DataSourcePath, _editFrameLocation, "Edit Component", string.Empty, string.Empty, null);
model.EditDatasourceStart = editFrame.EditFrameStart();
model.EditDatasourceEnd = editFrame.EditFrameEnd();
}
EditFrameRendering.cs
Note the modification to EditFrameRendering.cs from the Habitat project to support the code above.
public string EditFrameStart()
{
StringWriter stringWriter = new StringWriter();
// Put HtmlTextWriter in using block because it needs to call Dispose.
using (HtmlTextWriter writer = new HtmlTextWriter(stringWriter))
{
this._editFrame.RenderFirstPart(writer);
}
// Return the result.
return stringWriter.ToString();
}
public string EditFrameEnd()
{
StringWriter stringWriter = new StringWriter();
// Put HtmlTextWriter in using block because it needs to call Dispose.
using (HtmlTextWriter writer = new HtmlTextWriter(stringWriter))
{
this._editFrame.RenderLastPart(writer);
}
// Return the result.
return stringWriter.ToString();
}
View Layer
In your view layer access the model, writing out the start and end HTML. Adding any content to go within the edit frame between the tags.
Example React View:
const ReactDOMServer = require('react-dom/server');
...
editFrameMarkup() {
const content = (<div>My Edit Frame</div>);
return (<li><div dangerouslySetInnerHTML={this.createMarkup(this.props.data.EditDatasourceStart, content, this.props.data.EditDatasourceEnd)} /></li>);
},
createMarkup(open, content, close) {
const htmlString = ReactDOMServer.renderToStaticMarkup(content);
const wrapper = open + htmlString + close;
return { __html: wrapper };
}
The above markup was taken from a reusable react component used across all renderings. The model was passed to this react component as a property called data.
The Github example is available here.
answered Nov 6 at 23:18
TomT
49211
49211
add a comment |
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsitecore.stackexchange.com%2fquestions%2f14775%2fhow-do-you-render-editframe-programmatically-in-c%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown