javascript - 如何将动态创建的超链接的 css 值传递给另一个页面

标签 javascript html css asp.net asp.net-mvc-4

我是网络开发的初学者。我坚持传递动态值 单击时转到另一个页面。我唯一需要的就是被点击 超链接在另一个页面中的值。请帮我解决这个问题。

第一页:

@for (int j = 0; j < listOfUrls.Count; j++)
{
    <a style="background: #fff url(@listOfUrls[j]) no-repeat center;"
       href="nextPage" 
       onclick="@*Pass clicked listOfUrls[j]*@" ></a>
}

下一页:

<p>@*Here I need to get the clicked value of hyperlink from previous page*@</p>

最佳答案

我创建了一个用于演示的简单 Controller 。

Demo Controller

从这个 Controller,我将集合发送到 View。

public class DemoController : Controller
{
    // GET: Demo
    public ActionResult Index()
    {
        List<DemoModel> list = new List<DemoModel>()
        {
            new DemoModel {Id = "1", Link = "One"},
            new DemoModel {Id = "2", Link = "Two"},
            new DemoModel {Id = "3", Link = "Three"},
            new DemoModel {Id = "4", Link = "Four"}
        };

        return View(list);
    }
}

我要发送到下一页的值是 ID,因为我发送的是链接的值。

@model  List<WebApplication9.Models.DemoModel>
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">Panel Heading</div>
            <div class="panel-body">

                @for (int i = 0; i < Model.Count; i++)
               {
                    <a href="@Url.Action("Index", "Demo2", new {@id = Model[i].Link})">
                        #Link to Page @Model[i].Link
                    </a>

                    <br />
                }
            </div>
        </div>
    </div>
</body>
</html>

渲染 View

enter image description here

我们将值发送到 Demo2Controller,其中它具有将 ID 作为输入的索引操作方法。

public class Demo2Controller : Controller
{
    // GET: Demo2
    public ActionResult Index(string id)
    {
        if (!string.IsNullOrEmpty(id))
        {
            TempData["message"] = id;
        }
        else
        {
            TempData["message"] = "Not Clicked";
        }

        return View();
    }
}

Index View (Demo2)

    @{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
</head>
<body>
    <div class="alert alert-success">
        <strong>Success!</strong> @TempData["message"]
    </div>
</body>
</html>

enter image description here

关于javascript - 如何将动态创建的超链接的 css 值传递给另一个页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49647311/

相关文章:

javascript - TypeAhead.js 没有显示任何输出 Rails?

javascript - 使用jquery问题验证和提交表单

html - 每个链接的格式都像 Html 中的 Navbar

缩小/放大时 HTML 图像不会减小尺寸,它在 Bootstrap 4 中没有响应

html - 我们可以在同一个 div 中使用 row 和 col-md-12 吗?或者它应该在父子 div 中?

CSS Float Images,删除每行的边距

javascript - 为什么我的 Google Plus javascript 无法验证?

javascript - NodeJS - 如何匹配一次?

javascript - 超时后自动滚动

jquery - jqGrid : How to add CSS class for a row with specific criteria