Return 从联系页面到索引页面

Question

我有一个包含部分的长索引页面和一个联系页面，但问题是如果您要转到联系页面并想返回到长索引页面，导航 link 是损坏。

这是我的导航：

 <div class="collapse navbar-collapse">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="#home" class="smoothScroll">HOME</a></li>
                            <li><a href="#about" class="smoothScroll">STUDIO</a></li>
                            <li><a href="#team" class="smoothScroll">TEAM</a></li>
                            <li><a href="#service" class="smoothScroll">SERVICES</a></li>
                            <li><a href="#work" class="smoothScroll">WORK</a></li>
                            <li><a href="#pricing" class="smoothScroll">PRICING</a></li>
                            @*<li><a href="#contact" class="smoothScroll">CONTACT</a></li>*@
                            <li>@Html.ActionLink("Contact", "Contact", "Home")
                            </li>
                        </ul>
                    </div>

因此，如果您现在转到联系页面，url 将是：

http://localhost:53534/Home/Contact

但是如果你想从那里去例如：服务，你会得到url：

http://localhost:53534/Home/Contact#service - what is not the correct url, because the correct url has to be:

http://localhost:53534/#service. So without the controller name contact.

但是如何管理呢？

谢谢

好的，我试过了，像这样：

                           @Html.ActionLink( "Contact", "Contact"
                        , "Home"
                        , Request.Url.Scheme
                        , Request.Url.Host
                        , "contact"
                        , null
                        , null
                        )
                        </li>

但话又说回来，如果你从联系人转到其他 link，你会得到这个： http://localhost:53534/Home/Contact#pricing

我也试过这个：

                           @Html.ActionLink( "Contact", "Contact"
                        , "Home"
                        , Request.Url.Scheme
                        , Request.Url.Host
                        , ""
                        , null
                        , null
                        )
                        </li>

所以我的完整导航如下所示：

<div class="collapse navbar-collapse">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="#home" class="smoothScroll">HOME</a></li>
                            <li><a href="#about" class="smoothScroll">STUDIO</a></li>
                            <li><a href="#team" class="smoothScroll">TEAM</a></li>
                            <li><a href="#service" class="smoothScroll">SERVICES</a></li>
                            <li><a href="#work" class="smoothScroll">WORK</a></li>
                            <li><a href="#pricing" class="smoothScroll">PRICING</a></li>

                            <li>

                               @Html.ActionLink( "Contact", "Contact"
                            , "Home"
                            , Request.Url.Scheme
                            , Request.Url.Host
                            , "contact"
                            , null
                            , null
                            )
                            </li>
                        </ul>
                    </div>

这是最新的：

<div class="collapse navbar-collapse">
                            <ul class="nav navbar-nav navbar-right">
                                <li><a href="#home" class="smoothScroll">HOME</a></li>
                                <li><a href="#about" class="smoothScroll">STUDIO</a></li>
                                <li><a href="#team" class="smoothScroll">TEAM</a></li>
                                <li><a href="#service" class="smoothScroll">SERVICES</a></li>
                                <li><a href="#work" class="smoothScroll">WORK</a></li>
                                <li><a href="#pricing" class="smoothScroll">PRICING</a></li>

                                <li>

                                   @Html.ActionLink( "Contact", "Contact"
                                , "Home"
                                , Request.Url.Scheme
                                , Request.Url.Host
                                , "contact"
                                , null
                                , null
                                )
                                </li>
                            </ul>
                        </div>

但是 link 将变为：http://localhost:53534/Home/Contact#pricing。它应该是：http://localhost:53534/Home/#pricing.

是的，好的，对不起，错了post，但是：

                            @Html.ActionLink("Contact", "Index"
                            , "Home"
                            , Request.Url.Scheme
                            , Request.Url.Host
                            , "contact"
                            , null
                            , null
                            )
                        </li> The contact page has to be without "#". But now this is with "#". So how to omit the "#"? I just changed the first Index to Contact, because that is just the name

Answer 1

一个快速而肮脏的解决方法是将锚点的 href 属性设置为绝对路径，而不是相对路径，例如：

<li><a href="/#pricing" class="smoothScroll">PRICING</a></li>

Answer 2

如Stephen Muecke pointed out in his , you could use this overload of Html.ActionLink.

@Html.ActionLink
( "Index"
, "Index"
, "Home"
, null
, null
, "contact" // the fragment
, null
, null
);

否则，您可以在 HTML 和 @Url.Action 中使用常规锚点 (a) 元素。您可以使用 Url.Action 进入主页并从那里进一步导航：

<a href="@Url.Action("Index", "Home")#some_optional_hash" />

Return 从联系页面到索引页面

Return to index page from the contact page

c#

asp.net-mvc-4

razorengine