how to BOLD a fragment of the linkText in an Html.ActionLink? - asp.net-mvc

I have this:
<li><%:Html.ActionLink(user.Email.Replace(Model.SearchString, "<b>" + Model.SearchString + "</b>"), "LoginEdit", "Admin", new { area = "Staff", webUserKey = user.WebUserKey }, null)%>, last login: <%:loginString%></li>
As you can see, I want the portion of the Email string that matches the Model.SearchString to be bolded. I can't figure out the syntax to make this happen, given the context of my code.
Any ideas?
The goal is something like this (assuming user searched for "john"):
<b>john</b>#gmail.com

Whenever I encounter a situation likes this, I try my best not to embed HTML inside HTML helpers. In addition, I think breaking up your code will help in future maintenance - you're doing a lot in a single function call.
I would prefer doing it this way:
<li>
<a href="<%: Url.Action("LoginEdit", "Admin", new { area = "Staff", webUserKey =user.WebUserKey }) %>">
<%: user.Email.Replace(Model.SearchString, "") %>
<b><%: Model.SearchString %></b>
</a>
last login: <%: loginString %>
</li>
It's a few more lines of code, but it makes it much easier to decipher what's going on.

I think the issue is that the output of <%: %> is HTML encoded. So your <b> tag is probably encoded and you see the actual tag in the rendered HTML instead of the bold text.
If user.Email is a trusted value you could skip HTML encoding the output.
<li><%= Html.ActionLink(user.Email.Replace(Model.SearchString, "<b>" + Model.SearchString + "</b>"), "LoginEdit", "Admin", new { area = "Staff", webUserKey = user.WebUserKey }, null)%>, last login: <%:loginString%></li>
For more information see: http://haacked.com/archive/2009/09/25/html-encoding-code-nuggets.aspx

Related

Better practice for js i18n with angular

I wonder to know if there is any bad smell on my practice for i18n on Angular.
I put the I18n translating function on Angular controller (because I don't know how to put it on HTML template file)
And about the i18n scope, I use this way I18n.t("city." + city_name) to indicate that the city_name is under "city" scope. Could I write it in this way I18n.t(city_name, scope: "city") to make it more understandable.
I appreciate every comment and suggestion to enhance my current solution.
Data structure
departures_lst is a list of countries' English name e.g.,: [US, China, Japan]
Each country has many cities name. e.g. [New York, LA, Boston]
Angular controller
App.controller("departures_ctrl", function($scope, $location, $http) {
$http.get("/departures.json")
.success(function (response) {
$scope.departures_lst = response;
});
$scope.get_destinations = function(city_name) {
return $location.url("/depart_from/" + city_name);
};
$scope.i18nCountryName = function(country_name) {
return I18n.t("country." + country_name) + country_name
};
$scope.i18nCityName = function(city_name) {
return I18n.t("city." + city_name) + city_name
};
});
HTML teamplate?
<div class="panel panel-transparent" ng-repeat="departure in departures_lst">
<h5>{{i18nCountryName(departure.country)}}</h5>
<li class="col-sm-3 col-lg-3 col-xs-3" ng-repeat="city in departure.cities">
<a ng-click="get_destinations(city)">
<i class="fa fa-plane"></i>
{{i18nCityName(city)}}
</a>
</li>
</div>
You should always try to put localization in the markup (as much as possible), that way you further encapsulate layout from your logic and data. I have always used the great angular-localization plug in. You get some great filters and directives to play with that have parametrization and other features built in. For example:
You have a string where you have to insert the name of a user, you define the string in your localized file as:
"some-loc-id-tag": "insert the user name {user} here!"
And in your controller scope have the property:
$scope.model.userName
And can display the name of the user with the localized string like so in HTML:
<div data-i18n="loc.some-loc-id-tag" data-user="{{model.userName}}"></div>
Check it out:
https://github.com/doshprompt/angular-localization

Trying to convert this Html.Action Code to Html.ActionLink

I am using MVC3, ASP.NET4.5 and Razor.
I have some Html.Action Code, and would ideally like to convert it to Html.ActionLink as I am thinking of using a security extension function that has been written for ActionLinks.
My code is:
<span class="fa fa-pencil ss-prime ss-cmd" title="Edit Order"></span>
Can this be implemented using an ActionLink?
The "fa fa-pencil" code is a webfont, and I need this.
Thanks in advance
If you use an action link, you may need to modify your styles slightly:
Html.ActionLink("edit order", "Edit", "Order"
, new { id= 1 }
, new { #class="fa fa-pencil" }) // <-- html attributes
This will create an a href, but attach the css styles to the a tag, not the span.
<a class="fa fa-pencil" href="/Order/Edit/1">edit order</a>

Rails - Add HTML attribute without setting a value

I'm trying to create an image_tag and specify a data- attribute that does not have any value set to it. I'm trying to add data-tooltip, for use with Foundation 5 tooltips. It seems that if any value is actually set to this, Foundation uses the same tooltip text every time and ignores the title attribute of that element (so every tooltip will say whatever the first one you hovered on was... which seems buggy in and of itself on Foundation's part also)
This is what I need to generate:
<img src="[whatever]" title="My Tooltip" data-tooltip />
This will not work for me:
<img src="[whatever]" title="My Tooltip" data-tooltip="[insert anything here]" />
I have tried a number of different combinations, and read documentation, but it seems no matter what I put as the value, it ends up generating it like data-tooltip="null", or true, or false, or any string I pass.
image_tag(my_image, class: 'has-tip', title: "My Title Here", data: { tooltip: true })
Try to pass in empty string as follows:
image_tag(my_image, class: 'has-tip', title: "My Title Here", data: { tooltip: "" })
In Rails 4.1.4 using above tip :"data-tooltip" => '' renders data-tooltip without value.
For an attribute with no value like multiple <input multiple type="file">, you can override the attribute default name, by uppercasing and setting an empty string. For example input_html: { Multiple: '' } But this is a hack.
In rails 5, I was trying to add itemscope attribute with no value in the following link tag scenario:
<%= link_to example_path(#example) do %>
<span>
<%= #example.name %>
</span>
<% end %>
I needed the resulting html a tag to show the itemscope attribute without any value like so:
<a itemscope href="example/path">
<span>
some text
</span>
</a>
Notice the itemscope has no ="" or itemscope="itemscope".
I tried solutions from SO and other places and the only thing that worked for me was adding the following to the link_to tag: " itemscope" => ''. Notice the space between the first double quote and the word itemscope.
This seems to generate the desired outcome and also validated as schema.org tag on google (that is what i used the tag for).

HTML in MVC RouteLink

I have a RouteLink constructed like so
<p class="articleLink">
#MvcHelper.Html.RouteLink(article.Title, "Article_Route", new RouteValueDictionary() { { "articleId", article.Id }, { "seoUrl", article.SeoUrl } }))
</p>
However, article.Title could potentially contain HTML i.e. the value could be <em>Sample</em> Title which in turn gets rendered like so
<em>Sample</em> Title
Is there any way to prevent the HTML from being escaped, and instead to be treated as actual HTML? Or do I need to create a standard HTML <a href... link in this case (thus losing all the niceties associated with the RouteLink helper).
If you want HTML inside your anchor don't use the Html.RouteLink (because it will HTML encode the link text by default as you noticed) instead of build your a tag by hand with using Url.RouteUrl to generate the url:
<p class="articleLink">
<a href="#(Url.RouteUrl("Article_Route",
new RouteValueDictionary()
{ { "articleId", article.Id },
{ "seoUrl", article.SeoUrl } }))">
#Html.Raw(article.Title)
</a>
</p>
Or you can create your own non encoding RouteLink helper.
You can use HtmlHelper.Raw(). Having said that, it is probably not a good idea to keep any HTML in your model/view model, which is against the principle of separation of model and presentation, also a security hazard.

How to pass query string parameter in ActionLink in MVC

I am having following action link:
<%= Html.ActionLink("Check this", "Edit", "test",
new { id = id }, new { style = "display:block" })%>
How do I include data=name as query string. Some thing like this:
link?data=name
4th parameter of Html.ActionLink can have any number of properties:
<%= Html.ActionLink("Check this", "Edit", "test",
new { id = id, data=name }, new { style = "display:block" })%>
These properties are inserted into URL based on routing, but if the property name cannot be matched into any route it is added as URL GET parameter.
So if you have standard route {controller}/{action}/{id}, you will get the URL:
test/Edit/[id]?data=[name]
from the above code.
Pass Query String By this way
#Html.ActionLink("Delete Record", "Home", "Delete", new { id=Id},null)
By above code you will get the url like(Suppose Id=1): /Home/Delete/1
and if you want to add more parameters to query string then:
#Html.ActionLink("Delete Record", "Home", "Delete", new { id=Id, Name=name},null)
By above code you will get the url like(Suppose Id=1 and Name=India) :
/Home/Delete/1?Name=India
I got tired of banging my head against a wall with the html.actionlink. Works great when you just want to route it against straightforward routing calls, but absolutely refuses to cooperate when you want to add a simple querystring at the end.
I don't an ID at then end, I want to be able to add some kind of actual Querystring with the "?".
So anywhere I needed a Querystring I switched to using the url.action inside the anchor tag.
<a href='#url.action("Action","route")?Parameter=Value' >Text for Link Name</a>
At least it works and I can stop getting headaches over something that should have been a very simple task. Someone needs to get their heads out of their butts and make the ActionLink work properly for Querystrings in the MVC routing.
I know this is kind of old question but.
In case the below code doesn't generate the <a href="/?param=value" />.
<%= Html.ActionLink("Text", "Action", "Controller", new { param=value }, null)%>
I would advice checking whether you action has at least one [Route] attribute (I used [Route("/")] for example).
Hope it helps.

Resources