I have a nav bar with two buttons. Each button renders a view. I am using Jquery to dynamically load those views in one View which then gets rendered on the layout page. That means I am rendering all my views dynamically in one index page.

However, I end up losing the url history and it's not possible to link to those pages because they all get rendered using the one index action and controller that they're being rendered on.

I have tried setting the url from jquery using history.replacestate which works fine, however one issue remains: I do not know how to use the url:s to render a specific view on refresh or when linking to a specific view using the urls I created in replacestate. Is my approcach to dynamic loading wrong or is there a solution that can work with this current implementation?

    [HttpGet]
    [Route("/{controller}")]
    public ActionResult Index()
    {
        return this.View();
    }

The page argument passes in a URL that I create. Each view needs it's own URL.

   function urlHistory(page) {
    history.replaceState(currentState, '', page);
    document.title = `${page}`;
    }

I append each page to the main view and on clicking the nav bar the user can toogle between views.

 function appendPage(href, page) {
  $.get(href, {page: page}, function (data) {
    $("#render-tables").html(data);
    }).fail(function () {
    $("#render-tables").empty();
   });
   urlHistory(page);
  }

Rendering both views on the first index action(index.cshtml) that get's hit when logging in i.e the home page razor view.

<div id="render-tables"></div>

Which then in turn gets rendered using RenderBody on the Layout view.

CodePudding user response：

For your requirement,I think you could store your current page in cookie or session, I tried with partial view as below :

public IActionResult Partial(string page)
        {            
            var formerpage=HttpContext.Session.GetString("PartialPage");
            string pagename;
            if (page == null&& formerpage==null)
            {
                pagename = "Partial1";                
            }
            else
            {
                pagename = page== null ?formerpage : page;
            }
            HttpContext.Session.SetString("PartialPage", pagename);
            return PartialView(pagename);
        }

        public IActionResult AnotherPartial(string anotherpage)
        {
            var formerpage = HttpContext.Session.GetString("AnotherPartialPage");
            string pagename;
            if (anotherpage == null && formerpage == null)
            {
                pagename = "AnotherPartial1";
            }
            else
            {
                pagename = anotherpage == null ? formerpage : anotherpage;
            }
            HttpContext.Session.SetString("AnotherPartialPage", pagename);
            return PartialView(pagename);
        }

Index page:

<button id="subBtn1" type="submit">NavBarPartial</button>
<button id="subBtn2" type="submit">Partial</button>
<br />
<button id="subBtn3" type="submit">NavBarAnotherPartial</button>
<button id="subBtn4" type="submit">AnotherPartial</button>

<div id="CrTab">
    
</div>

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript">
    $("#subBtn1").click(function () {
        $.ajax({
            url: "/Home/Partial",
            type: "get",
            success: function (datas) {
                console.log(datas);
                $("#CrTab").html(datas);
            }
        })
    });

    $("#subBtn2").click(function () {
        $.ajax({
            url: "/Home/Partial?page=Partial2",
            type: "get",
            success: function (datas) {
                console.log(datas);
                $("#CrTab").html(datas);
            }
        })
    });
    $("#subBtn3").click(function () {
        $.ajax({
            url: "/Home/AnotherPartial",
            type: "get",
            success: function (datas) {
                console.log(datas);
                $("#CrTab").html(datas);
            }
        })
    });
    $("#subBtn4").click(function () {
        $.ajax({
            url: "/Home/AnotherPartial?anotherpage=AnotherPartial2",
            type: "get",
            success: function (datas) {
                console.log(datas);
                $("#CrTab").html(datas);
            }
        })
    });
</script>

in View Partial1:

<a>Partial1</a>

....

The result: