I'm trying to add several <img> tags to my html document from asp.net codebehind. I looked at Adding Html from Code Behind in Asp.net and it seems to be the solution, but I'm not sure how divcontrol.Controls.Add determines where exactly it's going to start adding html. For all I know, it's at the end of the html. I also found Write Html Markup from code behind in asp.net, but I'm not certain how to use it either.
So here's the html that I'm using. How can I add the img tag I have also included?:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Gallery</title>
<script type='text/javascript' src='/jquery-11.0.min.js'></script>
<script type='text/javascript' src='theme-tiles.js'></script>
</head>
<body>
<form id="form1" runat="server">
<h2>Tiles - Justified</h2>
<div id="gallery" style="display:none;">
</div>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#gallery").gallery({
tiles_type: "justified"
});
});
</script>
</form>
</body>
</html>
This is the <img> tag that I need to add between the <div id="gallery"> tag:
<img alt="img1"
src="images/thumbs/tile1.jpg"
data-image="images/big/tile1.jpg"
style="display:none"/>
</a>
This is the code I would use to add the html:
HtmlGenericControl divcontrol = new HtmlGenericControl();
divcontrol.Attributes["class"] = "sxro sx1co";
divcontrol.TagName = "div";
pnlUserSearch.Controls.Add(divcontrol);
Label question = new Label();
divcontrol.Controls.Add(question); // add to the new div, not to the panel
If you're creating client-side HTML (not server controls) then you can just create a Literal, like this:
<div id="gallery" style="display:none;">
<asp:Literal runat="server" ID="MyLiteral" />
</div>
Then, in your code-behind, set
MyLiteral.Text = "<whatever html you want>"
I'm answering your question literally (no pun intended.) There may be better/other ways to accomplish the end goal. Mixing "normal" client HTML with webforms can get a little messy. Webforms wants you to do everything its way.
It might make more sense if your container div (gallery) is a server control instead. If you're looking to add multiple images then perhaps what you need is a Repeater.
To be really honest, if you're not too far down the development path it might be best to take a look at ASP.NET MVC instead.
Another approach:
Just add your image itself as a server control directly in the markup.
<div id="gallery" style="display:none;">
<img runat="server" ID="MyImage" Visible="False"/>
</div>
In your code-behind if you want to display it,
MyImage.Src = "/image url";
MyImage.Visible = true;
Related
i want to convert my html file to pdf in that process i took all html tags and elements into an asp textfield on button click its giving the above error
code is
code.aspx
<asp:TextBox ID="TxtHtmlCode" CausesValidation="false" runat="server" Width="90%" Text="" TextMode="MultiLine" Height="150px"></asp:TextBox>
<asp:Button ID="BtnCreatePdf" runat="server" Text="Create PDF" OnClick="BtnCreatePdf_Click" CssClass="mybutton" />
code.aspx.cs
protected void BtnCreatePdf_Click(object sender, EventArgs e)
{
htmlString = TxtHtmlCode.Text;
HtmlToPdf converter = new HtmlToPdf();
PdfDocument doc = converter.ConvertHtmlString(htmlString);
doc.Save(Response, false, "Sample.pdf");
doc.Close();
}
i check with breakpoints even its not going to button click function.
please help me..
You want to use HTML editor like opensource ckeditor.
It'll basically encode and decode html elements when you post the page back to server.
<%# Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<CKEditor:CKEditorControl ID="CKEditor1" BasePath="/ckeditor/" runat="server">
</CKEditor:CKEditorControl>
<asp:Button ID="BtnCreatePdf" runat="server" Text="Create PDF"
OnClick="BtnCreatePdf_Click" CssClass="mybutton" />
</form>
</body>
</html>
FYI: I personally do not like to use validateRequest="false"; it'll end up creating security hole.
Inside of your web.config you'll want to do:
<HttpRuntime requestValidationMode="2.0" />
Your other option, is to also append to your page directive at the top of your .aspx and apply:
<#Page ... validateRequest="false" %>
Keep in mind, by adding to web.config it will affect your entire site, compared to the page directive. However, by adding this to your application, you obviate some built in security that Microsoft utilizes in the Web-Forms Framework.
I am making an asp website with bootstrap. I am wondering how do I make all asp button widths the same instead of padding the text with spaces. I created an alternate css file and used the css class tag. am i missing something?
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="admin.aspx.cs" Inherits="SCBA.admin" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Admin</title>
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="stylesheet3.css"/>
<style>
.box {
border:1px solid grey;
background-color:#d3d3d3;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<script src="../Scripts/jquery.min.js"></script>
<script src="../Scripts/boostrap.min.js"></script>
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<asp:Button ID="Button2" runat="server" onclick="Button2_Click" Text="Administration" /> <br />
<asp:Button ID="Button3" runat="server" cssClass="button1" onclick="Button3_Click" Text="Resource" />
</div>
</div>
</div>
</form>
</body>
</html>
Here is my CSS
.button1
{
width: 200px;
}
Depending on which browser you are using, learn to use the browser tools so you can inspect the HTML and CSS elements yourself.
Here are some steps to get you in the right direction:
Look at the Bootstrap documentation for the button classes then override the relevant Bootstrap CSS class in your custom style sheet to change its appearance. Also, do NOT use fixed widths in responsive sites, use percentages. It looks like you are not leveraging the Bootstrap classes at all for this
.NameOfBootstrapButtonClass
{
width: 25%;
}
Move your script links to just before the closing body tag
Remove all inline CSS and CSS links - then from Solution Explorer drag the CSS files you need into the head section of your ASP page. This guarantees your links are correct but only applies if you are using VS
Do not use minified CSS files in development - when deploying you will have all your min versions bundled up for performance. Personally, I comment out much of the bundling in the RegisterBundles method of the BundleConfig class when working locally
If you're building a site you are going to have a lot of redundancy without the judicious use of master pages and user controls
You have no viewport tag in the head so your site will not be responsive in any mobile browser
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If you are supporting IE9 and IE8, you need to reference the Modernizr library. You need to give some thought to which browsers you need to support
Remove the xmlns namespace attribute from the html tag
I have a user control called header.aspx. In my user control if I do this it will work.
<script type="text/javascript">
function greeting(){
Alert("hi");
}
</script>
<asp:button id="button1" OnClientClick="greeting" /> </asp:button>
I am using this user control in a page called default.aspx. I tried using src="~scripts/foo.js". If I do that it does not work. The question is pretty simple I guess. How would I call a java script function in a user control which is stored in an external location( not in the page. Located in the scripts folder). Thanks in advance.
As I can understand this is clearly a path issue.
Just follow these steps might help you.
Create a .js file first. Put your code and save it in the folder you want it to.
Now Drag and Drop the js file inside the head section of your html code from the Solution Explorer window. This will give you the correct path for the js file.
The above steps is what I follow, when I create an external js file for my controls.
Also make sure you call your function in this manner also suggested by others Else your function won't get call:
<asp:button id="button1" OnClientClick="greeting();" /> </asp:button>
Just use the code below:
<script src="<%: ResolveUrl("~/Scripts/foo.js") %>"></script>
Script: test.js
function greeting() {
alert("hi");
return false;
}
user control: <asp:Button ID="button1" OnClientClick="return greeting()" runat="server" Text="click" />
Page:
<head runat="server">
<title></title>
<script src="test.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:temp ID="temp" runat="server" />
</div>
</form>
</body>
</html>
This should work now.
<asp:button id="button1" OnClick=" javascript : greeting();" /> </asp:button>
try to use it. havent trie but i think it should work.
First of all you need to create a seprate javascript file and then add this in your page in this way. add this tag in the tag of your page.
use
OnClientClick="greeting()"
you missed "()" in OnClientClick="greeting"
Please see the whole html code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="scripts/foo.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:button id="button1" runat="server" OnClientClick="greeting()" Text="hit" />
</div>
</form>
</body>
</html>
Thanks.
External javascript file reference:
<script src="yourpath/yourfilename.js"></script>
Button Control
<asp:Button ID="button1" OnClientClick="greeting();" runat="server" Text="click" />
Does anyone have any samples of injecting a HTML snippet just after the open BODY tag in an ASP.Net webforms page? The positioning of this code is very specific.
The beginning HTML might look like this:
</head>
<body>
<div id="header">
The resulting HTML should look like this:
</head>
<body>
<div id="new-div"></div>
<div id="header">
This is a scenario where the HTML cannot be manipulated directly, and javascript would do this too late for the additional HTML to be useful. It must be done with server-side code and in place before the HTML makes it to the web browser.
You can do it this way in your aspx markup:
<html>
<head>
</head>
<body>
<%= FunctionTheOutputsString() %>
The <%= is short for Response.Write(), which is a function that writes directly into the page.
With jQuery, you can use prepend() as so:
$(function(){
$('body').prepend('<div id="new-div">Div content</div>');
});
jsfiddle here.
Update: The server-side solution could also be (besides above answer):
<html>
<head>
</head>
<body>
<asp:placeholder id="divPlaceHolder" Visible="False" runat="server">
<div id="new-div">
</div>
</asp:placeHolder>
On Page_Load()...
if(SomeCondition)
divPlaceHolder.Visible=true;
And because non-visible elements aren't rendered, the new-div element will only be displayed if SomeCondition is true
I have a panel. in that panel there is one text box for some input and another one for taking date from calendar control. I have put calendar control below the second text box(i.e. txtDate), but I don't want it to be displayed when the page is loaded, instead I want a small image of calendar and on clicking that image a calendar should pop up and selected date must be captured by txtdate textbox.
Please help me with .aspx and .cs file. I'm using asp.net with C#.
Use AJAX Calender Extender. Here is the Sample Markup Code:
<asp:CalendarExtender ID="ControlIDHere" runat="server" Enabled="True"
TargetControlID="TextBoxIDHere" PopupButtonID="CalenderImageIDHere" Format="MM/dd/yyyy">
</asp:CalendarExtender>
An ASP.NET based solution for calender control is best explained here
But I would suggest you to go forward with Ajax based solution
Ajax Calender
Calender control in AJax toolkit
You can user use Jquery library in your project. Below is the example
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js">
</script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">
</script>
<script >
$(document).ready( function() {
$("[id=^datepicker]").datepicker();
} );
</script>
</head>
<body>
<form id="form1" runat="server">
<p>Date: <asp:TextBox id="datepicker" runat="server">
</p>
</form>
</body>
</html>