[mb2000inc]

In an effort to keep things simple, I want to dynamically create DIV tags (in my code behind) based on a selection made by the user from a menu.

I have most of what I want to do... my main question is, would it be possible to populate the div with other HTML code within this line?

//removed other code for sake of simplicity
//....
DivThing.InnerHtml = "<htmltag>something within html tags</htmltag>";
this.Controls.Add(DivThing);

Ideally, I'd LOVE to use it to populate some images chosen from a database or something cool, but that will come later.

[keakTheGEEK]

@mb2000inc,

That looks perfectly doable to me. Have you tried it yet? You want to make sure that you set the runat="server" attribute on your div element if you want to manipulate it in your behind code:

<div runat="server" id="DivThing">

</div>

You have .InnerHtml and .InnerText properties to work with, along with a ton of other properties and methods. Essentially, when you give an HTML element the runat="server" attribute, it will then inherit all the properties, functions, etc from the base HtmlControl class of the System.Web.UI.HtmlControls Namespace. There are a ton of Html Controls in that namespace to work with.

In fact, you can create additional controls that you want, manipulate them and then add them to your div (rather then typing the markup in a string and setting it to the .InnerHtml property). So for example, you mentioned that you would like to add images into your div. Well, you could essentially do something like this in your code behind:

HtmlImage img = new HtmlImage();
img.ID = "myImage";
img.Src = "~/images/image.gif";
img.Alt = "An image";
img.Attributes.Add("class", "cssimage");

DivThing.Controls.Add(img);
this.Controls.Add(DivThing);

Hope this helps ya.
Happy Coding

This post has been edited by keakTheGEEK: 10 February 2011 - 06:15 PM

[mb2000inc]

Yes, this helps immensely. Thank you for your input.
However, this brings up another question.... I tried your suggestion last night and it worked perfectly. But my question is, how about video (namely flash)?

I tried an <embed> and an <object> but neither loaded... you could see it try to load, but nothing happened.

Any particular reason why? Does it have to do with client side trying to run on server side? Would there be a way around that?

Essentially, what I decided to try was this (just on a whim - I figured I could use this code at work):

On the page load event, I used a switch/case statement that pulled up one of a couple querystring possibilities - kinda like youtube does when you select a video from the right hand side, and it loads on the left.... in a Placeholder control.

    protected void VideoLoader()
    {
        plchldrVideo.Controls.Clear();

        System.Web.UI.HtmlControls.HtmlGenericControl VideoDiv = new System.Web.UI.HtmlControls.HtmlGenericControl("DIV");
        VideoDiv.ID = "VideoDivCode";

        VideoDiv.Style.Add(HtmlTextWriterStyle.Width, "460px");
        VideoDiv.Style.Add(HtmlTextWriterStyle.Height, "582px");
        VideoDiv.InnerHtml = "<object id='kaltura_player' name='kaltura_player' type='application/x-shockwave-flash' allowFullScreen='true' allowNetworking='all' allowScriptAccess='always' height='620' width='460' xmlns:dc='http%3A%2F%2Fpurl.org/dc/terms/' xmlns:media='http%3A%2F%2Fsearch.yahoo.com/searchmonkey/media/' rel='media:video' resource='http%3A%2F%2Fwww.kaltura.com/index.php/kwidget/cache_st/1289494685/wid/_275522/uiconf_id/2182752' data='http%3A%2F%2Fwww.kaltura.com/index.php/kwidget/cache_st/1289494685/wid/_275522/uiconf_id/2182752'><param name='allowFullScreen' value='true' /><param name='allowNetworking' value='all' /><param name='allowScriptAccess' value='always' /><param name='bgcolor' value='#000000' /><param name='flashVars' value='playlistAPI.autoInsert=true&playlistAPI.kpl0Name=EMS-U Direct Sales G&L Training&playlistAPI.kpl0Url=http%3A%2F%2Fwww.kaltura.com%2Findex.php%2Fpartnerservices2%2Fexecuteplaylist%3Fuid%3D%26partner_id%3D275522%26subp_id%3D27552200%26format%3D8%26ks%3D%7Bks%7D%26playlist_id%3D0_awh7fj8b&' /><param name='movie' value='http%3A%2F%2Fwww.kaltura.com/index.php/kwidget/cache_st/1289494685/wid/_275522/uiconf_id/2182752' /><a href='http%3A%2F%2Fcorp.kaltura.com'>video platform</a> <a href='http%3A%2F%2Fcorp.kaltura.com/video_platform/video_management'>video management</a> <a href='http%3A%2F%2Fcorp.kaltura.com/solutions/video_solution'>video solutions</a> <a href='http%3A%2F%2Fcorp.kaltura.com/video_platform/video_publishing'>video player</a> {SEO} </object>";
        plchldrVideo.Controls.Add(VideoDiv);
    }

I know, it's a lot to read, sorry. So, what do you think? Is there a way to actually make it work? Would it have something to do with the fact that I'm using a Placeholder control as opposed to a DIV?

Let me know.

Thanks.

[keakTheGEEK]

@mb2000inc,

You should be able to embed flash video in an ASP .NET page just like you would in a standard HTML page. The client will still need to have a compatible flash player plugin installed in their browser.

I am not really sure why the flash content that you are attempting to embed in your page isn't working. Are you sure that the markup you have your VideoDiv.InnerHtml assigned to is valid and works? i.e. have you already used that same markup in a regular html page (outside of ASP.NET) and it loaded and played the content?

On another related note. I think that there probably is a much more efficient way of dynamically playing flash content. It seems to me that creating the markup in a string like that would be quite cumbersome. Here is how I would go about doing this (although I haven't done this for playing flash content specifically, I think the same approach would still apply).

-First, I would create a standard web page with the necessary markup to play flash content. Test it and make sure it works with a sample file.

-Then, I would take all of the markup in between the <body> tag and put that into a ASP.NET User Control (See link for details about ASP.NET User Controls, they are a very handy tool)

-Next, I would take any attribute/property that needs to be set dynamically of the object which embeds the flash content (src="path" being the main one), and create public properties in your behind code to get/set those values (this can be done all with in the user control)

-Then, add the user control to the web form that you want the flash content to play

By doing something along these lines, you can set the necessary properties being exposed by your user control and then the content of the control will load dynamically based on what values you set. This is one approach.

There is also a whole slew of third party and open source tools out there that you can take advantage of to accomplish this. If you are familiar with Javascript and JQuery tools, I recommend looking into these:

flashembed
swfobject

Both of those are client side and seem to be quite popular

This is a tutorial from CodeProject which walks you through creating a server control which utilizes swfobject. You may find that one useful.

Also, there is a ton of stuff on the ASP.NET Control Gallery and you may find something which you can incorporate on there as well.

Hope this helps
Happy Coding

[mb2000inc]

Thanks! I will check those links out. You've been a great help.


In answer to your question:

Quote

Are you sure that the markup you have your VideoDiv.InnerHtml assigned to is valid and works? i.e. have you already used that same markup in a regular html page (outside of ASP.NET) and it loaded and played the content?

Yup. I have it running on another site - which is in PHP (I inherited it from the previous guy.... and am now redoing it in .NET)

[mb2000inc]

First... you rock with your suggestions. Excellent and Thank you.

Second... I took a whole new route with the video thing. I got an account with Kaltura (for streaming video service - their support folks were horrible, so I ended up doing my own thing.)

This is what I did:

//First  I created A <div> on the front end and called it, "plchldrVideo"
//Making it a server convtrol (runat="server").
//
//           <div id="plchldrVideo" runat="server"></div>
//
//
//

   protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
	   RenderContents(); //Calling the function on page load
        }

    }   

   protected void RenderContents()
    {
	//Clear out anything in the <div> created on the front end
        plchldrVideo.Controls.Clear(); 

	//Create a NEW <div> to rest inside this one.
        System.Web.UI.HtmlControls.HtmlGenericControl VideoDiv = new System.Web.UI.HtmlControls.HtmlGenericControl("div");

	//Give it a name
        VideoDiv.ID = "VideoDivCode";

	//Give it some styling
        VideoDiv.Style.Add(HtmlTextWriterStyle.Width, "460px");
        VideoDiv.Style.Add(HtmlTextWriterStyle.Height, "317px");
        VideoDiv.Style.Add(HtmlTextWriterStyle.MarginTop, "5px");
        VideoDiv.Style.Add(HtmlTextWriterStyle.MarginBottom, "10px");

	//This the inner HTML <OBJECT> code that Kaltura uses to "embed" the player on a page - BUT it's calling the next fucntion
        VideoDiv.InnerHtml = videoString();

	//Add the control
        plchldrVideo.Controls.Add(VideoDiv);
    }

    private String videoString()
    {
	//This is what is actually embeded in the previous function.
        //For the querystring, I would use this "0_ex4i45f5" as the value of the EntryID

	//Create a string builder
        StringBuilder sb = new StringBuilder();

	//What video do I want to load?
	//I decided that I wanted to load a specific video from a menu of choices, much like YouTube.
	//(example: http://www.youtube.com/watch?v=ZW4LhWEbzBA) <- That's my daughter's video, btw.
	//In this case, the querystring we're looking for is EntryId - but in Kaltura's terms is: "entry_id"

        string EntryId = Request.QueryString["EntryId"];
        string ContId = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque euismod scelerisque odio. In ipsum lectus, faucibus at, rutrum ac, suscipit at, sapien.";
        sb.Append("<object id=\"kaltura_player\" name=\"kaltura_player\" type=\"application/x-shockwave-flash\" allowFullScreen=\"true\" allowNetworking=\"all\" ");
        sb.Append("allowScriptAccess=\"always\" height=\"317\" width=\"460\" ");
        sb.Append("xmlns:dc=\"http://purl.org/dc/terms/\" xmlns:media=\"http://search.yahoo.com/searchmonkey/media/\" rel=\"media:video\" ");
        sb.Append("resource=\"http://www.kaltura.com/index.php/kwidget/cache_st/1297462495/wid/_275522/uiconf_id/1645332/entry_id/" + EntryId + "\" ");
        sb.Append("data=\"http://www.kaltura.com/index.php/kwidget/cache_st/1297462495/wid/_275522/uiconf_id/1645332/entry_id/" + EntryId + "\"> ");
        sb.Append("<param name=\"allowFullScreen\" value=\"true\" />");
        sb.Append("<param name=\"allowNetworking\" value=\"all\" />");
        sb.Append("<param name=\"allowScriptAccess\" value=\"always\" />");
        sb.Append("<param name=\"bgcolor\" value=\"#000000\" />");
        sb.Append("<param name=\"flashVars\" value=\"&\" />");
        sb.Append("<param name=movie value=\"http://www.kaltura.com/index.php/kwidget/cache_st/1297462495/wid/_275522/uiconf_id/1645332/entry_id/" + EntryId + "\" />");
        sb.Append("<a href=\"http://corp.kaltura.com\">video platform</a> ");
        sb.Append("<a href=\"http://corp.kaltura.com/video_platform/video_management\">video management</a> ");
        sb.Append("<a href=\"http://corp.kaltura.com/solutions/video_solution\">video solutions</a> ");
        sb.Append("<a href=\"http://corp.kaltura.com/video_platform/video_publishing\">video player</a> ");
        sb.Append("<a rel=\"media:thumbnail\" href=\"http://cdnbakmi.kaltura.com/p/275522/sp/27552200/thumbnail/entry_id/" + EntryId + "/width/120/height/90/bgcolor/000000/type/2\">");
        sb.Append("<span property=\"dc:description\" content=\"" + ContId + "\" />");
        sb.Append("<span property=\"media:title\" content=\"Altus Premier Web Tools\" />");
        sb.Append("<span property=\"media:width\" content=\"460\" />");
        sb.Append("<span property=\"media:height\" content=\"317\" />");
        sb.Append("<span property=\"media:type\" content=\"application/x-shockwave-flash\" />");
        sb.Append("</object>");
        return sb.ToString();
    }

Let me know if you have any questions on why I did what I did...
Again, thanks for all your help!

[keakTheGEEK]

@mb2000inc,

Awesome! I am glad to here that you were able to come up with a solution that worked for you. I am also glad to here that any of my suggestions were helpful to you during the process, it was my pleasure. Also, thanks for sharing your solution. Best of luck to you on the rest of your project and your future coding endeavors.

~keak

[arvindWebDeveloper]

My page structure is as below

<section>
<article>
<asp:Table>
<asp:TableRow>
<asp:TableCell ID="shadow_left">
<asp:TableCell ID="wrapper_center">
<div id="products_holder" runat="server"> MY DYNAMIC BUTTONS ARE CREATED HERE!!!
<div id="cart_holder">
<asp:TableCell ID="shadow_right">

The problem is at products_holder div
I am creating number of buttons at run time. The buttons are created fine. But the issue arise when I try to group the dynamically created buttons in products_holder div. Then it stop behaving like buttons as just act like labels.


My code is as below

protected void Page_Init(object sender, EventArgs e)
{
//Initiate the counter of dynamically added controls


int count = 10;

for (int i = 1; i <= count; i++)
{
btnDyn = new Button();
btnDyn.ID = "btnDyn" + i.ToString();
btnDyn.Text = "btnDyn" + i.ToString();
btnDyn.Width = 80;
btnDyn.Height = 80;
btnDyn.Style.Add("margin-top", "1px");

btnDyn.Click += new EventHandler(Button_Click);
this.products_holder.Controls.Add(btnDyn);

this.wrapper_center.Controls.Add(products_holder);

this.tbl_row.Controls.Add(shadow_left);
this.tbl_row.Controls.Add(wrapper_center);
this.tbl_row.Controls.Add(shadow_right);

this.tbl_container.Controls.Add(tbl_row);
this.main.Controls.Add(tbl_container);
this.one.Controls.Add(main);
this.wrapper.Controls.Add(one);



this.form1.Controls.Add(wrapper);
}
}


Please Note: Expected.png file is the expected result i want... and Actual.png is what it is currently showing...

Any suggestion would be greatly appreciated.

Thanks
Arvin

keakTheGEEK, on 10 February 2011 - 06:05 PM, said:

@mb2000inc,

That looks perfectly doable to me. Have you tried it yet? You want to make sure that you set the runat="server" attribute on your div element if you want to manipulate it in your behind code:

<div runat="server" id="DivThing">

</div>

You have .InnerHtml and .InnerText properties to work with, along with a ton of other properties and methods. Essentially, when you give an HTML element the runat="server" attribute, it will then inherit all the properties, functions, etc from the base HtmlControl class of the System.Web.UI.HtmlControls Namespace. There are a ton of Html Controls in that namespace to work with.

In fact, you can create additional controls that you want, manipulate them and then add them to your div (rather then typing the markup in a string and setting it to the .InnerHtml property). So for example, you mentioned that you would like to add images into your div. Well, you could essentially do something like this in your code behind:

HtmlImage img = new HtmlImage();
img.ID = "myImage";
img.Src = "~/images/image.gif";
img.Alt = "An image";
img.Attributes.Add("class", "cssimage");

DivThing.Controls.Add(img);
this.Controls.Add(DivThing);

Hope this helps ya.
Happy Coding

Attached image(s)

• 
• 

[Nakor]

just a few things to add. There is no need to use a div with a runat="server, there is already a control that creates a div called the Panel control, (<asp:Panel ID="Panel1" runat="server"></asp:Panel>). To add a control to it you do it just like adding a control to most any other control, use Controls.Add(control). To create custom html to add in you use a LiteralControl and use it's Text property to define the custom html.