I have navigation and many link on my webproject from html action links.
They are ugly with underline. I would like to insert some image with name or play with styles of action link.
Is it possible? How to do that?
Thanks and take care,
Ragims
You could use css to remove the underlines or place a backgroundimage,
otherwise you could also just create the link like so:
<img src="yourimg.jpg" />
Html.ActionLink and Url.Action return the same URL. The difference is that the first creates an HTML element while the second returns just the URL to that action.
Another option is to use Url.RouteUrl or Html.RouteLink to create a link based off your route (to an action) instead of directly to an action.
One solution is to create an HtmlHelper extension method for creating an image-specific action link. A detailed tutorial can be found here.
If You are on MVC 3-4 with razor view engine then this may help you-
#Html.ActionLink("your link Name", "Action Method", "Controller",
new { style = "background-image:url('.././Images/imageyouwanttoshow.png')" },null)
Instead of using #Html.ActionLink("linkname","action","controller")
you can use following
<a href='#Url.Action("action", "controller")'>
<img src='#Url.Content("~/images/imageName.png")' />
"images" is my folder for storing the images.
#Url.Content() is to know the path.
You can pass your action and the controller for that action to #Url.Action().
#Url.Action() works similar to the #Html.ActionLink().
Now your link will get replaced by the image.
Related
Background
This is a follow on issue to an initial question I asked around asp.net core v3.1 razor page routes.
I added the following to the startup as suggested in the solution here which allowed me to route to the razor page in both ways I wanted:
services.AddMvc()
.AddRazorPagesOptions(options =>
options.Conventions.AddAreaPageRoute("Identity", "/account/signupandapply", "/identity/account/signup")
);
/identity/account/signup
/identity/account/signupandapply/<fooapplyid>
Issue
I'm struggling to use the anchor tag helper to respect the path route /identity/account/signupandapply/<fooapplyid>. The href shows using the parameter instead /identity/account/signupandapply?fooapplyid=<fooapplyid>. This is my anchor tag helper markup:
<a asp-area="identity" asp-page="/account/signupandapply" asp-route-fooapplyid="#Model.FooApplyId">Apply here</a>
Currently, I'm manually setting the href but would like to know how to get this working using the tag helper.
Apply here
Note: The anchor markup is being added to a view outside of the identity area.
Attempted
I've tried adding the below which shows the href as I want. I.e /identity/account/signupandapply/<fooapplyid>
.AddAreaPageRoute("Identity", "/account/signupandapply", "/identity/account/signupandapply/{applyid}")
But I then get an error when I go to the page, which makes sense
AmbiguousMatchException: The request matched multiple endpoints. Matches: /Account/SignUpAndApply /Account/SignUpAndApply
Neither of these work, the href still shows as ?applyid=:
.AddAreaPageRoute("Identity", "/account/signupandapply?applyid=", "/identity/account/signupandapply/{applyid}")
.AddAreaPageRoute("Identity", "/account/signupandapply/{applyid?}", "/identity/account/signupandapply/{applyid}")
Question
Is there a further startup route that needs defining or how do I get the anchor tag helper to respect the path route?
AddAreaPageRoute("Identity", "/account/signupandapply", "/identity/account/signup")
To quote the docs on this (emphasis mine):
conventions.AddAreaPageRoute(string areaName, string pageName, string route)
Adds the specified route to the page at the specified pageName located in the specified area.
The page can be routed via route in addition to the default set of path based routes. All links generated for this page will use the specified route.
So this convention effectively tells the routing to use the /identity/acount/signup route from now on to generate all links, while accepting incoming routes to hit both these routes.
Unfortunately, I don’t think that you can control this any better using the page conventions. Razor pages do not really fit a routing model where you are having different route to reach the same page. After all, Razor pages are page-centric instead of route-centric like MVC actions.
So if this is a hard requirement for you, you might want to look at using a controller for this one use-case instead that renders the same view. For what it’s worth, controllers do mix nicely with an application that is otherwise using Razor pages.
I am doing front-end dev work and being exposed to C# for the first time. I am trying to change a menu navigation so that each list item is clickable, rather than just what is inside each list item. Example (if it were static HTML):
<li>LINK</li>
change to
<li>LINK</li>
this menu is using HTML.ActionLink however, so it looks like this:
<li>#Html.ActionLink("Blah", "Index", "blahBlah", new { area = "Shared" }, null)</li>
how would I change this so the link is applied to the whole list item?
Thanks!
You may use the Url.Action method along with typical HTML markup.
<li>LINK</li>
This will generate markup like this
<li>LINK</li>
Change the parameters(action method/controller names) values of Url.Action method as needed.
Url.Action helper method generates a fully qualified URL to an action method.
I have been looking everywhere for this answer. I can't find any solution. I am using MVC3 ASP.NET. I am trying to make it so that when a user clicks on their profile it directs them to their profile using their id. So far nothing has worked.
<a href=#Html.ActionLink("",
"Profile",
"Followers",
new { id = (new UserService().GetUserByUserName(User.Identity.Name)).Id})>
<img src="blah.jpg" />
</a>
This does not seem to work. Any suggestions?
Html.ActionLink returns a complete <a> tag, not a URL.
You want to call Url.Action.
I have a website that is working fine with Razor (C#) all the coding is working properly when I use my local testing (WebMatrix IIS).
When I put it "online" on my server the website is not at the root of the site it self
For example:
http:// intranet.mycompany.com/inform
That's basically the "root" of my folder structure so all my folders starts from there (css file default.cshtml... and so on)
My "_PageStart.cshtml" sees it properly cause when I access my site from the link http://intranet.mycompany.com/inform it gives me the Layout I have configured in _PageStart.cshtml (and it really show the layout + the rendered default.cshtml)
BUT nothing else is getting the proper path, for example :
<img src="~/images/logos/hdr.png" />
The img holder is there I can see it but shows that the link is broken... when I Right-Click the img holder and do properties to see where the files should be it shows me :
http:// intranet.mycompany.com/images/logos/hdr.png
So it's going to the "full" root not the relative root...
How can i fix that ?
You have to use relative paths all over your app:
~ won't work within static html code.
You can write
<img src="#Url.Content("~/images/logos/hdr.png")" />
or
<img src="../images/logos/hdr.png" />
The first approach is good for layout files where your relative path might be changing when you have different length routing urls.
EDIT
Regarding to your question about normal links:
When linking to another page in your app you don't specify the view file as the target but the action which renders a view as the result. For that you use the HtmlHelper ActionLink:
#Html.ActionLink("Linktext", "YourController", "YourAction")
That generates the right url for you automatically:
Linktext
EDIT 2
Ok, no MVC - so you have to generate your links yourself.
You have to use relative paths, too. Don't start any link with the / character!
Link
Link
Link
EDIT 3
When using Layout pages you can use the Hrefextension method to generate a relative url:
<link href="#Href("~/style.css")" ...
Use Url.Content as shown bellow:
<img src="#Url.Content("~/images/logos/hdr.png")" />
I know that '~' is added by default, but I tend to change it so that all paths are relative to my code file rather than application root, using ".." eg. "../images/logos" etc
I'm developing a new website for my employer which contains a lot of CMS-style features. One of them is being able to create pages, specify URLs, menus, etc.
This is all fine.
What I'm after is a way to create a "Preview" button on these pages, that does not write to the database. I want to post (preferably the entire Model, if not, just the form data) to a new window and have that view render the page.
I have searched high and low and I cannot find an example that makes sense. Most people seem to have given up :/
I've attempted this by myself with TempData, however TempData gets cleared before I can render the page (as there is more than 2 steps involved from what I can deduce..).
I must POST as the form data will contain HTML (inside a Telerik Editor control).
Does anyone have any idea on a nice way to accomplish this? Or can anyone provide links to some resources? (I've come up completely blank!)
Regards,
chem
You can store the model in Session State.
I would store the data in session state.
this may be useful:
http://davidhayden.com/blog/dave/archive/2011/02/09/SessionLessControllersMvc3.aspx
You can still use TempData. At first step you need explicitly tell leave value in Session, for example:
string messageValue = (string) TempData.Peek("message"); // Does not cause ejection
You could serialize the model to XML and then the action method for the preview page could deserialize it.
See this link.
Thanks for the help guys/gals.
I managed to use TempData.
I basically ajax post to an action that stores the content in TempData using a Guid as the key. The Guid is returned and once the ajax post returns a hidden form with a target="_blank" action posts to a Preview action method passing through the Guid. That preview action then renders the view with the content in TempData.
Thanks for the suggestions.. it got me thinking!
Regards,
chem