MVC:捕获路由url并将它们传递给javascript函数

时间:2021-10-16 14:32:33

Short:
Is there a way to have a route-definition that will pass the "CONTROLLER/ACTION" string value to a JavaScript function in stead of actually going straight for the controller action?

简:有没有办法让路由定义将“CONTROLLER / ACTION”字符串值传递给JavaScript函数,而不是直接执行控制器操作?

More:
I have a masterpage which contains the navigation of the site. Now, all the pages need this navigation wrapped around it at all times, but because I didn't want the navigation to constantly load with each pagecall, I changed all my pages to partialviews. These partial views are loaded via the JQuery.Load() method whenever a menu item is clicked in the navigation.

更多:我有一个包含网站导航的母版页。现在,所有页面都需要始终将此导航包裹起来,但由于我不希望每次页面调用都不断加载导航,因此我将所有页面都更改为了partialviews。只要在导航中单击菜单项,就会通过JQuery.Load()方法加载这些部分视图。

This all worked very good, up till now because I noticed it's also a requirement of the website to be able to link directly to page X, rather then default.aspx.

这一切都非常好,直到现在,因为我注意到网站的要求是能够直接链接到页面X,而不是default.aspx。

So, as an example:
The main page is my "default.aspx" page, this utilizes my master page with the navigation around it. And each call to a new page uses a javascript function that loads that particular partial view inside a div that is known in my masterpage. So, the url never changes away from "default.aspx", but my content changes seemlesly.

所以,作为一个例子:主页面是我的“default.aspx”页面,它利用我的母版页面及其周围的导航。每次调用新页面都使用一个javascript函数,将该特定局部视图加载到我的母版页中已知的div中。因此,网址永远不会改变“default.aspx”,但我的内容似乎发生了变化。

The problem is, those url's also need to be available when typed directly into the address bar. But, they're partial views, so loading them directly from the address bar makes them display without any masterpages around them. Therefore my question if it might be possible to capture the route typed into the address bar and pass that on to my JavaScript function that will load that route in the content div.

问题是,当直接输入地址栏时,这些url也需要可用。但是,它们是部分视图,因此直接从地址栏加载它们会使它们在没有任何主页的情况下显示。因此,我的问题是,是否有可能捕获键入地址栏的路由并将其传递给我的JavaScript函数,该函数将在内容div中加载该路由。

(I hope I explained it ok enough, if not, feel free to ask more information)

(我希望我解释得不够,如果没有,请随时询问更多信息)

4 个解决方案

#1


0  

First challenge, as you are using AJAX to load the partial pages you need client accessible URLs for the javascript to call. Second challenge, you need URLs that will load the HomeController and pass the 'page' portion of the URL into the javascript.

第一个挑战,因为您使用AJAX加载部分页面,您需要客户端可访问的URL以供javascript调用。第二个挑战,您需要加载HomeController并将URL的“页面”部分传递到javascript的URL。

For the first aspect I'd create some abstracted routes, i.e. "/ajaxaccess/{controller}/{action}/{id}" for the partial pages. That would be the first registered route. A second route would accept any controller/action reference and always get processed by the HomeController Index action.

对于第一个方面,我将创建一些抽象的路由,即部分页面的“/ ajaxaccess / {controller} / {action} / {id}”。那将是第一条注册路线。第二个路由将接受任何控制器/操作引用,并始终由HomeController Index操作处理。

In the /Home/Index action you grab the requested URL and slice it up, take the /{controller}/{action}/... section and pass that into your default.aspx using TempData. In your page check for the existence of the TempData and if it exists use the value therein to trigger your AJAX page load for the partial page (don't forget that you'll need to prepend '/ajaxaccess' (or whatever you choose) to the URL before it's passed to your page.

在/ Home / Index操作中,您获取请求的URL并将其切片,然后使用/ {controller} / {action} / ...部分并使用TempData将其传递到default.aspx。在您的页面中检查是否存在TempData,如果存在则使用其中的值来触发部分页面的AJAX页面加载(不要忘记您需要添加'/ ajaxaccess'(或您选择的任何内容)在传递到您的页面之前的URL。

I'm not going to provide code here as I think the information you'll gain from working through this yourself will be invaluable to you moving forward.

我不会在这里提供代码,因为我认为通过自己完成这些工作所获得的信息对于您前进而言将是非常宝贵的。

#2


2  

You are 100% correct to not want to hard code your URLs in your javascript code as it demolishes one of the primary tenants of MVC to do so. I'm one of those "separation of concerns" guys who will not write a single line of javascript outside of a dedicated .js file so I cannot dynamically specify the URL the way tuanvt has. What I do is use MVCs Url.Action method to emit my service URLs into hidden inputs on the master page (or the specific page if it is not used in multiple places). Then my script file simply pulls the value out of that hidden input and uses it just fine.

100%正确,不想在您的javascript代码中对您的网址进行硬编码,因为它会拆除MVC的主要租户之一。我是那些不会在专用的.js文件之外写一行javascript的“关注点分离”的人之一,因此我不能像tuanvt那样动态指定URL。我所做的是使用MVC Url.Action方法将我的服务URL发送到母版页上的隐藏输入(如果不在多个地方使用,则为特定页面)。然后我的脚本文件只是从隐藏的输入中提取值并使用它就好了。

ASP.NET MVC View Source

ASP.NET MVC查看源代码

<input id="serviceUrl" type="hidden" value="<%= Url.Action("Action", "Controller") %>" />

JS Source

$.getJSON($("#serviceUrl").val(), function(data) {
    //write your JS success code here to parse the data
});

#3


0  

You could use hash anchor (#) on your url and read it with javascript.

你可以在你的网址上使用哈希锚(#)并用javascript阅读它。

var url = document.location.toString();
if (url.match('#')) {
  anchor = url.split('#');
  // do whatever with anchor[1] .. 
}

#4


-1  

You can do something like this, put this in your javascript code on the view:

您可以执行以下操作,将其放在视图上的javascript代码中:

var szUrl=<%= ViewContext.RouteData.Route.ToString()%>;

Then the current route will be stored on the variable szUrl.

然后当前路由将存储在变量szUrl上。

#1


0  

First challenge, as you are using AJAX to load the partial pages you need client accessible URLs for the javascript to call. Second challenge, you need URLs that will load the HomeController and pass the 'page' portion of the URL into the javascript.

第一个挑战,因为您使用AJAX加载部分页面,您需要客户端可访问的URL以供javascript调用。第二个挑战,您需要加载HomeController并将URL的“页面”部分传递到javascript的URL。

For the first aspect I'd create some abstracted routes, i.e. "/ajaxaccess/{controller}/{action}/{id}" for the partial pages. That would be the first registered route. A second route would accept any controller/action reference and always get processed by the HomeController Index action.

对于第一个方面,我将创建一些抽象的路由,即部分页面的“/ ajaxaccess / {controller} / {action} / {id}”。那将是第一条注册路线。第二个路由将接受任何控制器/操作引用,并始终由HomeController Index操作处理。

In the /Home/Index action you grab the requested URL and slice it up, take the /{controller}/{action}/... section and pass that into your default.aspx using TempData. In your page check for the existence of the TempData and if it exists use the value therein to trigger your AJAX page load for the partial page (don't forget that you'll need to prepend '/ajaxaccess' (or whatever you choose) to the URL before it's passed to your page.

在/ Home / Index操作中,您获取请求的URL并将其切片,然后使用/ {controller} / {action} / ...部分并使用TempData将其传递到default.aspx。在您的页面中检查是否存在TempData,如果存在则使用其中的值来触发部分页面的AJAX页面加载(不要忘记您需要添加'/ ajaxaccess'(或您选择的任何内容)在传递到您的页面之前的URL。

I'm not going to provide code here as I think the information you'll gain from working through this yourself will be invaluable to you moving forward.

我不会在这里提供代码,因为我认为通过自己完成这些工作所获得的信息对于您前进而言将是非常宝贵的。

#2


2  

You are 100% correct to not want to hard code your URLs in your javascript code as it demolishes one of the primary tenants of MVC to do so. I'm one of those "separation of concerns" guys who will not write a single line of javascript outside of a dedicated .js file so I cannot dynamically specify the URL the way tuanvt has. What I do is use MVCs Url.Action method to emit my service URLs into hidden inputs on the master page (or the specific page if it is not used in multiple places). Then my script file simply pulls the value out of that hidden input and uses it just fine.

100%正确,不想在您的javascript代码中对您的网址进行硬编码,因为它会拆除MVC的主要租户之一。我是那些不会在专用的.js文件之外写一行javascript的“关注点分离”的人之一,因此我不能像tuanvt那样动态指定URL。我所做的是使用MVC Url.Action方法将我的服务URL发送到母版页上的隐藏输入(如果不在多个地方使用,则为特定页面)。然后我的脚本文件只是从隐藏的输入中提取值并使用它就好了。

ASP.NET MVC View Source

ASP.NET MVC查看源代码

<input id="serviceUrl" type="hidden" value="<%= Url.Action("Action", "Controller") %>" />

JS Source

$.getJSON($("#serviceUrl").val(), function(data) {
    //write your JS success code here to parse the data
});

#3


0  

You could use hash anchor (#) on your url and read it with javascript.

你可以在你的网址上使用哈希锚(#)并用javascript阅读它。

var url = document.location.toString();
if (url.match('#')) {
  anchor = url.split('#');
  // do whatever with anchor[1] .. 
}

#4


-1  

You can do something like this, put this in your javascript code on the view:

您可以执行以下操作,将其放在视图上的javascript代码中:

var szUrl=<%= ViewContext.RouteData.Route.ToString()%>;

Then the current route will be stored on the variable szUrl.

然后当前路由将存储在变量szUrl上。