I am using the following:
<img src="../../Content/Images/lock_16.gif" />
#Html.ActionLink("Register",
"Register",
"Users",
null,
new { title = "Register your ID", rel = "nofollow"
})
What I would like is for the lock image to appear inside of the <a> </a> so it is clickable and not before it. I already use (and change color on hover) of a background image so its not possible for me to use the background-image property to display the image.
Can anyone think of a way that I can set the image so that it will show before the text and still be clickable. Hopefully I can find a way that still allows me to use the MVC Html.ActionLink.
Html helpers in ASP.NET MVC should be used when they simplify writing code, not always. Plain html would go way better in your case
<a href="#Url.Action("Register", "Users")" title="Register Your ID", rel="nofollow">
Register <img src="#Url.Content("~/Content/Images/lock_16.gif")" />
</a>
Note that link address is still generated dynamically, using UrlHelper.Action method. This way, you do not lose link dependency to your route configuration. Also, as Nicholas mentioned, image source should be generated via Url.Content helper.
You may use something like -
#Html.ActionLink("link Name", "Action Method", "Controller", new { style = "background-image:url('.././Images/imageName.png')" },null)
#Html.ActionLink("link Name", "Action Method", "Controller",
new { style = "background-image:url('.././Images/imageName.png')" },
null)
Related
I've been looking for the solution and I haven't find a way to get my head around it. So I hope you could give me some clues to achieve that.
Basically I need to change a value of a _Layout from its rendered PartialView. I use to do this using webforms .aspx master pages and FindControl method but I cannot find a solution to do this in MVC Razor engine.
My Layout page has an ActionLink and a div tag place-holder to display the partial-views, Now I need to know how to change the value of Text1 from the partial-view pages within the DIV tag:
Is JavaScript the only way that I can do this ?
<input id="Text1" type="text" />
<div>
#Ajax.ActionLink("Personal Info", "Personal", "Portal", new { area = "Resume" },
new AjaxOptions { UpdateTargetId = "result", HttpMethod = "Post",
InsertionMode = InsertionMode.Replace,
OnBegin = "blockUi",
OnSuccess = "onTabChanged(this, 'Personal Information')"
},
new { #class = "text-strong" })
</div>
<div id="result">#RenderBody()</div>
Appreciate your contributions in advance.
Javascript is the way this is handled I think.
You might be able to do some trickery with controllers and the ViewBag (like how the page title is set with the ViewBag in a default MVC project).
You could also maybe set it to some global variable or something, and have your partial view change that variable.
Both those solutions though would require a page reload.
But using javascript is probably the best, you could do it in the onTabChanged function.
<script>
function onTabChanged(param1, param2) {
var el = document.getElementById("Text1");
el.value = "Whatever you want here";
}
</script>
I think the easiest way is using a ViewBag that you play around with in your controller/view/partial view.
In WebForms you can use the FindControl method because a PostBack was made. So the entire page was rendered again.
In the example you posted, I assumed that the request made by Ajax.ActionLink that update the div result, returns a view that may use the same Layout, but is in another context so you don't have access to the same input text from the rendered page where Ajax.Action link was triggered.
So, if you have multiples Ajax.ActionLink that updates the <div id="result">, you need to handle the success method on onTabChanged, like #Kyle Gobel suggested.
I want to add tooltips to a form on my site. I am using the jQuery tools library. The tooltips show the content of the title attribute of an html input. Is there a way to make the asp.net textbox render out the title attribute in the html input it creates?
Since title is a global attribute, according to the W3C HTML language specifications, I would have expected a title property in the System.Web.UI.WebControls.WebControl.
However, Microsoft appears to have chosen a more 'appropriate' name for this property: Tooltip.
If you specify this property:
var label = new Label();
label.ToolTip = "tooltip";
label.Text = "text";
Controls.Add(label);
it will render:
<span title="tooltip">text</span>
which is just what you wanted.
Seeing that Tooltip is a property of the base WebControl, I assume that it will render as a title attribute for all WebControl classes.
You would do something like TextBox1.Attributes.Add("title", "Some title value");
Textbox.Attributes.Add("title","My text");
The .Attributes.Add("Attribute Name", "Attribute Value") lets you add most attributes to most controls, but always use the native property if available.
By far the easiest way is:
<asp:TextBox runat="server" title="My Title" />
Which renders
<input type="text" title="My Title" />
This also works with style etc, etc.
what is the best and most simplest way to create tooltip text for textboxes
With JavaScript and probably with a framework like jQuery that fits very well with ASP.NET MVC. Using the framework means that someone's alread done the hard work and written a plugin for it!
qtip
tooltip
List of some tooltip plugins
There is of course the title attribute on text inputs that shows as a popup tip in some browsers.
I found this to be the simplest and easy to maintain approach:
Create description using data annotation for the property of your model
Example:
[Display(Name="MyTextBox", Description = "Title for your entry")]
public string MyTextBox{ get; set; }
Then in your view access the description above using:
#Html.TextBoxFor(model => model.MyTextBox, new { title = ModelMetadata.FromLambdaExpression(model => model.MyTextBox, ViewData ).Description })
Just use the title tag :
<input type="text" title="Hello I'm the tool-tip"/>
Mvc way :
#Html.TextBoxFor(t => t.NameOfCustomer, new{ title= "Hello I'm the tool-tip" })
It's not fully customizable as is, but it does not require extra javascript nor a framework.
Use the data annotations on your model to put the tooltip in the Description property of the DisplayAttribute.
Then write your own Html Helper function that puts the Description property into the title attribute of the TextBox input field. You can call the helper TextBoxWithTooltipFor
In your view definition you can then replace the call to #(Html.TextBoxFor(...)) with the call to #(Html.TextBoxWithTooltipFor(...))
Here is the code that is tested and works.
I want to add a hyperlink to a social bookmarking site om my webpage which requires me to include the name of the page it is being sent from.
Example of what I am trying to achieve:
Current page is:
http://www.testpage.com/testpage.aspx?test=34
Hyperlink I want to create on the above page:
http://www.stumbleupon.com/submit?url=http://www.testpage.com/testpage.aspx?test=34
What is the easiest way to programmatically add this customised hyperlink to a webpage?
Assuming that you have a hyperlink like that :
<asp:HyperLink runat="server" ID="myLink" Text="stumbleupon"></asp:HyperLink>
At server side :
string currentPagesUrl =
HttpUtility.UrlEncode(HttpContext.Current.Request.Url.AbsoluteUri);
myLink.NavigateUrl = string.Format("http://www.stumbleupon.com/submit?url={0}",
currentPagesUrl);
Or an alternative way (this one is easier I think) :
<a href="http://www.stumbleupon.com/submit?url=<%= HttpUtility.UrlEncode(HttpContext.Current.Request.Url.AbsoluteUri) %>" target="_blank">
stumbleupon 2</a>
I second Canavar's answer. You might want to also URL encode the currentPagesUrl string when building the hyperlink:
myLink.NavigateUrl = string.Format("http://www.stumbleupon.com/submit?url={0}",
Server.UrlEncode(currentPagesUrl));
Using jQuery:
$(document).ready(function(){
$("a.stumblethis").each(function(){
$(this).attr("href", "http://www.stumbleupon.com/submit?url="+$(this).attr("href"));
});
});
This will convert all links that have a class of "stumblethis".
I have a form on a website, in which one of the inputs is to be used to enter hexadecimal colour codes to be entered into a database.
Is there any way for the page to dynamically update itself so that if the user changes the value from "000000" to "ffffff", the "colour" CSS property of the input box will change immediately, without a page reload?
Not without Javascript.
With Javascript, however...
<input type='text' name='color' id='color'>
And then:
var color = document.getElementById('color');
color.onchange = function() {
color.style.color = '#' + this.value;
}
If you are going to go the Javascript route, though, you might as well go all out and give them a color picker. There are plenty of good ones.
CSS properties have corresponding entries in the HTML DOM, which can be modified through Javascript.
This list is somewhat out of date, but it gives you some common CSS pieces and their corresponding DOM property names.
Granted, a JS lib like like jQuery makes this easier...
You can use Javascript to achieve that.
As an example:
Your HTML:
<input type="text" id="test" />
Your JS:
var test = document.getElementById('test');
test.onchange = function(){
test.style.color = this.value;
};
But this doesn't check the user's input (So you would have to extend it).