Develop Reference

CKEditor Removes IFrame

When I try to load value from the database into a field that is editable by CKEditor, it strips out the iframe tag from it.
For Example, I send the following html to the be printed out on the screen:
<div class="videodetector">
<iframe src="https://www.youtube.com/embed/eSYKJ8WQ508?autohide=1&controls=1&showinfo=0"
frameborder="0" allowfullscreen=""></iframe>
</div>
But when I look at the printed out html, I see something like this:
<div class="videodetector"><img class="cke_iframe" data-cke-realelement="%3Ciframe%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FeSYKJ8WQ508%3Fautohide%3D1%26amp%3Bcontrols%3D1%26amp%3Bshowinfo%3D0%22%20frameborder%3D%220%22%20allowfullscreen%3D%22%22%3E%3C%2Fiframe%3E" data-cke-real-node-type="1" alt="IFrame" title="IFrame" align="" src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==" data-cke-real-element-type="iframe" data-cke-resizable="true"></div>
It seems to inject this image tag where the iframe is suppose to go.
I have researched this online and I tried adding the following code to the config.js, but it does not make a difference for me:
config.extraAllowedContent = 'iframe(*)';
config.allowedContent = true;
Note: If I print this out in a div that is not editable by CKEditor, then the iframe loads without any issues.

I do this:
CKEDITOR.on('instanceReady', function () {
var CKEIframes = $('.cke_iframe');
var CKEIframesL = CKEIframes.length;
for (i = 0; i <CKEIframesL; i ++ ) {
$(CKEIframes[i]).replaceWith(decodeURIComponent($(CKEIframes[i]).data('cke-realelement')));
}
});

I need to add many HTML tags into my text, including iframe. So I use these settings and they work fine:
'extraAllowedContent'=>'*(*)',
'allowedContent'=>true

Add List Of Images To HTML dynamic using c#

I have list of images stored in sql database.
i try to add it dynamic at run time .
i use "InnerHtml"
i create dive tag and want to add the image list in the div tag
HTML:
<div runat=server class="ws_images" id="List_Slide">
C#
List_Slide.InnerHtml = "<li><img src=data1/images/31.jpg alt=31 title=31 id=wows1_0/></li>"
can you help me ?

It looks like you are using ASP.NET web forms.
What you can do is drop a asp:PlaceHolder control onto your page then add Literal controls in there that contain your image HTML code.
<asp:PlaceHolder id="ImagePlaceHolder" runat="server"/>
..
..
In code behind:
var literal = new LiteralControl("<li><img src=data1/images/31.jpg alt=31 title=31 id=wows1_0/></li>");
ImagePlaceHolder.Controls.Add(literal);
PlaceHolder does not render any HTML tags so if you want you can put your div tag inside the LiteralControl.

How to append a WebControl immediately after a WebControl in CodeBehind

Now that i've been MVCing for quite sometime i decide to pop some classic C# .Net into my 8 track and have gotten the following issue:
I have a TextBox WebControl on my aspx page that in the code behind i want to simply append a LiteralControl after it.
This doesn't work:
TextBoxAge.Controls.Add(new LiteralControl("Invalid Age."));
This works but all the way at the bottom:
TextBoxAge.Controls.Parent.Add(new LiteralControl("Invalid Age."));
Can you help me!?
For example the HTML will show:
<div>
<input name="TextBoxAge" type="text" id="TextBoxAge" class="Age">
Invalid Age.
</div>
This should be purely dynamic and relative to the control at hand.
Solution:
TextBoxAge.Parent.Controls.AddAt(TextBoxAge.Parent.Controls.IndexOf(T‌​extBoxAge),new LiteralControl("<span>Invalid Age.</span>"));

Maybe you can try something like this. (Don't remember if AddAt will replace the control at the specified index )
var textBoxAgeIndex = TextBoxAge.Parent.Controls.IndexOf(TextBoxAge);
TextBoxAge.Parent.Controls.AddAt(textBoxAgeIndex +1, new LiteralControl("Invalid Age."));
Hope this will help

The best way is to use an a PlaceHolder
From MSDN: Use the PlaceHolder control as a container to store server
controls that are dynamically added to the Web page.
PlaceHolder.Controls.Add(new LiteralControl("Invalid Age."));

Dynamically add HTML to ASP.NET page

Could someone please advise what the "correct" method is for adding HTML content to an ASP.NET page dynamically?
I am aware of the following declarative method.
//Declaration
<%= MyMethodCall() %>
//And in the code behind.
protected String MyMethodCall()
{
return "Test Value";
}
Is there a better or best practice way?
EDIT: I am building a Galleriffic photo gallery dynamically depending on the images located in a specific folder.

Depends what you want to do.
For controls/text I normally use a LiteralControl and set the Text property as the HTML I want to add, then this control can be added anywhere on the page that you want it to appear
LiteralControl reference is
here
ok seeing as you want it for Galleriffic, I guess it would pseudo-appear as such...
LiteralControl imageGallery = new LiteralControl();
string divStart = #"<div id='thumbs'><ul class='thumbs noscript'>";
imageGallery.Text += divStart;
foreach ([image in images])
{
string imageHTML = #"<li><a class='thumb' name='optionalCustomIdentifier' ref='path/to/slide' title='your image title'>
<img src='path/to/thumbnail' alt='your image title again for graceful degradation' /></a>
<div class='caption'>[caption]<div></li>";
imageGallery.Text += imageHTML;
}
string divEnd = #"</ul></div>";
imageGallery.Text += divEnd;
this.[divOnPage].Controls.Add(imageGallery);

Aspx :
<div id="DIV1" runat="server"></div>
Code behind :
DIV1.InnerHtml = "some text";

There are several ways to do that, which to use really depends on your scenario and preference.
Web User Controls: Can be added dynamically and you get the full editor support of Visual Studio.
XML literals (VB.NET only): Very convenient way to quickly put together HTML in code.
Templates: Add a plain HTML document to your solution and include it as a resource. Then you'll get editor support and you won't clutter your code with HTML source.

Another option
//.aspx
<asp:Literal ID="myText" runat="server"></asp:Literal>
//.aspx.cs
protected Literal myText;
myText.Text = "Hello, World!";

Dynamically create controls using stringbuilder

i have been trying to create controls dynamically on my web page using the StringBuilder class..and i dont quite seem to get through...
any help would be appreciated.
i am trying to do this...
StringBuilder sbTest = new StringBuilder(string.Empty);
sbTest.Append("<input type=\"text\" id=\"txt1\" runat=\"server\" />");
Response.Write(sbTest.ToString());
The page for sure displays a TextBox on the browser which is easily accessible through JavaScript...but what i want is the control to be available on the Server Side too...so that when the page is posted back to the server i can easliy obtain the value that has been entered by the user into the textbox.
Can any 1 please help me with this....
thank you so much....

Like Torbjörn Hansson says, if you just add a name attribute (and maybe remove runat="server" from your original snippet) you'll be able to access the submitted value but you'll only have a client-side HTML <input /> element.
If you are wanting to dynamically create server-side controls then you'll have to do something like this:
TextBox textbox = new TextBox {
/* take care to create unique ID's if you're adding more than 1 TextBox */
ID = "foo",
Text = "bar"
};
Controls.Add(textbox);

In an answer almost about the something I answered this
You should do the things properly and not trying to reinvent the wheel.
Creating controls Dynamically you can choose 2 ways, the .NET way, or the Javascript way
Both are seen by any of the other, in other words, creating controls using the .NET way, javascript can see and use it and vice versa.
.NET way
in your HTML file add something like
<body>
<form id="form" runat="server">
<asp:PlaceHolder id="ph" runat="server" />
</form>
</body>
in your script part
TextBox txt = new TextBox();
txt.ID = "myTxt";
ph.Controls.Add(txt);
you can easily get that TextBox in javascript using:
var myTxtValue = $("#myText").value();
Javascript Way
var txt = $("<input />", {
id : "myTxt"
});
txt.AppendTo("body");
in .NET you get the value using
string value = Request["myTxt"];
NOTE All javascript lines uses jQuery for simplify results

Provide a name-attribute and access it with:
Request.Form["txt1"]

You can get the value from
Request["txt1"]