I am getting some strange characters in my View when using Experience Editor.
This is the main layout;
@model RenderingModel
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:100,100i,300,300i,400,400i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Patua+One" rel="stylesheet">
<title>Trees for Wildlife</title>
<link href="Css/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="Css/custom_css.css" rel="stylesheet">
<link href="Css/NWF.css" rel="stylesheet">
<!-- Owl Carousel Stylesheets -->
<link rel="stylesheet" href="Css/owl.carousel.min.css">
<link rel="stylesheet" href="Css/owl.theme.default.css">
<script src="Scripts/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/custom.js"></script>
<script src="Scripts/owl.carousel.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="main-mobile-search" class="collapse">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Search</button>
</span>
</div>
</div>
<div id="banner-nav-container" class="microsite-banner">
<div class="home-banner-overlay"> </div>
<div class="clearfix"></div>
@Html.Sitecore().Placeholder("head-content")
@Html.Sitecore().Placeholder("header-content")
@Html.Sitecore().Placeholder("HeroImage")
</div>
<div>
@Html.Sitecore().Placeholder("main-content")
</div>
@Html.Sitecore().Placeholder("microsite-footer-sub-navigation")
@Html.Sitecore().Placeholder("footer-content")
@Html.Sitecore().Placeholder("footerNavigation")
<a href="#top">
<div style="position: relative">
<div id="back-to-top" class="hidden-xs">
<img class="center-block" src="images/arrow-up-circle.svg" onerror="this.onerror=null; this.src='arrow-up-circle.png'" alt="Back to Top">
</div>
</div>
</a>
<script>
$('a[href*="top"]:not([href="top"])').click(function () {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
</script>
<div id="mobile_social_sticky" class="hidden-sm hidden-md hidden-lg">
<div id="mobile-donate-sticky">
Donate <img class="heart-icon" src="images/heart-icon.svg" onerror="this.onerror=null; this.src='images/heart-icon.png'" alt="Donate">
</div>
<div id="mobile-facebook-sticky" class="mobile-sticky-item">
<img class="center-block" src="images/facebook-footer.svg" onerror="this.onerror=null; this.src='images/facebook-footer.png'" alt="Visit our Facebook">
</div>
<div id="mobile-twitter-sticky" class="mobile-sticky-item">
<img class="center-block" src="images/twitter-footer.svg" onerror="this.onerror=null; this.src='images/twitter-footer.png'" alt="Visit our Twitter">
</div>
<div id="mobile-email-sticky" class="mobile-sticky-item">
<img class="center-block" src="images/email-footer.svg" onerror="this.onerror=null; this.src='images/email-footer.png'" alt="Email to a Friend">
</div>
</div>
<script>
var searchIcon = document.getElementById("search-icon");
var closeIcon = document.getElementById("close-icon");
TweenMax.set(closeIcon, { x: -100 });
searchIcon.addEventListener('click', function () {
TweenMax.to(searchIcon, .5, { x: -100 });
TweenMax.to(closeIcon, .5, { x: 0 });
console.log('search clicked');
});
closeIcon.addEventListener('click', function () {
TweenMax.to(searchIcon, .5, { x: 0 });
TweenMax.to(closeIcon, .5, { x: -100 });
console.log('close clicked');
});
</script>
</body>
</html>
This is a partial MVC Controller Rendering in the placeholder head-content
, which works great in Preview mode but when I try to work with it in Experience Editor, I have two problems:
I have all of these weird markup
here","icon":"/temp/iconcache/office/16x16/add.png","disabledIcon":"/temp/add_disabled16x16.png","isDivider":false,"tooltip":"Add a new rendering to the '{0}' placeholder.","type":""},{"click":"chrome:placeholder:editSettings","header":"","icon":"/temp/iconcache/office/16x16/window_gear.png","disabledIcon":"/temp/window_gear_disabled16x16.png","isDivider":false,"tooltip":"Edit the placeholder settings.","type":""}],"contextItemUri":"sitecore://master/{7CAFC3BA-B846-46DF-8B0D-2AE218541158}?lang=en&ver=1","custom":{"allowedRenderings":[],"editable":"false"},"displayName":"header-content","expandedDisplayName":null}{"commands":[{"click":"chrome:rendering:sort","header":"Change position","icon":"/temp/iconcache/office/16x16/document_size.png","disabledIcon":"/temp/document_size_disabled16x16.png","isDivider":false,"tooltip":"Move component.","type":""},{"click":"javascript:Sitecore.PageModes.PageEditor.postRequest('webedit:componentoptions(renderingId={3A64C4E1-B1D8-47EF-AB5C-D013F60E81A0},id={7CAFC3BA-B846-46DF-8B0D-2AE218541158},referenceId={49929205-3267-42
I added a placeholder in my layout in Sitecore, and then in the Presentation details I set a rendering to the
main-content
placeholder. I gave it a Datasource and assigned some allowed renderings
Normally, in Experience Editor mode I would have a tab, called "Add Here" when I press the "add new component" in the experience editor, nothing happens.
Note, I did get a message the webedit.css
is not found, I don't know what this is or where to get it, but I checked my include /AppConfig/Include
for Sitecore.MvcExperienceEditor.config
and it is there. I just don't know what to do.
I have worked with Sitecore MVC successfully in the past but I did not set this up.