CODEWITHSUNDEEP
jqueryasp.net-mvc
CSharped
CSharped

Reputation: 1287

How to scroll to a particular DIV on a Razor View

I was trying to build a sample e-commerce website using MVC and I have a a page which is like the summary page and I have few edit links on the page, which are Html.ActionLink , but what I am trying achieve here is when user clicks on the hyper link it should take the user to the page and also to a particular DIV on the page. Any suggestions on how to achieve this

Upvotes: 1

Views: 5228

Answers (3)

user3559349
user3559349

Reputation:

You can add an id attribute to element you wish to bring into view and then use this overload of Html.ActionLink() which accepts a fragment (anchor name). For example, in the view your navigating to

<div id="someID">
  ....
</div>

and in the view that you want to navigate from

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

Upvotes: 2

Yagnesh.Dixit
Yagnesh.Dixit

Reputation: 318

This will be your action Link

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

in controller you will have action for the above mentioned link.

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

In your view you will have the following.

@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>

Hope this helps.

Upvotes: 0

Gera
Gera

Reputation: 149

//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);    
        }     
});

Upvotes: 1

Related Questions