Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >ASP .NET Core3.0Razor页面使用@Url.Page为AJAX生成动态href

ASP .NET Core3.0Razor页面使用@Url.Page为AJAX生成动态href
EN

Stack Overflow用户
提问于 2019-11-27 05:47:19
回答 3查看 7.1K关注 0票数 2

我有一个锚标记,在onclick上有一个javascript函数,调用我的方法通过Ajax更新页面。

页面显示订单的详细信息,ajax更新显示详细订单的位置。

问题是:如何动态生成和传递URL?

这是我的锚牌:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<a class="nav-link text-dark text-center p-0 collapsed"
   data-toggle="collapse"
   data-target="#Details"
   aria-expanded="true"
   aria-controls="Details"
   href="@Url.Page("Area/Details/" + @Model.wItem.GUID,  "ShowDetails")"                                           
   id="ShowDetails"
   onclick="ShowDetailsAjax(this, '@Model.wItem.GUID')">
   @item.Position
</a>

这是我的javascript函数:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function ShowPositionAjax(x, _GUID) {

    var _url = '';
    var _position = x.outerText;
    var parameters = "{'position':'" + _position + "','GUID':'" + _GUID + "'}";

    $.ajax({
        url: _url,
        type: 'GET',
        cache: false,
        async: true,
        headers: {
            RequestVerificationToken:
                $('input:hidden[name="__RequestVerificationToken"]').val()
        },
        data: parameters
    })
        .done(function (result) {
            $('#MainframeContents').html(result);
        });
}

锚标签所在的剃须刀页面名为Area/Details/ 123456-45646-123132 (其中123456-45646-123132是GUID)。问题是,我不想硬编码url,因为GUID可以更改。

我试过了

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
href="@Url.Page("Area/Details/" + @Model.wItem.GUID,  "ShowDetails")"

但是在javascript中,href是空的。

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2019-11-27 07:31:04

我在这里发布了解决方案,它比评论要好。

最初我使用这个href:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
href="@Url.Page("Area/Details/" + @Model.wItem.GUID,  "ShowDetails")">  

因为我使用的是Razor而不是MVC。阅读MS (https://learn.microsoft.com/en-us/aspnet/core/mvc/controllers/areas?view=aspnetcore-3.0)时,我注意到我使用的是区域,所以正确的href应该是:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
href='@Url.Page("Details", "ShowDetails",  new { area = "Area", position = item.Position, GUID = @Model.wItem.GUID })'

详细信息:是我的页面的名称

ShowDetails:是我的GET处理程序的名称

区域:是我所在地区的名字吗?

位置和GUID:是我的GET处理程序的参数。

结果href将类似于:

/en/Area/Details/45646546-1213-156416-45646-5464666?position=1&handler=ShowDetails

打电话给我的负责人:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
public async Task<IActionResult> OnGetShowDetailsAsync(string GUID, string position)
{
    ...
}

希望这能为其他人节省时间。

感谢@Rory McCrossan给她的建议。

票数 1
EN

Stack Overflow用户

发布于 2019-11-27 05:53:17

您可以使用href属性来完成此操作。你说它对你不起作用,但你却没有展示你试过的东西。使用attr()将获得所需的值。您还试图在GET请求中发送JSON,这是不太正确的,特别是当您需要的数据已经在href URL中时。

还要注意,您应该避免使用onclick和其他事件属性,因为它们已经过时了。在使用jQuery时,您可以很容易地轻松地附加事件处理程序。

最后,async: false是非常糟糕的实践,不应该使用。在任何情况下都不需要它,因为您已经实现了done()方法。说了这么多,试试这个:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<a class="nav-link text-dark text-center p-0 collapsed"
  data-toggle="collapse"
  data-target="#Details"
  aria-expanded="true"
  aria-controls="Details"
  href="@Url.Page("Area/Details/" + @Model.wItem.GUID,  "ShowDetails")">       
  @item.Position
</a>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
jQuery(function($) {
  $('.nav-link').on('click', function(e) {
    e.preventDefault(); // stop the standard link behaviour
    $.ajax({
      url: $(this).attr('href'),
      type: 'GET',
      cache: false,
      headers: {
          RequestVerificationToken:  $('input:hidden[name="__RequestVerificationToken"]').val()
      }
    }).done(function(result) {
      $('#MainframeContents').html(result);
    });
  });
});
票数 0
EN

Stack Overflow用户

发布于 2022-06-22 05:50:08

也许这会对某些人有所帮助,但最近版本的剃须刀允许将动态值从您的模型直接传递到url,并且在url的两侧。是的,这就像魔法.

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<a class="nav-link" href='https://www.whatever.com/tracking?trackNumber=@Model.trackNumber&lang=EN' target="_blank" )"></a>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/59071656

复制
相关文章
【Groovy】集合遍历 ( 调用集合的 any 函数判定集合中是否有指定匹配规则的元素 | 代码示例 )
集合的 any 函数 , 用于判断集合中是否有 满足闭包中的条件 的元素 , 返回一个布尔值 , true 或者 false ;
韩曙亮
2023/03/30
1.3K0
【Groovy】集合遍历 ( 调用集合的 any 函数判定集合中是否有指定匹配规则的元素 | 代码示例 )
Python 中几种属性访问的区别
python的提供一系列和属性访问有关的特殊方法:__get__, __getattr__, __getattribute__, __getitem__。本文阐述它们的区别和用法。
Python猫
2019/08/06
2.1K0
Python 中几种属性访问的区别
tensorflow中的slim函数集合
对n维logit张量的第n维执行softmax。对于二维logits,这可以归结为tf.n .softmax。第n个维度需要具有指定数量的元素(类的数量)。
狼啸风云
2019/08/31
1.6K0
pymongo中针对指定集合更新validator规则
  在确保pymongo中所使用的用户对目标数据库具有dbAdmin之类的管理权限的前提下(若无权限,可在mongo中执行db.grantRolesToUser("目标用户名", [{ role: "dbAdmin", db: "目标数据库名" }])进行权限添加),利用command()执行collMod命令进行更新,例如:
Feffery
2023/10/18
1130
MySQL中的时间函数用法集合
这里是一个使用日期函数的例子。下面的查询选择了所有记录,其date_col的值是在最后30天以内:
用户7657330
2020/08/14
2.6K0
属性访问
通常可以通过点(.)操作符的形式去访问对象的属性,关于属性的访问,也有相应的魔法方法来管理,
天钧
2019/07/28
7430
迭代器模式(控制访问集合中的元素)
现在我们需要思索,JDK是怎么做到这一切的?现在让我们先利用迭代器实现一个数组类型Array,这个类型需要支持添加、移除、遍历操作。
幺鹿
2018/08/21
1.3K0
迭代器模式(控制访问集合中的元素)
外部访问 Vue 中的 methods方法及其属性
如上面Vue的使用的话,可以使用 vm.add() 进行访问,vm 就是当前vue实例的对象。
White feathe
2021/12/08
5.6K0
外部访问 Vue 中的 methods方法及其属性
【Android Gradle 插件】Gradle 扩展属性 ④ ( 扩展属性访问方式 | 直接访问扩展属性 | 通过 ext 对象访问 | 在 gradle.properties 中定义扩展属性 )
也可以 通过 project.ext.hello 访问该扩展属性 , 代码如下 :
韩曙亮
2023/03/30
2.5K0
【Android Gradle 插件】Gradle 扩展属性 ④ ( 扩展属性访问方式 | 直接访问扩展属性 | 通过 ext 对象访问 | 在 gradle.properties 中定义扩展属性 )
Java中Map集合的四种访问方式
public static void main(String[] args) { Map<String, String> map = new HashMap<String, String>(); map.put("1", "value1"); map.put("2", "value2"); map.put("3", "value3"); //第一种:普遍使用,二次取值 System.out.println("通过Map.keySet遍历key和value:");
yesr
2019/03/14
8010
私有属性/方法的访问
在属性/方法名前有双下划线的,称为私有属性/方法,私有属性/方法外部不能直接访问,
py3study
2020/01/17
1.9K0
盘点JavaScript中BigIn函数常见的属性
创建 bigint 的方式有两种:在一个整数字面量后面加 n 或者调用 BigInt 函数,该函数从字符串、数字等中生成 bigint。
前端进阶者
2021/10/20
6950
PHP:返回指定页码数集合项的新集合
PHP内置了 array_slice(array,start,length,preserve) 方法就可以实现这个了,然后还可以简单封装一下
Alone88
2019/10/21
7190
java8之提取集合中每个对象的属性
要提取属性的话,用Stream中的map,然后使用方法引用,就可以了 例如Student类中有name属性
周杰伦本人
2023/10/12
3140
kotlin修炼指南8—集合中的高阶函数
Kotlin对集合操作类新增了很多快捷的高阶函数操作,各种操作符让很多开发者傻傻分不清,特别是看一些Kotlin的源码或者是协程的源码,各种眼花缭乱的操作符,让代码完全读不下去,所以,本文将对Kotlin中的集合高阶函数,进行下讲解,降低大家阅读源码的难度,下面看几个用的比较多的高阶函数使用。
用户1907613
2022/12/12
5110
【Groovy】集合声明与访问 ( 使用 [] 创建 ArrayList 和 LinkedList 集合 | 集合赋初值 | 使用下标访问集合 | 使用 IntRange 作为下标访问集合 )
将 [] 赋值给变量 , 默认就是创建 ArrayList 集合 ; 在下面的代码中 , 打印 [] 变量类型 ;
韩曙亮
2023/03/30
1.7K0
【Groovy】集合声明与访问 ( 使用 [] 创建 ArrayList 和 LinkedList 集合 | 集合赋初值 | 使用下标访问集合 | 使用 IntRange 作为下标访问集合 )
分享 5 种在 JS 中访问对象属性的方法
点属性访问器是在 JavaScript 中访问对象属性的最常见和最直接的方式。它使用点 (.) 表示法来访问对象的特定属性。
前端达人
2023/08/31
1.9K0
分享 5 种在 JS 中访问对象属性的方法
在PHP中如何为匿名函数指定this?
关于闭包匿名函数,在JS中有个很典型的问题就是要给它绑定一个 this 作用域。其实这个问题在PHP中也是存在的,比如下面这段代码:
硬核项目经理
2020/05/13
2.2K0
opencv访问图像(MAT)的属性
淼学派对
2023/10/14
1870
opencv访问图像(MAT)的属性
指定HOST访问特定网址
平时测试过程中,经常会需要编辑HOST文件来访问特定的服务器。实际上,这个过程也可以在代码中完成。这个实现方式的根本,就是在HTTP请求的Header中,指定请求的HOST。
大江小浪
2021/03/11
3.8K0

相似问题

使用角度上的renderer2在按钮中设置(单击)属性

19

在`compareWith`函数中以角度访问类属性

12

Renderer2角度需要吗?

10

角度8中接口中的访问集合

21

访问项集合中的属性

10
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文