Question

我正在尝试使用MVC构建一个示例电子商务网站，我有一个页面，就像摘要页面，我在页面上有很少的编辑链接，这些是Html.ActionLink，但我在这里尝试实现的目标当用户点击超链接时，它应该将用户带到页面，也可以带到页面上的特定DIV。关于如何实现这个的任何建议

Answer 1

//Bind your Html.ActionLink with 'id' parameter like   
@Html.ActionLink("Edit Link1", "Edit", new {Id=1})   
@Html.ActionLink("Edit Link2", "Edit", new {Id=2})


//Controller   
public ActionResult Edit(int? Id)   
        {   
            switch (Id)   
            {   
                case 1:   
                    ViewBag.Position= "Link1";   
                    break;   

                case 2:   
                    ViewBag.Position= "Link2";   
                    break;    

             }    
            return View("YourView");   
        }    

//View    

//In Razor view, put Link1 to Link3 in separate DIVs with ID like <div Id="Link1">..</div>,<div Id="Link2">    

 $(document).ready(function () {   
if ('@ViewBag.Position' != "") {   
            $('html, body').animate({    
             scrollTop: $('@ViewBag.Position' ).offset().top     
            }, 2000);    
        }     
});

Answer 2

您可以向要加入视图的元素添加id属性，然后使用Html.ActionLink() fragment接受<div id="someID"> .... </div>（锚名称）。例如，在导航到

的视图中

@Html.ActionLink("link Text", "actionName", "controllerName", null, null, "someID", null, null)

并且在视图中您要从

导航

public Color getBackground()

Answer 3

这将是您的行动链接

@Html.ActionLink("LinkText","ActionName", new {divId = "ScroolToDivId"})

在控制器中，您将对上述链接采取行动。

public ActionResutl ActionName(String divId){
  yourModel objYourModel = new yourModel();
  objYourModel.ScrollToDiv = divId
  return View("ViewName", objYourModel);
}

在您看来，您将拥有以下内容。

@model yourModel
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
@Html.HiddenFor(x => x.ScrollToDiv)

<script>
 var ScrollToDiv = document.getElementsByName("ScrollToDiv");
 if(ScrollToDiv && ScrollToDiv.Value != ''){
    $('html, body').animate({
      scrollTop: $("#" + ScrollToDiv.Value).offset().top
    }, 2000);
 }
</script>

希望这有帮助。

如何在Razor View上滚动到特定的DIV

3 个答案: