在 MVC 中的 2 个不同视图之间创建书签
Create a bookmark between 2 different views in MVC
我有两种看法;索引和 Giftworx。在索引中,我有图标,单击每个图标时,它应将用户引导至 GiftWorx 页面中的特定点。我试过下面的代码,但没有用。任何帮助将不胜感激。
索引视图:
<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>
这有点棘手,但应该可以正常工作。首先,我用您页面的连接部分声明变量:
@{
var strLink = Url.Action("GiftWorxUsers", "GiftWorx") + "#GiftworxArea";
}
然后在您的索引视图中,将其放入您的 href link:
<div class="agile_feature_grid">
<a href='@strLink'>
<i class="fa fa-gift" aria-hidden="true">
</i>
Link text here
</a>
</div>
通过添加以下代码确保您在 Giftworx 视图中有一个区域,在此示例中有一个名称:Giftworx:
<a name="GiftworxArea"></a>
<div class="col-md-4 w3_agileits_features_grid">
//Other stuffs here
</div>
现在,当您点击那个 link 时,您将被定向到您的页面上那个带有部分名称 GiftworxArea.
的确切位置
我有两种看法;索引和 Giftworx。在索引中,我有图标,单击每个图标时,它应将用户引导至 GiftWorx 页面中的特定点。我试过下面的代码,但没有用。任何帮助将不胜感激。
索引视图:
<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>
这有点棘手,但应该可以正常工作。首先,我用您页面的连接部分声明变量:
@{
var strLink = Url.Action("GiftWorxUsers", "GiftWorx") + "#GiftworxArea";
}
然后在您的索引视图中,将其放入您的 href link:
<div class="agile_feature_grid">
<a href='@strLink'>
<i class="fa fa-gift" aria-hidden="true">
</i>
Link text here
</a>
</div>
通过添加以下代码确保您在 Giftworx 视图中有一个区域,在此示例中有一个名称:Giftworx:
<a name="GiftworxArea"></a>
<div class="col-md-4 w3_agileits_features_grid">
//Other stuffs here
</div>
现在,当您点击那个 link 时,您将被定向到您的页面上那个带有部分名称 GiftworxArea.
的确切位置