I have bunch of HTML code I am using to make rounded edge boxes on my controls. Is there a way to take this code and turn it into some kind of control or something so I do not have to keep pasting 10 lines of HTML code around everything I do?
<div id="BottomBody">
<div class="box1024" >
<div class="content1024">
<div class="top1024"></div>
<h1>My Header Information</h1>
<hr />
<p>Some text for everyone!</p>
</div>
<div class="bottom1024">
<div></div>
</div>
</div>
</div>
One additional thing to note, the number HTML tags used inside the inner most DIV will change depending on where I use it in my site. So in some cases I will only have 1 tag and 1 tag but in other cases I could have 1 tag, 1 tag, 3 tags, and a HTML table. How can I make that work?
Yes, you're thinking of a UserControl. Extract the relevant HTML out, paste it into a UserControl .ascx template.
Now in your case, you'll probably want the text to be customizable, am I right? So you'll need to replace the <h1> through </p> bit with an ASP.NET label. The resulting .ascx HTML (not counting the #Control directive) will look something like:
<div id="BottomBody">
<div class="box1024" >
<div class="content1024">
<div class="top1024"></div>
<asp:Label runat="Server" id="label1" />
</div>
<div class="bottom1024">
<div></div>
</div>
</div>
</div>
Alternatively, you could do two labels -- one for the header, one for the main text. Or even just have the header be runat="Server" itself.
Next, you'll write a little bit of code in the .ascx code-behind file to expose the label's (or labels', as the case may be) Text property. This would probably look something like:
public string Text
{
get { return label1.Text; }
set { label1.Text = value; }
}
If you're in an ASP.NET MVC world, use your Model data instead of a label, and pass in the desired display text string as the model data.
Edit
Addressing the update to the question:
One additional thing to note, the
number HTML tags used inside the inner
most DIV will change depending on
where I use it in my site. So in some
cases I will only have 1 tag and 1
tag but in other cases I could have 1
tag, 1
tag, 3 tags, and a HTML table. How can
I make that work?
The exact same technique, assuming that the content you're referring to is what's within <div class="content1024">. The Text property of a label can contain any desired arbitrary HTML, and of course you can pass any arbitrary amount of HTML as a string to the Model if you're using MVC.
Another left field approach - create a user control but use jQuery to round the corners for you:
<div class="roundcorner">
<h1>My Header Information</h1>
<hr />
<asp:Label runat="Server" id="label1" />
</div>
Issue the following in javascript:
$(document).ready(function(){
$('div.roundedcorner').corner();
});
This eliminates all your extra div's and you can still have a user control that you use at will on the server.
(I know I'm going to get in trouble for this from someone)
If its just static content you can just put it in a separate file and INCLUDE it
<!--#INCLUDE VIRTUAL="/_includes/i_yourfile.htm" -->
(File name, extension and location are arbitrary)
Related
I am using <asp:ScriptManager> and link in master page which require <Form> tag but issue is here that i have included already <form> tags in all the child content pages.
I know i just need to include <form> tag just in master page and remove from all child pages but unfortunately its not possible because there are so many content child pages which connected to this master page and also each child <form> tags contains different classes like horizental inline etc.
So i just want that i just want to include <form> tag only in master page if form tag not exist in content/child page.
If i use both in master and child/content, its showing error, its must 1 form tag.
Master page
<form id="Form2" runat="server" novalidate="" role="form" runat="server" class="form-horizontal">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<h3>Session Idle: <span id="secondsIdle"></span> seconds.</h3>
<asp:LinkButton ID="lnkFake" runat="server" />
<cc1:modalpopupextender id="mpeTimeout" behaviorid="mpeTimeout"
runat="server" popupcontrolid="pnlPopup" targetcontrolid="lnkFake"
okcontrolid="btnYes" cancelcontrolid="btnNo"
backgroundcssclass="modalBackground" onokscript="ResetSession()">
</cc1:modalpopupextender>
<asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup" Style="display: none">
<div class="header">
Session Expiring!
</div>
<div class="body">
Your Session will expire in <span id="seconds"></span> seconds.<br />
Do you want to reset?
</div>
<div class="footer" align="right">
<asp:Button ID="btnYes" runat="server" Text="Yes" CssClass="yes" />
<asp:Button ID="btnNo" runat="server" Text="No" CssClass="no" />
</div>
</asp:Panel>
<asp:ContentPlaceHolder ID="body" runat="server">
</asp:ContentPlaceHolder>
</form>
I just want to use form tag only if not in child page. how can i tackle this situation,
Thanks,
As far as I know, the ASP.NET WebForms do not support multiple form elements with runat="server" attribute. So, there is no work around to this as it is something hard coded into the project.
Anyhow, if there are suppose a thousand child pages that also have form element with runat="server" attribute, and you are too lazy to replace all of them one by one, Then you can use Visual Studio's text replacing feature and can change the form element to a div element. For that you just need to press Ctrl + H which will open a little window on top right corner asking for the text that you want to replace and another text that you want to have instead of that. See:
Notice in the screenshot I have shared, I am selecting Current Project from the drop down menu. This will search and replace every text with <form to <div in the project.
And once it has replaced all the tags starting with <form to <div then you can modify the closing text of the form tag by replacing </form with </div. Now you only have left one page.
Now, there is only the MasterPage left that you can replace back the div to form. So, this way you are manually changing only one page.
You need to click the second button that will replace all the values. There are other options to handle the find and replace that you can use as well. But, unfortunately, you cannot have multiple form tags with runat="server" attributes on it.
PS
It won't cause problem with the designs that you have and classes such as horizontal inline will be applied to those divs instead of forms and will be rendered same as the forms were being rendered on the UI.
It is always a good approach to take a backup before modifying things in bulk or changing something that is crucial and could cause a lot mess.
how are you guys?
i have asp.net webform its for adding news in the news content i would like to use summernote http://summernote.org/ Super Simple WYSIWYG editor. as a WYSIWYG editor so could some one please help me to save the data from this editor
this is my code
<div class="form-body">
<div class="form-group last">
<label class="control-label col-md-2">News Content</label>
<div class="col-md-10">
<div name="summernote" id="summernote_1"> </div>
<asp:label runat="server" text="Label" ID="news_con" ></asp:label>
</div>
</div>
</div>
i can't get the text value from the summernote
by this code
news_con.Text = Request.Form["summernote_1"];
Have you considered using a <textarea> to handle this as opposed to a <div>? Usually they are a bit easier to use with respect to storing values (as they are designed to do so) :
<textarea id="txtTest" runat="server"></textarea>
One of the ways that you might handle this would be to register an event using Summernote's available API to set the HTML content for your <textarea> element whenever focus was lost (e.g. the onblur) :
<script>
$(function () {
// Set up your summernote instance
$("#txtTest").summernote();
// When the summernote instance loses focus, update the content of your <textarea>
$("#txtTest").on('summernote.blur', function () {
$('#txtTest').html($('#txtTest').summernote('code'));
});
});
</script>
Since you are likely going to be storing HTML content within the element, you'll likely want to ensure that .NET doesn't think you are trying to exploit it. You can do this by either explicitly setting this page to ignore that process by updating the ValidateRequest property of your page :
<%# Page ... ValidateRequest = "false" %>
Or you could try simply escaping the content that is being set :
$('#txtTest').html(escape($('#txtTest').summernote('code')));
I have div control which runs on server
<div id="report" runat="server" ></div>
I'm appending some content to the above div using jquery at run time. Now i want to access the innerHtml of the above div.
example:
<div id="report" runat="server" >
<div class="someclass">some Text1</div>
<div class="someclass">some Text2</div>
<div class="someclass">some Text3</div>
</div>
expected output is(following HTML in a string format):
<div class="someclass">some Text1</div>
<div class="someclass">some Text2</div>
<div class="someclass">some Text3</div>
so far i tried the following two methods but no luck
ContentPlaceHolder myContent = (ContentPlaceHolder)this.Master.FindControl("contentPlaceHolder");
Control cc= myContent.FindControl("report");
and
string HTMLString=report.InnerHtml;
Form input elements inside a form element posted to server.
All other content is static and not posted to server.
It's fundamental rule of HTTP, you can see details from here.
So you cannot get the report.InnerHtml.
You have two option, while preparing your div's content, write the same content inside a hidden field. And at server side get the hidden field's value.
<input type="hidden" id="hdnDivContents" runat="server">
and set the value using jquery or javascript.
$('#<% hdnDivContents.ClientID %>').val($("#<% report.ClientID %>").val());
and get the value in code behind
string HTMLString=hdnDivContents.Value;
Or make an AJAX call while preparing your content to get it at server side.
The following is the record which I am getting from the database:
"Dear:Thank you for applying to school. We have received your application to the program.As of today,we have received the following for your application:"
I am trying to put the above value into a label. My label looks like the following:
<div id="secondd" style="float:left;width:50%;background-color:#C0D5F2;">
<asp:Label id="valueIntroduction" Cssclass="labelarea" runat="server"> </asp:Label>
<div class="line"></div>
My problem is value is not getting fitted into the label. How to make it as a multi line label?
Here is the HTML that contains this div:
<div id="first" style="float:left;width:50%;background-color:#C0D5F2">
<div id="second" style="float:left;width:50%;background-color:#C0D5F2">
<div id="Introduction" style="float:left;width:100%" class="wote">
Introduction:
</div>
<div class="line"></div>
</div>
<div id="secondd" style="float:left;width:50%;background-color:#C0D5F2;">
<asp:Literal id="valueIntroduction" runat="server"> </asp:Literal>
<div class="line"></div>
</div>
If you want the text to wrap based on the in-line style of your outer <div>, you can change the <asp:label> to an <asp:literal> and use CSS to style the outer <div>.
The difference is that a Literal does not render any HTML markup, whereas a Label will be wrapped in a element. The Literal just inserts the exact text you have, letting your existing HTML and CSS do the styling.
An example of a different style would be:
Less percentage, note 20% instead of 50% for the width attribute:
<div id="secondd" style="float:left;width:20%;background-color:#C0D5F2;">
Or, use a dedicated value of pixels (denoted by the px)
<div id="secondd" style="float:left;width:150px;background-color:#C0D5F2;">
You can even indent the text, using text-indent. I suggest to google some basic CSS and just try different things out, it is the best way to learn.
You just have to play with it to see how it fits in your webpage. Once you get the hang of it, note for future reference that you can use style sheets for this stuff which will make your code cleaner and allow you to create reusable, easily editable styles for your application.
I am displaying my 'news' page and I want the customer to be able to output some simple html.
My view looks like this:
#using SuburbanCustPortal.SuburbanService
<br />
#foreach (var item in (IEnumerable<TokenNews>) ViewBag.News)
{
<div class="fulldiv">
<fieldset>
<legend>#item.Title</legend>
<div>
#item.Body
</div>
</fieldset>
</div>
}
When I do it this away, the html isn't being rendered by the browser, it's just showing the html as text.
Any way that I can output the html where the browser will render it?
You didn't exactly specify what part is being shown as text, but if it's item.Body, do #Html.Raw(item.Body) instead. That turns a string into an IHtmlString, whose purpose is to tell Razor that this thing is guaranteed to be safe to output as-is, and will not contain nasties like XSS attacks (ensuring this when using Html.Raw is your job). Everything that is not an IHtmlString will be escaped automatically by Razor.