AI OnAI Off
Need help regarding Episerver usercontrol
In order to answer your quesion, can you be more specific on your question? How are you hosting your user control?
Mar 19, 2014 22:07
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.
Mar 20, 2014 6:53
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?
Mar 20, 2014 7:46
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.
Mar 20, 2014 8:02
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?
Mar 20, 2014 8:48
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>
Mar 20, 2014 8:53
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.
Mar 20, 2014 8:56
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?
Mar 20, 2014 8:58
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.
Mar 20, 2014 9:20
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>
Mar 20, 2014 9:22
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
The Dynamic Content control type Schedule could not be loaded. Check the <dynamicContent> section in web.config
What is the problem
Mar 20, 2014 11:18
Try to replace all `throw new NotImplementedException()` with something less harmful - like returning `null`, empty strings or whatever.
Mar 20, 2014 11:29
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/
Mar 20, 2014 12:21
This thread is locked and should be used for reference only. Please use the Episerver CMS 7 and earlier versions forum to open new discussions.
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.