MVC Link inside a page

Question

I am working in a .NET project with MVC and I need to make work a link that point to a section on the same page.

The following code works well without MVC:

<a href="#section1">Section 1</a>
<div id="section1">
  <h1>Section 1</h1>
</div>

Now this is my real URL: http://localhost:17338/MarketingCustomers/CleanData/1/1150119

And I need to be able to link with a div with id=customerErrorSection so the URL should looks like: http://localhost:17338/MarketingCustomers/CleanData/1/1150119#customerErrorSection

So I need to add "#customerErrorSection" at the end of the URL.

But the MVC routing changes the URL to http://localhost:17338/MarketingCustomers/CleanData/1/1150119#/customerErrorSection

I have been playing with the RouteConfig but I don't know how to create the URL I need, this is my code that isn't working:

routes.MapRoute(
                       name: "MarketingDataClean_CustomerErrorSection",
                       url: "MarketingCustomers/CleanData/{systemSourceId}/{systemSourceCustomerId}/{#customerErrorSection}",
                       defaults: new { controller = "MarketingCustomers", action = "CleanData", systemSourceId = "", systemSourceCustomerId = "" }
                   );

Thanks for the help!

The `#` part of the url shouldn't arrive at the server side - so no need to add that to the route — Hans Keﬆing, May 19 '17 at 08:12

score 0 · Answer 1 · answered May 18 '17 at 17:35

0

Try:

 routes.MapRoute(
  name: "MarketingDataClean_CustomerErrorSection",
  url: "MarketingCustomers/CleanData/{systemSourceId}/{systemSourceCustomerId}/#customerErrorSection",
  defaults: new { controller = "MarketingCustomers", action = "CleanData", systemSourceId = "", systemSourceCustomerId = "" }
);

answered May 18 '17 at 17:35

Ashiquzzaman

5,129
3
27
38

Thanks, I have the solution at my work, so I will try it tomorrow! – MarcosF8 May 18 '17 at 17:54

score 0 · Accepted Answer · answered May 18 '17 at 17:38

0

I don't really understand the problem here. Just leave the # part out.

routes.MapRoute(name: "MarketingDataClean_CustomerErrorSection",
                url: "MarketingCustomers/CleanData/{systemSourceId}/{systemSourceCustomerId}",
                defaults: new { controller = "MarketingCustomers", action = "CleanData", systemSourceId = "", systemSourceCustomerId = "" });

And then use the URL: http://localhost:17338/MarketingCustomers/CleanData/1/1150119#customerErrorSection

If you want to use the Url.Action helper then use it like this:

@Url.Action("CleanData", "MarketingCustomers", new { systemSourceId = 1, systemSourceCustomerId = 1150119})#customerErrorSection

answered May 18 '17 at 17:38

Dávid Molnár

10,673
7
30
55

The MVC changes my URL, when I set it manually in the browser bar it goes to the section I want, but clicking in the link it does not work as it changes the URL as I explained before. – MarcosF8 May 18 '17 at 17:54
I don't understand you. If you want a simple link on the same page, why don't you use a ``? Why does the MVC change the URL - are you creating the url with `Url.Action`? – Dávid Molnár May 18 '17 at 18:11
I am using anchor already, looks like there is something wronge in my solution or in my page, as I have just created an empty solution, and a simple link inside the page works without problem. I have to check Tomorrow if it is because I have some partial views or it because the divs are inside of panels, I don't know. Once I find it I will post which was the issue. Thanks – MarcosF8 May 18 '17 at 20:46

score 0 · Answer 3 · answered May 19 '17 at 06:52

I am getting close now, the following code works fine in the View, but when I put it inside of a partial view does not work anymore.

<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
<li><a href="#section41">Section 4-1</a></li>
<li><a href="#section42">Section 4-2</a></li>
</ul>
<div id="section1">
 <h1>Section 1</h1>
</div>
<div id="section2">
 <h1>Section 2</h1>
</div>
<div id="section3">
 <h1>Section 3</h1>
</div>
<div id="section41" class="container-fluid">
 <h1>Section 4 Submenu 1</h1>
</div>
<div id="section42" class="container-fluid">
 <h1>Section 4 Submenu 2</h1>
 </div>

score 0 · Answer 4 · answered May 19 '17 at 07:06

0

I found the problem,

Inside of other divs or panels, need to put to IDs of all of them:

<a href="#mainDiv#section2">Section 2</a>

Div 1: mainDiv, and Div 2: section2

Thanks again to all for the help!

answered May 19 '17 at 07:06

MarcosF8

1,848
5
19
33

MVC Link inside a page

4 Answers4