Mixing
How do you render edit frames programmatically in C#
Clash Royale CLAN TAG#URR8PPP
up vote
2
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
asked 6 hours ago
xcal_au
40811
add a comment |Â
up vote
2
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
asked 6 hours ago
xcal_au
40811
add a comment |Â
up vote
2
down vote
favorite
up vote
2
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
asked 6 hours ago
xcal_au
40811
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
asked 6 hours ago
xcal_au
40811
asked 6 hours ago
xcal_au
40811
edited 6 hours ago
asked 6 hours ago
xcal_au
40811
asked 6 hours ago
xcal_au
40811
asked 6 hours ago
xcal_au
40811
40811
add a comment |Â
add a comment |Â
1 Answer
1
active
oldest
votes
up vote
3
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.
answered 6 hours ago
xcal_au
40811
add a comment |Â
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
3
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.
answered 6 hours ago
xcal_au
40811
add a comment |Â
up vote
3
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.
answered 6 hours ago
xcal_au
40811
add a comment |Â
up vote
3
down vote
up vote
3
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.
answered 6 hours ago
xcal_au
40811
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 6 hours ago
xcal_au
40811
answered 6 hours ago
xcal_au
40811
answered 6 hours ago
xcal_au
40811
answered 6 hours ago
xcal_au
40811
40811
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
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsitecore.stackexchange.com%2fquestions%2f14775%2fhow-do-you-render-edit-frames-programmatically-in-c%23new-answer', 'question_page');
);
Post as a guest
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
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
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