I am working on a asp.net website (web forms and mvc) where asp:Literal is used in a few pages.
I needed to change the content of one page to add a simple title attribute to the existing tag.
So i need the rendered result to be:
<a href="test.jpg"
title="title here"
id="testimage"
rel="hint-text: CLICK TO ZOOM"
style="position: relative; display: inline-block">image goes here</a>
But after rendering, it looks like that:
<a href="test.jpg"
title id="testimage"
rel="hint-text: CLICK TO ZOOM"
style="position: relative; display: inline-block">image goes here</a>
At first i thought it could be something to do with the controls Mode property, but even if i change the Mode to PassThrough it still does not render the value of the tittle attribute.
EDIT: The code for the literal is as folows:
LiteralControl.Text = "<a href='test.jpg' title='title here' id='testimage' rel='hint-text: CLICK TO ZOOM' style='position: relative; display: inline-block'>image goes here</a>"
Does any of you guys have this problem and happens to know the solution?
Related
First off , I am new to MVC. I have a view which has the following line of code:
<span id="loginerror" style="border-color:red;"> #Html.ValidationMessage("UserName") </span>
This works fine except that it adds a span within my loginerror instead of just displaying the error within loginerror . I am aware that I can also add css through html helper but I would like to do it in this way if possible. I just want to get the value of ValidationMessage without having to change a lot of code.
The #Html.ValidationMessage() helper outputs a <span> element, which assuming the property is valid is
<span class="field-validation-valid" data-valmsg-for="xxx" data-valmsg-replace="true"></span>
and if the property is invalid
<span class="field-validation-error" data-valmsg-for="xxx" data-valmsg-replace="true">Error message</span>
For client side validation, the jquery.validate.js and jquery.validate.unobtrusive.js files add an inner span for the error message which is
<span class="field-validation-error" data-valmsg-for="xxx" data-valmsg-replace="true">
<span for="xxx" generated="true" class="">Error message</span>
</span>
In order to change this behavior, you would need to create your own HtmlHelper extension method for the outer <span> element or use MVC-5 which has overloads that allow you to add a parameter specifying the tag.
However, for the inner span element generated by client side validation, you would need to modify the jquery.validate.unobtrusive.js file and it should be obvious that this is not something you would want to do.
Instead you can just create your own css file to style the default span elements, for example
field-validation-error {
display: inline-block;
border: solid 1px red;
color: green;
margin: 10px;
}
I hope that someone can help me with issue.
In a DNN custom module that I'm creating, I have a RadButton that doesn't show the Text value from the resource file. Other controls do read the values from the resource file.
I tried from the ascx and from the code behind. Another strange thing is that when debugging the application from the code behind I see the Text attribute.
the control definition is:
<dnn:dnnRadButton ID="CntUsSubmit" runat="server" OnClick="ProcessSendMail" resourcekey="CntUsSend"
SingleClick="true" SingleClickText="Submitting..." Style="clear: both; float: left; margin: 10px 0;" ></dnn:dnnRadButton>
inse Page_Load I make the localization (too):
CntUsSubmit.Text = Localization.GetString( "CntUsSend.Text", LocalResourceFile );
the page is rendered as:
<span id="dnn_ctr474_View_CntUsSubmit" class="RadButton RadButton_Default rbSkinnedButton"
style="clear: both; float: left; margin: 10px 0;">
<input class="rbDecorated" type="button" name="dnn$ctr474$View$CntUsSubmit_input"
id="dnn_ctr474_View_CntUsSubmit_input" value="" />
<input id="dnn_ctr474_View_CntUsSubmit_ClientState"
name="dnn_ctr474_View_CntUsSubmit_ClientState" type="hidden" />
</span>
the Sys.Application.add_init function shows:
Sys.Application.add_init(function() {
$create(Telerik.Web.UI.RadButton, {"_accessKey":"","_postBackReference":"WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions('dnn$ctr474$View$CntUsSubmit', '', true, '', '', false, true))","clientStateFieldID":"dnn_ctr474_View_CntUsSubmit_ClientState","iconData":{},"imageData":{},"singleClick":true,"singleClickText":"שולח...","toggleStatesData":[],"uniqueGroupName":"","uniqueID":"dnn$ctr474$View$CntUsSubmit","value":"שלח"}, null, null, $get("dnn_ctr474_View_CntUsSubmit"));
});
I understand the control knows the Text from the add_init, but the rendered button doesn't get the it. Can someone help me how to solve this?
I'm using DNN 7.0.2, VS 2012, for Framework 4.0
That's odd. You could try the following in its OnClientLoad event:
function OnClientLoad(sender, args)
{
sender.set_text(sender.get_text());
}
Try alerting the get_text() first to see if it retursn what you need. If so, you can put this in a global JS file and add the event handler through a Theme.
If this doesn't help try putting the desired text in a hidden field (e.g. with a unique class) and again use the set_text() method.
In the end I gave up with RadButton, instad I used Encosia's Postback Ritalin which made the trick nice and smoothly.
I'm using the toggle button from the Ajax Control Toolkit.
On my page I want the following layout (all on the one line):
Toggle Button | Text Box | Button | Button | Toggle Button
Problem
At the moment I have this layout:
Toggle Button | Text Box | Button | Button |
ToggleButton
Code for toggle button
<asp:CheckBox ID="CheckBoxToggleTips" runat="server" AutoPostBack="true"
OnCheckedChanged="CheckBoxToggleTips_CheckedChanged" />
<ajaxToolkit:ToggleButtonExtender ID="ToggleTips" runat="server"
TargetControlID="CheckBoxToggleTips"
ImageWidth="32"
ImageHeight="32"
CheckedImageAlternateText="Hide Tips"
UncheckedImageAlternateText="Show Tips"
UncheckedImageUrl="~/Images/lightbulboff.png"
CheckedImageUrl="~/Images/lightbulbon.png" />
HTML Expection
<div class="title">
<span id="mainContentPlaceHolder_LabelDepartment">A&H</span> Risks<br>
<div style="position: relative;">
<a id="mainContentPlaceHolder_CheckBoxToggleTips_ToggleButton" href="" style="position: absolute;
left: 0px; top: 0px; width: 32px; height: 32px; font-size: 32px;
background-image:url(http://localhost:10833/Images/lightbulboff.png);
background-repeat: no-repeat no-repeat;" title="Show Tips">
</a>
</div>
</div>
The style attribute above is auto generated. So my question is how can I use my own styling instead of this? Or how can I edit the left and top values?
Thanks
There is no reason why the second ToggleButton should be in the second line if it has the same css as the first one. I would recommend using CssClass attribute and make sure it uses the same class as the first ToggleButton. You are most likely running out of width, so contain the whole thing in an outer DIV and set the width appropriately. Hope this helps.
It looks like a page layout problem: check for the missing closing tag </div>
Hope this will help.
Regards, Alex
Hey You can Resolve by CSS like that.
#mainContentPlaceHolder_LabelDepartment{
margin:0;
padding: 2px;
width: 223px;
float:left;
height:450px;
position: relative;
}
This Sample code you can made your own code to styling the toggle button
Hope It helps you.
StringBuilder str=new StringBuilder();
str.Append("<div style='font-style:oblique;font-size:24px;text-align:left;margin-bottom:25px;'>");
str.Append("Products");
str.Append("</div>");
str.Append("<div style='font-style:oblique;font-size:18px;text-align:right;margin-bottom:25px;'>");
str.Append("<asp:TextBox ID='txtSearch' runat='server'></asp:TextBox> <asp:Button ID='btbSearch' runat='server' Text='Search'/>");
str.Append("</div>");
str.Append("<table width='100%' border='1' cellpadding='0' cellspacing='0'>");
In the second <div>, I try to create a textbox and a button and add them in the placeholder. When I debug with browser console, I see them in html code but it cannot show in the browser, it just show the table on browser. Is there any example to work these cases?
<asp: tags are entirely server side tags. They will be translated by the ASP engine into plain HTML tags.
By writing those tags to the response directly you bypass the ASP engine's ability to refactor them into proper HTML. When the browser gets them it doesn't know how to render them, so it just ignores them.
You should be creating the controls as objects, rather than as strings, for example:
TextBox txtSearch = new TextBox();
txtSearch.ID= "txtSearch";
placeHolder1.Controls.Add(txtSearch);
Button btbSearch = new Button();
btbSearch.ID = "btbSearch";
btbSearch.Text = "Search";
placeHolder1.Controls.Add(btbSearch);
Or, better yet, you could place that text in a markup file rather than using the code behind.
Most likely you are not generating ASPX page to render on server, but rather sending output of your StringBuilder to the browser. Since asp:TextBox and similar ASP.Net elements can't be rendered by browser you see nothing in a view (also nodes are present as they don't make HTML completely invalid).
You want to generate <INPUT...> elements instead of asp:TextBox to see output in browser.
Note: there are likely better way to achieve your goal (i.e. client side templates, or regular rendering in the view), but you need to spell your actual problem first.
You can use code like this
var tableBody=""; // here you have to define the table body yourself
var form=
new {
method=#"get", // decide for your request method get/post
action=#"http://www.google.com" // the page processes the request
};
var html=#"
<div style='font-style: oblique; font-size: 24px; text-align: left; margin-bottom: 25px'>Products</div>
<div style='font-style: oblique; font-size: 18px; text-align: right; margin-bottom: 25px'>
<form method='"+form.method+#"' action='"+form.action+#"'>
<input id='txtSearch' name='txtSearch'>
<input type='button' id='btbSearch' text='Search' onclick='this.parentNode.submit();'>
</form>
</div>
<table width='100%' border='1' cellpadding='0' cellspacing='0'>"+tableBody+#"
</table>
";
The fixed part code of html is not necessarily consist with StringBuffer. If you want to generate the html dynamically, consider to use LINQ.
What should be done yourself are in the comments of the code. Notice that the txtSearch is not only given an id, but also name.
I have a div and inside that div I have my site logo etc...
I want that when the user clicks the site logo (my div) it will redirect him to the homepage.
How do I do it? (div onlick??)
<div onclick="window.location.href = '/';">...</div>
replace '/' with your URL or URI.
<div onclick="window.location='http://www.google.com';" style="cursor:pointer;">Content...</div>
Replace http://www.google.com with the relative path to your site's root. The style tag just switches the cursor to a pointer so user's know it's clickable.
<img src="logo" onclick="window.location('myHomePage');">
<div onclick="window.location('myHomePage');">stuff inside the div</div>
you can also change the window.location for a window.refresh(); if you want to refresh the page.
Will an anchor tag work for this (I don't know what your HTML is like, etc.). It will be more semantically correct and will not require javascript. I don't think there are any browsers that object to DIV elements inside A elements.
http://jsfiddle.net/4s87y/
<a href="http://www.google.com">
<div style="height: 100px; background-color: #ffcccc;">
This is a test. Woohoo!
</div>
</a>
one way is to use: onclick="function(){ location.href = 'http://www.yoursite.com'; }"
another one is to put the div with site logo inside an anchor tag like <div>sitelogo</div>
If you want it for OnClick then use it like this
<div OnClick="window.location=http://example.com">Your Content and Logo</div>