CODEWITHSUNDEEP
javascriptasp.netasp.net-mvcrazor
Hanouf D.
Hanouf D.

Reputation: 49

pass ID when button is clicked to Action link

I want to assign a certain value for an ID when button/url is clicked.
So that I can display a dynamic list based on this id by passing the id to action link.

Sample of my code (button)

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

The call for action link

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

"MenuId" must by a dynamic value based on which button is clicked.

Upvotes: 0

Views: 5028

Answers (2)

Anahit Serobyan
Anahit Serobyan

Reputation: 432

You can pass this using your function onclick="bb7(this);" then in JavaScript part use setAttribute in you function: bb2(this){this.setAttribute("id","someID");}

Upvotes: 1

ramiramilu
ramiramilu

Reputation: 17182

Here goes my solution, use Html.ActionLink() - 

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

Then say you have image control like this - 

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

Then you have simple JQuery script to replace query string in this way - 

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

In the above script, when you click on the image element, its id (b7) will be used to formulate the anchor tag url. so now when image was clicked, a new url will be assigned to anchor tag on the client side using JQuery. So the final url should be something like this - 

/MenuItem/Menu/b7

UPDATE: As per your comment, I am presenting a simple demonstration on how to use JQUERY AJAX to make a GET request with a parameter and get results back on to the UI.

Lets say you have a controller which returns 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);
    }

Then you can call this controller action in a button click using JQuery Ajax in the following way. In your implementation you should get that dynamic value instead of input text control. For demo purpose I used Input text to get a value and pass it to controller action. 

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

When you run the code, you should see following view -

enter image description here

When you enter the value and click on anchor tag -

enter image description here

And as a result, you will get all the results parsed -

enter image description here

Upvotes: 1

Related Questions