In order to answer your quesion, can you be more specific on your question? How are you hosting your user control?
I am going to host it as a dynamic content.All the code for creating an usercontrol is same but only i have used html as a markup.
Not sure if you need to render <html> and <body> elements from dynamic content. Other than that - dynamic content may be "dynamic" markup (generated from Asp.Net) or static one. What you will do in JS?
using JS I have called some webservices.And "Not sure if you need to render <html> and <body> elements from dynamic content." not understood this clearly.Do you want me to remove the <html> and <body> tags.
I do not understand what you are trying to do, is it a SPA-application you are trying to build?
Valdis is right that there should not be any html and bodytags in a usercontrol that are used in a page, since that will generate not valid html on the genereated html-page.
Can you share all the code for a example of a page and usercontrol you are using for us to give a better answear?
The usercontrol code is
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MyControl.ascx.cs" Inherits="UserControlDemo.MyControl" %> <!doctype html> <!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]--> <!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]--> <!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]--> <!--[if IE 9 ]> <html class="no-js ie9" lang="en"> <![endif]--> <!--[if (gte IE 10)|!(IE)]><!--> <html lang="en"> <!--<![endif]--> <head> <meta charset="utf-8"> <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Capio</title> <meta name="description" content=""> <meta name="author" content="peter"> <!--<meta name="viewport" content="width=device-width; initial-scale=1.0" />--> <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references --> <link rel="shortcut icon" href="/favicon.ico"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="stylesheet" href="css/bootstrap.min.css?v=3"> <link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css?v=3"> <link rel="stylesheet" href="css/main.css?v=3"> </head> <div> <ul class="nav nav-tabs"> <li class="active"><a href="#vpo" data-toggle="tab">Home</a></li> <li><a href="#vpo-schedule" data-toggle="tab">Schedule</a></li> </ul> <div class="tab-content main-content"> <div id="vpo" class="vpo tab-panel fade in active"> <ul class="nav nav-tabs"></ul> <div class="tab-content"></div> </div> <div id="vpo-schedule" class="vpo-schedule tab-panel fade in" > <header> <h2>Schemaläggning av disponibla platser</h2> </header> <form class="form-horizontal"> <fieldset> <legend>Lägg till ny post</legend> <div class="row-fluid"> <div class="span6"> <div class="control-group"> <label class="control-label" for="Avd">Avdelning</label> <div class="controls"> <select name="Avd" id="Avd"> <option value="19">19</option> <option value="20">20</option> </select> </div> </div> <div class="control-group"> <label class="control-label" for="Disp">Disp. platser</label> <div class="controls"> <input type="number" name="Disp" id="Disp" required > </div> </div> <div class="control-group"> <label class="control-label" for="From">Giltig fr.o.m.</label> <div class="controls"> <div id="datepicker-from" class="input-append date"> <input type="text" name="From" id="From"> <span class="add-on"> <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i> </span> </div> </div> </div> <div class="control-group"> <label class="control-label" for="To">Giltig t.o.m.</label> <div class="controls"> <div id="datepicker-to" class="input-append date"> <input type="text" name="To" id="To"> <span class="add-on"> <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i> </span> </div> </div> </div> </div> <div class="span6"> <div class="control-group"> <label class="control-label" for="DoM">Dag i månaden</label> <div class="controls"> <select name="DoM" id="DoM"> <option value="1">01</option> <option value="2">02</option> <option value="3">03</option> <option value="4">04</option> <option value="5">05</option> <option value="6">06</option> <option value="7">07</option> <option value="8">08</option> <option value="9">09</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> </select> </div> </div> <div class="control-group"> <label class="control-label" for="DoW">Dag i veckan</label> <div class="controls"> <select name="DoW" id="DoW"> <option value="0">Sunday</option> <option value="1">Måndagar</option> <option value="2">Tisdagar</option> <option value="3">Wednesday</option> <option value="4">Thursday</option> <option value="5">Friday</option> <option value="6">Satuday</option> </select> </div> </div> <div class="control-group"> <label class="control-label" for="Time">Tidpunkt</label> <div class="controls"> <div id="timepicker-time" class="input-append"> <input type="text" name="Time" id="Time"></input> <span class="add-on"> <i data-time-icon="icon-time" data-date-icon="icon-calendar"> </i> </span> </div> </div> </div> <div class="control-group"> <label class="control-label" for="Active">Aktiv</label> <div class="controls"> <select name="DoW" id="DoW"> <option value="1">Ja</option> <option value="0">Nej</option> </select> </div> </div> </div> </div> <input type="hidden" id="JobId" value="" /> <div class="text-center"><button class="btn btn-large btn-primary">Spara</button></div> </fieldset> </form> <ul class="nav nav-tabs"> <li class="active"><a href="#Schedule-Med" class="beds-available">Med</a></li> <li><a href="#Schedule-Kir">Kir</a></li> <li><a href="#Schedule-Ort">Ort</a></li> <li><a href="#Schedule-Ane">Ane</a></li> </ul> <div class="tab-content"> <div id="Schedule-Med"> <table class="table table-striped"> <thead> <tr> <th>Avd</th> <th>Disp. platser</th> <th>Giltig fr.o.m.</th> <th>Giltig t.o.m.</th> <th>Dag i månaden</th> <th>Dag i veckan</th> <th>Tidpunkt</th> <th>Senast körning</th> <th>Aktiv</th> <th></th> </tr> </thead> <tbody> </tbody> </table> </div> </div> </div> </div> <div class="modal hide" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false"> <div class="modal-header"> <h1>Processing...</h1> </div> <div class="modal-body"> <div class="progress progress-striped active"> <div class="bar" style="width: 100%;"></div> </div> </div> </div> <script src="js/jquery-1.9.1.min.js?v=3"></script> <script src="js/jquery-ui-1.10.3.custom.min.js?v=3"></script> <script src="js/bootstrap.min.js?v=3"></script> <script src="js/bootstrap-datetimepicker.min.js?v=3"></script> <script src="js/bootstrap-datetimepicker.sv_SE.js?v=3"></script> <script src="js/jQuery.XDomainRequest.js?v=3"></script> <script src="data/vpo-params.js"></script> <script src="js/schedule.js?v=2"></script> <script src="js/main.js?v=3"></script> <script> $('#datepicker-from,#datepicker-to').datetimepicker({ language: 'sv-SE', pickTime: false, maskInput: false, format: 'yyyy-MM-dd' }); $('#timepicker-time').datetimepicker({ language: 'sv-SE', pickDate: false, maskInput: true, format: 'hh:mm' }); $('#vpo-schedule').scheduleView(); </script> </div> </html>
And the page will be used like this
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <%--<form id="form1" runat="server">--%> <div> <uc:MyControl id="mycontrol" runat="server" MinValue="1" MaxValue="10" /> </div> <%--</form>--%> </body> </html>
So what you suggest should I remove the <body> with a <div>. But in normal asp project both user control and the asp page is working fine.
Reading from code seems that it may work. Remove html, head, body elements from user control, leave only starting from 1st `div`. If you need to include styles and/or any other assets - include those in your page/master layout file (you may find other solutions - like declaring "from" user control that you will need these files, and then sombody will take care of that and include for you, but that will be overkill here).
Anyway - why don't you go with standard Asp.Net user control? What's the reason behind this decision?
The logic of writing the usercontrol is that user will create pages with this control. So what are the options so that we can use this usercontrol as it is behaving like a standalone page and it will not destroy the functinality of a existing page where it will used as a usercontrol.
Looking at the code it seams like you have all the logic in the user control and removing the html and body from it will break the main html because if you do that there will be no css loadad and so on.
What you should do if all your controls looks like that is to make the aspx-page to only include this, no html or body
<uc:MyControl id="mycontrol" runat="server" MinValue="1" MaxValue="10" /> </div>
Hi,
I have started to build a user control like this wy.
Schedule.ascx file code
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace Tree.Templates.DynamicContent.Vpo { public partial class Schedule : System.Web.UI.UserControl { protected void Page_Load(object sender, EventArgs e) { } } }
Schedule.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Schedule.ascx.cs" Inherits="Tree.Templates.DynamicContent.Vpo.Schedule" %>
And the code for rendering control like this
using System; using System.Collections.Generic; using System.Linq; using System.Web; using EPiServer; using EPiServer.Core; using EPiServer.DataAbstraction; using EPiServer.DynamicContent; using EPiServer.PlugIn; using Tree.Templates.DynamicContent.Vpo; namespace Tree.Templates.DynamicContent.Vpo { [GuiPlugIn( Url = "~/Templates/DynamicContent/Schedule.ascx", Area = PlugInArea.DynamicContent )] public class ScheduleList : IDynamicContent { public static int instanceId = 0; public System.Web.UI.Control GetControl(EPiServer.PageBase hostPage) { /*Resets if reachec 10 to 0*/ if (instanceId == 100) instanceId = 0; var userControl = hostPage.LoadControl("~/Templates/DynamicContent/Schedule.ascx"); return userControl; } public EPiServer.Core.PropertyDataCollection Properties { get { throw new NotImplementedException(); } } public string Render(EPiServer.PageBase hostPage) { throw new NotImplementedException(); } public bool RendersWithControl { get { return true; } } public string State { get; set; } } }
and in the EPIServer.config section write dynamic config like this
<dynamicContent> <controls> <add description="Displays a property from any page" name="PagePropertyPlugin" type="EPiServer.DynamicContent.PlugIn.DynamicPageProperty, EPiServer" /> <add description="Schedule" name="Schedule" type="Tree.Templates.DynamicContent.Vpo.ScheduleList" /> </controls> </dynamicContent>
but when i am runnig project it is giving error
What is the problem
Try to replace all `throw new NotImplementedException()` with something less harmful - like returning `null`, empty strings or whatever.
If you look at this example frpm Fredrik Haglund, you will see that the things you have not implemented in is not requied.
http://blog.fredrikhaglund.se/blog/2011/06/28/dynamic-content-in-episerver-cms-6-r2/
Hi All.
I am developed a user control for EpiServer and instead of using the asp controls I have totally build it using html and JavaScript. Now my question is because I have build my user control like this way will there be a chance of any conflict with EpiServer own template. If any conflict happen how can we overcome that.For the additional information I have build the same user control in a ASP.net project and it is running successfully there, so it should run in EPIServer also.Please share your thoughts and suggestions.