如何将动态创建超链接的CSS背景URL值传递至另一页面

嘿，我来帮你搞定这个问题！作为Web开发新手，遇到动态元素的传值问题很正常，咱们用最简单直接的方案来解决：

方法1：通过URL查询参数传递（最适合你的场景） #

这种方式不需要额外的JS，直接把要传递的值拼到跳转的URL里，新手友好还不容易出错。

修改第一页代码： #

你需要把listOfUrls[j]作为查询参数加到href里，同时用Uri.EscapeDataString处理特殊字符（比如URL里的斜杠、空格），避免出现乱码问题：

@for (int j = 0; j < listOfUrls.Count; j++) 
{
    var currentUrl = listOfUrls[j];
    <a style="background: #fff url(@currentUrl) no-repeat center;" 
       href="nextPage?imageUrl=@Uri.EscapeDataString(currentUrl)" ></a>
}

第二页获取值： #

根据你用的ASP.NET技术（Razor Pages/MVC），有两种简单的获取方式：

如果是Razor Pages：

直接通过Request.Query读取URL参数：

@{
    // 用?处理可能为空的情况，避免页面报错
    string? clickedUrl = Request.Query["imageUrl"];
}
<p>@clickedUrl</p>

如果是MVC：

在控制器的Action方法里接收参数，再传递到视图展示：

public IActionResult NextPage(string imageUrl)
{
    // 把值存到ViewBag或者ViewModel里
    ViewBag.ClickedUrl = imageUrl;
    return View();
}

然后在视图里直接渲染：

<p>@ViewBag.ClickedUrl</p>

方法2：通过POST表单传递（隐藏URL参数的场景） #

如果你不想让传递的值显示在URL地址栏里，可以用表单提交的方式，把a标签改成按钮（样式保持和原来的链接一致即可）：

修改第一页代码： #

@for (int j = 0; j < listOfUrls.Count; j++) 
{
    var currentUrl = listOfUrls[j];
    <form action="nextPage" method="post" style="display: inline;">
        <input type="hidden" name="imageUrl" value="@currentUrl" />
        <button type="submit" style="background: #fff url(@currentUrl) no-repeat center; border: none; cursor: pointer;"></button>
    </form>
}

第二页获取值（Razor Pages为例）： #

在PageModel里绑定属性来接收POST的值：

public class NextPageModel : PageModel
{
    [BindProperty]
    public string? ImageUrl { get; set; }

    public void OnPost()
    {
        // 这里可以对传递过来的ImageUrl做后续处理
    }
}

然后在视图里展示：

<p>@Model.ImageUrl</p>

为什么你原来的onclick没生效？ #

你原来的onclick里写的注释是无效的，而且Razor语法在onclick属性里直接绑定变量容易出现上下文问题，还要处理JS动态绑定，反而不如直接用URL参数或者表单提交简单直接～

内容的提问来源于stack exchange，提问作者Abdullokh