为了账号安全,请及时绑定邮箱和手机立即绑定

如何将 JavaScript 函数链接到 HTML 锚标记

如何将 JavaScript 函数链接到 HTML 锚标记

C#
蝴蝶不菲 2022-07-10 16:18:26
如何将此 JavaScript 代码链接到 HTML 的锚标记:<script type="text/javascript">    $(document).on('click', 'a', function () {        $.ajax({            type: 'POST',            url: '@Url.Action("/brandsOfACategory")',            contentType: 'application/json; charset:utf-8',            data: JSON.stringify({ id: this.id })        })    });锚标签:<a id="@c.Key" href ="???" onclick="???">@c.Key</a>brandsOfACategory动作方法:[HttpPost]    public ActionResult brandsOfACategory(string id)    {        var result = db.Items.Where(x => x.Category.Name.Equals(id)).Select(x => x.BrandID).ToList();        var ListOfBrands = db.Brands.Where(t => result.Contains(t.BrandID)).ToList();        return View(ListOfBrands);    }brandsOfACategory.cshtml是:@model IEnumerable<OnlineStore.Models.Brand>@{    Layout = null;}<!DOCTYPE html><html><head>    <meta name="viewport" content="width=device-width" />    <title>Brands in a Category</title></head><body>    @foreach (var i in Model)    {        @i.Name.ToString();    }</body></html>
查看完整描述

2 回答

?
梦里花落0921

TA贡献1772条经验 获得超6个赞

你可以这样写锚标签-


<a id="@c.Key" href ="javascript:void(0);" onclick="postBrands(@c.Key)">@c.Key</a> //replace postBrands with desired function name

然后在 javascript 中定义将包含发布请求的函数-


function postBrands(key) {

        $.ajax({

            type: 'POST',

            url: '@Url.Action("/brandsOfACategory")',

            contentType: 'application/json; charset:utf-8',

            data: JSON.stringify({ id: key })

        })

}


查看完整回答
反对 回复 2022-07-10
?
繁花如伊

TA贡献2012条经验 获得超12个赞

您可以输入 href 然后href在客户端点击代码中获取:


<a id="@c.Key" href ="@Url.Action("actionName","controllerName")">@c.Key</a>

在点击事件中,您可以编写以下内容:


$(document).on('click', 'a', function () {

    var Url = $(this).attr("href"); // get href value

    $.ajax({

        type: 'POST',

        url: Url, // use it here

        contentType: 'application/json; charset:utf-8',

        data: JSON.stringify({ id: this.id })

    })


查看完整回答
反对 回复 2022-07-10
  • 2 回答
  • 0 关注
  • 100 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信