Create a bookmark between 2 different views in MVC

Question

I have two views; Index and Giftworx. In the Index I have icons and when each is clicked it should direct user to a specific point in the GiftWorx page. I've tried the below code but it didnt work. Any help would be appreciated.

Index View:

 <div class="col-md-4 w3_agileits_features_grid">
                <div class="agileits_w3layouts_features_grid">
                    <div class="col-xs-4 agileits_w3layouts_features_gridl">
                        <div class="agile_feature_grid">
                            @*<a href="@Url.Action("GiftWorx","Home", "GiftWorxUsers")"> <i class="fa fa-gift" aria-hidden="true"></i></a>
            </div>*@
                            <a href="/Home/GiftWorx/#GiftWorxUsers"> <i class="fa fa-gift" aria-hidden="true"></i></a>
                        </div>
                    </div>
                    <div class="col-xs-8 agileits_w3layouts_features_gridr">
                        <h4>Who uses GiftWorx</h4>
                        <p>See who uses GiftWorx and more.</p>
                    </div>
                    <div class="clearfix"> </div>
                </div>
            </div>

GiftWorxView

<div class="why-convertible-box" id="GiftWorxUsers">
    <div class="container" id="GiftWorxUsers">
        <h1>Who uses GiftWorx<i class="fa fa-question-circle"></i></h1>
    </div>
</div>
<div class="hoc container clear" id="GiftWorxUsers">
    <div class="row">
        <div class="col-md-2" style="padding: 2px;">
            <div style="border: lightgrey solid thin; border-radius: 2px">
                <img class="img-responsive" style="height:auto;" src="~/Content/myTemplate/Logos/1.jpg" />
            </div>
        </div>
        <div class="col-md-2" style="padding: 2px;">
            <div style="border: lightgrey solid thin; border-radius: 2px">
                <img class="img-responsive" src="~/Content/myTemplate/Logos/17.jpg" />
            </div>
        </div>
        <div class="col-md-2" style="padding: 2px;">
            <div style="border: lightgrey solid thin; border-radius: 2px">
                <img class="img-responsive" src="~/Content/myTemplate/Logos/15.jpg" />
            </div>
        </div>

Willy David Jr · Accepted Answer · 2017-06-08T07:29:59.673

This is a little bit tricky but should work fine. First I declare the variable with concatenated section of your page:

@{
    var strLink = Url.Action("GiftWorxUsers", "GiftWorx") + "#GiftworxArea";
}

Then on your Index View, put this on your a href link:

<div class="agile_feature_grid">
     <a href='@strLink'> 
      <i class="fa fa-gift" aria-hidden="true">
      </i>
     Link text here
     </a>
</div>

Make sure you have an area in your View of Giftworx which has a name in this example: Giftworx by adding this piece of code:

<a name="GiftworxArea"></a>
<div class="col-md-4 w3_agileits_features_grid">
   //Other stuffs here
</div>

Now when you click on that link, you will be directed on your page on that exact spot with a section name GiftworxArea.

My controller name is Home, actionName is GiftWorx and the divId for that part in the giftworx view is GIftWorxUsers. Basically when the icon is clicked in the Index it should jump to that specific part in the GiftWorx page(View) — , Jun 08 '17 at 07:08

Create a bookmark between 2 different views in MVC

1 Answers1