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

时间:2014-05-07 07:40:09

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

我想在点击按钮/网址时为ID指定一个特定值 这样我就可以通过将id传递给action链接来显示基于此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"必须基于点击哪个按钮的动态值。

2 个答案:

答案 0 :(得分: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分配给客户端的锚标记。所以最后的网址应该是这样的 -

/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>

运行代码时,您应该看到以下视图 -

enter image description here

输入值并单击锚标记 -

enter image description here

结果,您将解析所有结果 -

enter image description here

答案 1 :(得分:1)

您可以使用您的函数this传递onclick="bb7(this);" 然后在JavaScript部分中使用setAttribute

中的bb2(this){this.setAttribute("id","someID");}