简体   繁体   English

重新加载页面后维护菜单的最佳做法是什么? 我有这个自定义代码,感觉不对

[英]What is the best practice for maintain a menu after a page reload? I have this custom code which feels wrong

I have a custom Menu which loads a new MVC View for each click as I want. 我有一个自定义菜单,可以根据需要为每次单击加载一个新的MVC视图。 I load the new View by setting window.location.href. 我通过设置window.location.href加载新的视图。 To make it work I have to set the baseURL (the name of the website) each time. 为了使其正常工作,我必须每次都设置baseURL(网站名称)。 To Store the state of the menu I use URL's querystring. 为了存储菜单的状态,我使用URL的querystring。

My concerns is in the use of: 我的关注点在于使用:

  1. '/WebConsole53/' // hardcode baseurl i have to apply each time manually '/ WebConsole53 /'//每次我都必须手动应用硬编码baseurl
  2. Setting window.location.href to load the new View from JavaScript // Is this the best way or should I use some URL/Html helpers instead? 设置window.location.href以从JavaScript加载新的视图//是最好的方法,还是应该改用一些URL / HTML帮助器?
  3. I store the state of the selected menuItem in the querystring ("menu") // Is it more common to store that kind in Session/Cookie? 我将所选menuItem的状态存储在querystring(“菜单”)中//将这种类型存储在Session / Cookie中是否更常见?

Any thoughts, corrections and suggestions would be much appriciated - thanks. 任何想法,更正和建议将不胜感激-谢谢。

_Layout.cshtml _Layout.cshtml

var controller = $self.data('webconsole-controller');
var action = $self.data('webconsole-action');
var menu = "?menu=" + $self.attr('id');
var relUrl = controller + "/" + action + menu;
var url = urlHelper.getUrl(relUrl);
window.location.href = url;

UrlHelper.js UrlHelper.js

var urlHelper = function () {
    var getBaseUrl = '/WebConsole53/',

        buildUrl = function(relUrl) {
            return getBaseUrl + relUrl;
        };

    var getUrl = function(relUrl) { // relUrl format: 'controller/action'
        return buildUrl(relUrl);
    };

    return {
        getUrl: getUrl
    };
}();

I Use MVC 5. 我使用MVC 5。

You can save this problem using Route. 您可以使用Route保存此问题。 Through the route you know exactly where you are located in you application. 通过该路线,您可以准确地知道应用程序中的位置。

_Layout.cshtml is definetely not the place to have this javascript. _Layout.cshtml绝对不是使用此javascript的地方。 Maybe you are missing some MVC concepts, I would recommend you to read a bit more about routes and routelinks 也许您缺少一些MVC概念,建议您多读一些有关路由和路由链接的内容

I hope this helps you a bit: RouteLinks in MVC 我希望这对您有所帮助: MVC中的RouteLinks

'/WebConsole53/' // hardcode baseurl I have to apply each time manually '/ WebConsole53 /'//每次我都必须手动应用硬编码baseurl

sometimes you need to access your root from javascript where you don't have access to server-side code (eg @Html ). 有时您需要从javascript访问您的根目录,而您无法访问服务器端代码(例如@Html )。 While refactoring may be the best option you can get around this by storing the baseurl once, using server-side code, eg in _layout.cshtml: 尽管重构可能是最好的选择,但是您可以通过使用服务器端代码(例如,在_layout.cshtml中)存储一次baseurl来解决此问题:

<head>
    <script type="text/javascript">
        var basePath = '@Url.Content("~")';  // includes trailing /
    </script>
    ... load other scripts after the above ...
</head>

you can then reference this everywhere and it will always be valid even if you move the base / migrate to test/live. 您就可以在任何地方引用它,即使您将基准/迁移到测试/在线状态,它也始终有效。

Setting window.location.href to load the new View from JavaScript // Is this the best way or should I use some URL/Html helpers instead? 设置window.location.href以从JavaScript加载新的视图//是最好的方法,还是应该改用一些URL / HTML帮助器?

Depends on your requirements - you could use $.ajax (or shortcuts $.get or $.load ) to load PartialViews into specific areas on your page. 根据您的要求-您可以使用$.ajax (或快捷方式$.get$.load )将PartialViews加载到页面的特定区域中。 There's plenty of examples on SO for this and the jquery api help. 有很多关于SO的示例以及jquery api帮助。

Or just use <a> anchors or @Html.ActionLink as already suggested. 或仅使用<a>锚点或@Html.ActionLink如已建议)。 Without needing menu= (see next) you don't need to control all your links. 不需要menu= (请参阅下一个),您无需控制所有链接。

I store the state of the selected menuItem in the querystring ("menu") // Is it more common to store that kind in Session/Cookie? 我将所选menuItem的状态存储在querystring(“菜单”)中//将这种类型存储在Session / Cookie中是否更常见?

If you change the page, then you could query the current url to find which menu item points to it and highlight that one (ie set the menu dynamically rather than store it). 如果更改页面,则可以查询当前URL,以找到指向该菜单的菜单项并突出显示该菜单项(即,动态设置菜单而不是存储菜单)。

This would also cover the case where you user enters the url directly without the menu= part ... or where your forget to add this... not that that would happen :) 这也将涵盖以下情况:用户直接输入网址而没有menu=部分...或者您忘记添加此网址...不会发生这种情况:)

Additional : You can specify which layout to use in your view by specifying the Layout at the top of the view, eg: 其他 :您可以通过在视图顶部指定布局来指定要在视图中使用的Layout ,例如:

@{
    Layout = "~/Views/Shared/AltLayout.cshtml";
}

(which is also one of the options when you right click Views and Add View in visual studio) (这也是在Visual Studio中右键单击“视图”和“添加视图”时的选项之一)

Without this, MVC uses a configuration-by-convention and looks at Views/_ViewStart.cshtml which specifies the default _layout.cshtml. 否则,MVC将使用按约定进行配置,并查看指定默认_layout.cshtml的Views / _ViewStart.cshtml。

If you don't want a layout at all, then just return PartialView(); 如果根本不需要布局,则只需return PartialView(); instead 代替

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM