0

I started using asp.net MVC 4 and I don't quite understand how could I accomplish simple tasks like making a simple navigation menu for my website, I would like it to be just like the one here on stackoverflow where the images change on mouse over and also link to their corresponding pages.

what used to be a few minutes of work with HTML (in Dreamweaver for example) now takes much much more time and thought (at least for me).

Investigating about the 3 elements I've mentioned got me here:

  1. How to show an image- even that is not easy, I have looked everywhere for something that looks like an ideal solution but couldn't find any! even here on stackoverflow, some solutions are involving writing long lines of code in the name of "Helpers", and I could dig into it but there are so many different solutions, and I wouldn't know which one is right.. why can't there be just one standardized solution?

  2. How to link an image- also an issue, that i understand that I need to set the controller in the parameters list but again I ran into and issue that I might have found the solution for I just need to test it, I have read that I could have different methods inside of one controller and in this way I will not have to have one controller for each link. I will try that, better solutions are welcomed.

  3. How to swap an image on mouse over- also looks crazy for me, I have found one solution where there are long lines of code for this here: http://www.codeproject.com/Tips/329596/MVC-3-Helper-for-Hover-Images

I am kind of disappointed that just for putting up the logo image and linking it I spend days! I do have background in .net c# HTML+CSS etc'.. so I am asking myself (and you guys) why does it have to be so unclear and not friendly?

Come on.. what am I missing? is there any library of helpers everybody is using or something like that?

I am still in the process of learning MVC 4 and I know I'll get it but I would've expected accomplishing these kind of simple tasks a lot faster. also, in Microsoft examples, I have never found an example where they put a logo or a menu image, it is always plain text! so annoying and frustrating...

I will very much appreciate any help..

Thanks a lot!

Roy.

Ray
  • 407
  • 1
  • 3
  • 15
  • Can you put image here how it looks at moment? – Jigar Pandya Apr 24 '13 at 05:28
  • Hi Jigar, I mean I have a new website in asp.net MVC 4 and I would like to have a menu with images as links like "Home" "Page1" "Page2" "about us" exactly like the way the top menu right here on the top of this page we are on right now (stackoverflow.com) shows: "Question" "Tags" "Users" Badges" "Unanswered" etc'.. Thanks.. – Ray Apr 24 '13 at 05:42

1 Answers1

0

Start with http://www.asp.net/mvc/mvc3 and understand what are the paradigms of it and what is the differance between webform and mvc systesm.

Basically you need to understand how the masterpages are evolved in mvc or what is the replacement of master pages in mvc.

This is clue to what you want to achieve.

Now if you want to put the Image button in which if you hover and color will change then you need to do following steps.

  1. Create a button first e.g

Html.ActionLink("YourButtonName", "Index", null, new {@class="hoverButton" })

  1. Now you need to create two classes in your css file with name hoverButton which contains property to show image and hoverButton:hover show image when you hover over the link. Like following.

hoverButton { margin-bottom: 10px; width: 160px; height:160px; display:block; background:transparent url('Button.png') center top no-repeat; }

.hoverButton:hover { background-image: url('hoverButton.png'); }

This way when you hover over to button it will display different image in mvc view menu item.

Hope you understand the concept and it helps.

Jigar Pandya
  • 6,004
  • 2
  • 27
  • 45
  • Thank you Jigar, I am familiar with the differences between web-forms and mvc, I am also familiar with the way mvc works. I know that the master page was replaced to _Layout.cshtml and I can also get it to work as my site's "theme" BUT, I am having a really hard time configuring a simple IMAGE to link to another page in the site so I could make a menu. and there are a few snippets that people use but I can't believe it is not standardized, I wouldn't be sure what to use. and in all of Microsoft examples they NEVER have a menu that is made out of images, or a logo that sends you the homepage. – Ray Apr 25 '13 at 01:43
  • I have also read many book tutorials and watched many full series video tutorials about MVC and they go on and on and on about the MVC framework guts, about Data and routing and what not but NEVER EVER on a simple thing like linking an image! they always use text for linking to other pages and they never bother to show how to build a navigation menu! I feel so frustrated and helpless, it should have been the simplest thing to do. it's the basics of a webpage.. is that asp.net MVC going backwards or forwards? *anyone can help me by telling me how to link the logo image to point to the homepage? – Ray Apr 25 '13 at 02:01
  • I've been searching the internet for a long time now, there is not even 1 example site that shows the use of images as a menu, all use plain text. I am starting to loose it. – Ray Apr 25 '13 at 02:18
  • This is the page where noumerous people talk about how to display a linked image: http://stackoverflow.com/questions/596444/html-actionlink-as-a-button-or-an-image-not-a-link some got it to work, for some, some ways failed on certain browsers.. this is ludicrous. it just can't be. – Ray Apr 25 '13 at 02:26
  • Ok I am here now and will provide you way out.. Do not panic – Jigar Pandya Apr 25 '13 at 04:37
  • Thank you Jigar, I have found out that I can do everything with HTML (I Thought I couldn't for creating links). So what is the difference between using a method like "Html.ActionLink" and plain HTML+CSS? Sorry for my frustration and the Noob asp.net MVC Issues.. Thanks a lot again.. – Ray Apr 26 '13 at 02:10