单击按钮时传递 ID 到操作链接答案

【问题标题】：pass ID when button is clicked to Action link单击按钮时传递 ID 到操作链接
【发布时间】：2014-05-08 15:50:46
【问题描述】：

我想在单击按钮/网址时为 ID 分配特定值。
这样我就可以通过将 id 传递给操作链接来显示基于此 id 的动态列表。

我的代码示例（按钮）

<a class="" href="/LaborerSearchByName/Index">
    <img src="/Content/images/b7.png" id="b7"
         onclick="bb7();"
         onmouseover="bigImg(this)"
         onmouseout="normalImg(this)">
</a>

行动呼吁链接

@Html.Action("Menu", "MenuItem", new { id = "MenuId"})

"MenuId" 必须是基于单击哪个按钮的动态值。

【问题讨论】：

标签： javascript asp.net asp.net-mvc razor

【解决方案1】：

这是我的解决方案，使用 Html.ActionLink() -

@Html.ActionLink("Menu Text", "Menu" ,"MenuItem", new { id = "MenuId" }, new { @id = "MenuId" })

然后说你有这样的图像控制 -

<img src="/Content/images/b7.png" id="b7"/>

然后你有一个简单的 JQuery 脚本以这种方式替换查询字符串 -

<script>
    $(document).ready(function () {
        $("#b7").click(function () {
            $("#MenuId").attr("href","/MenuItem/Menu/" + this.id);
        });
    });
</script>

在上面的脚本中，当你点击图片元素时，它的 id (b7) 将被用来制定锚标签 url。所以现在当点击图像时，将使用 JQuery 将一个新的 url 分配给客户端的锚标记。所以最终的 url 应该是这样的 -

/MenuItem/Menu/b7

更新：根据您的评论，我将演示如何使用 JQUERY AJAX 发出带有参数的 GET 请求并将结果返回到 UI。

假设您有一个返回 Json 的控制器 -

    public JsonResult GetJson(string MenuId)
    {
        List<string> urls = new List<string>();
        urls.Add("https://google.com");
        urls.Add("https://bing.com");
        return Json(urls, JsonRequestBehavior.AllowGet);
    }

然后您可以通过以下方式使用 JQuery Ajax 在按钮单击中调用此控制器操作。 在您的实现中，您应该获得该动态值而不是输入文本控件。出于演示目的，我使用输入文本来获取一个值并将其传递给控制器操作。

<input type="text" id="Menu" />
<a href="#" id="ClickMe">Click me</a>

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
    $(document).ready(function () {
        $("#ClickMe").click(function () {

            var o = new Object();
            o.MenuId = $("#Menu").val();

            jQuery.ajax({
                type: "POST",
                url: "@Url.Action("GetJson")",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(o),
                success: function (data) {ou parse data 
                    // This is how we parse returned json string
                    $.each(data, function (i, item) {
                        alert(data[i]);
                    });
                },
                failure: function (errMsg) { alert(errMsg); }
            });
        });
    });
</script>

当你运行代码时，你应该看到下面的视图 -

当您输入值并单击锚标记时 -

因此，您将得到所有解析的结果 -

【讨论】：

但我不能使用 ActionLink 助手，我只使用它，所以我可以根据我发送的 id 显示动态菜单列表，并且我想使用 id 传递 >> public ActionResult Menu (int id=0)
@HanoufD.，我不确定你为什么不能使用 ActionLink 助手。这是最简单的方法，我给了你一个可行的解决方案。
事情在 actionLink 助手中，我必须指定“文本”，而我必须调用操作 Menu(int id=0) 并将 ID 传递给它，这样它才能显示我的动态列表链接基于 actionHelper 附带的 ID。谢谢。
@HanoufD.，在这种情况下，您根本不需要 Html.Action()，您只需点击 Image Anchor，您需要对您的服务器控制器进行 JQuery AJAX GET 调用行动并取得成果。然后在 JQuery 中使用这些结果并将它们显示为链接。让我知道这是否符合您的要求，我可以给您一个简单的原型。
非常感谢。我现在正在阅读这个，我认为它可以解决我的问题。如果您能举例说明您的观点，我将更加感激。再次感谢。

【解决方案2】：

您可以使用您的函数onclick="bb7(this);" 传递this 然后在 JavaScript 部分使用 setAttribute 在你的函数中：bb2(this){this.setAttribute("id","someID");}

【讨论】：