I want to insert html with a few controls +style from the code behind ( asp.net c#) how can I do it ?
You could use a <asp:PlaceHolder> then add controls to this.
e.g.
Image img = new Image();
img.ImageUrl = "/someurl.jpg";
img.CssClass = "someclass";
img.ID = "someid";
img.AlternateText = "alttext"
PlageHolderId.Controls.Add(img);
This would produce the html
<img src="/someurl.jpg" class="someclass" id="someid" alt="alttext" />
You can then do this will any control, literal, hyperlink, button, table, etc...
You can add <asp:Literal> controls in the markup, then set their Texts in code-behind.
Make sure to set Mode="PassThrough" to prevent them from escaping the HTML.
You can add server-side controls by adding them to the Controls collection of any existing control (such as an <asp:Panel>)
Add a few <asp:PlaceHolder>'s to your template file in the <head> and <body>
Then use PlaceHolder1.Controls.Add();
I put a <asp:Panel ID="myPanel" runat="server"/> , and in the codebehind i add controls with:
myPanel.Controls.Add(...)
If you want to insert HTML code direct to the panel, use
myPanel.Controls.Add(new LiteralControl("Your HTML goes here!"))
Instead of Literal control you can use either HtmlGenericControl
HtmlGenericControl div = new HtmlGenericControl();
div.ID = "div";
div.TagName = "div";
div.Attributes["class"] = "container";
form1.Controls.Add(div);
Related
I'm looking for a JavaScript-free way to dynamically add div elements inside a certain element of an aspx web page according to data passed to i.
I'm looking for something similar to razor c# where you can even create loops and write c# code that directly effects the content of the page.
It appears that razor c# doesn't work unless the page is a .cshtml page, so I'm kinda lost here since I don't want to use JavaScript.
Is there a better approach to it?
Say, below is the placeholder div
<div id = "maindiv">
<asp:PlaceHolder ID ="maindivs" runat="server">
</asp:PlaceHolder>
</div>
Then you may add divs to your placeholder div like below
protected void addmainDiv(int m)
{
for(int i = 0; i< m; i++)
{
System.Web.UI.HtmlControls.HtmlGenericControl newdivs = new System.Web.UI.HtmlControls.HtmlGenericControl("DIV");
newdivs.Attributes.Add("class", "maindivs");
newdivs.ID = "createDiv";
newdivs.InnerHtml = " I'm a div, from code behind ";
maindivs.Controls.Add(newdivs);
}
}
If you want to create HTML dynamically in .aspx then you can create your html code in your .cs (backend file)
string htmlAsStringToShow = "<div>" + variable + "</div>";
Then show its content in your .aspx page like this :
<%= htmlAsStringToShow %>
I use asp.net 4.5 in my project.
I try to add control in code behind bu I get error.
Here is my HTML code from view:
<div class="row" id="_FooterPanel" runat="server"></div>
Here is my code behind:
public void FooterPanelInit()
{
var myFooterTemplate = new TemplateField();
var viewFooter = new ViewFooterTemplate();
var editFooter = new EditFooterTemplate();
myFooterTemplate.ItemTemplate = viewFooter;
myFooterTemplate.EditItemTemplate = editFooter;
_FooterPanel.Controls.Add(myFooterTemplate);
}
In code above I try to add to div with id="_FooterPanel" the TemplateField.
But in this row:
_FooterPanel.Controls.Add(myFooterTemplate);
I get this error:
cannot convert from 'System.Web.UI.WebControls.TemplateField' to 'System.Web.UI.Control'
My question is how can I add TemplateField to div with id="_FooterPanel"?
TemplateField is databound control of type 'System.Web.UI.WebControls.TemplateField' but div control can have collection of controls of type System.Web.UI.Control
so you may use repeater control instead of div with runat='server'
or use your custom user control
How to Add a Div and text inside a div in .aspx file using C#.
I want to add a textbox for typing comment or query and a button to post that text/query.
to the server.
After redirect that page should get data from DB and Show on that page.
same as(all Forms)
like stackoverflow, we type Question, and submit it, can show it
Taken from code project site - To create a div inside a div (By the way it works if you are using asp.net)
System.Web.UI.HtmlControls.HtmlGenericControl Panel = new System.Web.UI.HtmlControls.HtmlGenericControl("DIV");
Panel.ID = "panel1";
Panel.Style.Add(HtmlTextWriterStyle.BackgroundColor, "White");
Panel.Style.Add(HtmlTextWriterStyle.Height, "680px");
Panel.Style.Add(HtmlTextWriterStyle.Width, "660px");
Panel.Style.Add(HtmlTextWriterStyle.BorderColor, "Black");
Panel.Style.Add(HtmlTextWriterStyle.BorderStyle, "Groove");
Panel.Style.Add(HtmlTextWriterStyle.BorderWidth, "2px");
System.Web.UI.HtmlControls.HtmlGenericControl div = new System.Web.UI.HtmlControls.HtmlGenericControl("DIV");
div.ID = "panel12";
div.Style.Add(HtmlTextWriterStyle.BackgroundColor, "White");
div.Style.Add(HtmlTextWriterStyle.Height, "70px");
div.Style.Add(HtmlTextWriterStyle.Width, "60px");
div.Style.Add(HtmlTextWriterStyle.BorderColor, "Black");
div.Style.Add(HtmlTextWriterStyle.BorderStyle, "Groove");
div.Style.Add(HtmlTextWriterStyle.BorderWidth, "2px");
this.Controls.Add(Panel);
Panel.Controls.Add(div);
I need to move this new button into this DIV that already exists. This seems to me like it should work but doesn't. What am I doing wrong?
Button button5 = new Button();
button5.Text = "Five";
button5.CssClass = "buttonCSS";
button5.Click += new EventHandler(button5_Click);
button5.ID = "button5";
this.Controls.Add(button5);
string myscript = #"
var navFooter = document.getElementById('NavFooter');
var button5 = document.getElementById('button5');
navFooter.Controls.Add(button5);
";
Page.ClientScript.RegisterStartupScript(this.GetType(), "MyScript", myscript, true);
I know the two objects are being found. Any ideas?
(Note: I cannot use jQuery.)
Thank you.
Controls.Add() is C#, not JavaScript. To append an element to another element with JavaScript, use appendChild():
navFooter.appendChild(button5);
Why are you doing this through javascript?
If you change the containing <div> to a <asp:Panel>, then you can add the newly created button straight into this panel. The <asp:Panel> is rendered simply as a <div> html element, and you can add the CssClass to this to keep the styles the same.
Gives you overall greater control on the server side and you don't need to worry about the javascript. Especially since you are doing server side work anyway.
Just add runat="server" to the div, and add it in the code behind:
<div id="dvButtonContainer" runat="server" ... >
Another option is to use a Panel, as it outputs a div anyway:
<asp:Panel ID="dvButtonContainer" runat="server" ... >
And in the code behind:
Button button = new Button();
dvButtonContainer.Controls.Add(button);
EDIT: Since DIV is not accessible, here is a workaround:
Button Button1 = new Button();
Page.ClientScript.RegisterStartupScript(this.GetType(), "MyScript", String.Format("document.getElementById(\"div1\").appendChild({0});", Button1.UniqueID), true);
Is there a way I can make a div runat server? So i can turn it into a control? In asp.net?
EDIt:
IF so how can I tell my code below to make div ID=test runat server?
while (reader.Read())
{
System.Web.UI.HtmlControls.HtmlGenericControl div = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
div.Attributes["class"] = "test";
//div.Style["float"] = "left";
div.ID = "test";
Image img = new Image();
img.ImageUrl = String.Format("{0}", reader.GetString(1));
// this line needs to be represented in sql syntax
//img.ImageUrl = "~/userdata/2/uploadedimage/batman-for-facebook.jpg";
img.AlternateText = "Test image";
div.Controls.Add(img);
div.Controls.Add(ParseControl(String.Format("   "+"{0}", reader.GetString(0))));
div.Style["clear"] = "both";
test1.Controls.Add(div);
}
Yes
<div runat="server"></div>
will make it a server side control. You can generate it in the code behind using
var myDiv = new HtmlGenericControl("div");
Edit: What you're generating is a server side control, there is no need to add runat="server".
Edit per comment:
<div onclick="alert('hello')" runat="server"></div>
or
var myDiv = new HtmlGenericControl("div");
myDiv.Attributes.Add("onclick", "alert('hello');");
You can make a div runat="server", give it an id and the reference it from C# if that's what you're after. However, why not just use an asp:panel, they do the same job essentially and the panel renders a div out in most scenarios
asp:Panel is a DIV when it gets rendered
it is definitely not be the most elegant solution, but adding a literal control and build up your div from code will do the trick.
ASPX code
<div id="alert" runat="server" style="float: left">
</div>
C# code
alert.InnerHtml= ANY HTML CODE ;