Call the same function

Question

I would like whichever button been clicked I want to call the same function. for now I have six card on View but work only one first. Other dosent work

My view

<h2>Our workouts</h2>
    <div class="container">
        <div class="row">
            @foreach (var item in Model)
            {
                <div class="col-md-4">
                    <div class="card" style="width: 18rem;">
                        <img src="~/Content/not-found-image.jpg" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">@item.Name</h5>
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <div id="textButton">
                                @*<a href="~/TrainingType/ListCoach" id="btnSave1" class="btn btn-primary">Go to anywhere</a>*@
                                <a id="btnNewSave" class="btn btn-primary">Go to anywhere</a>
                                <input type="text" id="getValue" value="@item.Id" hidden />
                            </div>
                        </div>
                    </div>
                </div>
            }
        </div>
    </div>

My controller:

    [HttpGet]
    public ActionResult ListCoach(int? Id)
    {

        var ChoachList = _TraningService.Coach(Id);
        return View(ChoachList);
        
    }

script I call My script from View use helper section

@section scripts {
    <script>
        $(document).ready(function () {
            $("#btnNewSave").click(function () {
                var data = $("#getValue").val();
                $.ajax({
                    type: "GET",
                    url: '/TrainingType/ListCoach',
                    data: { id: data },
                    success: function (data) {
                        console.log(data);
                        window.location.href = '/TrainingType/ListCoach';
                        return data;
                    },
                    error: function () {
                        $("#loader").fadeOut("slow");
                        console.log("error1");
                    }
                });
            });
        });
    </script>
}

Answer 1

You should try this way, because your type of buttons are diffrent as per current scenario <a> and button so below way you could try.

Script:

@section scripts {
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
    <script>
        function PassToContoller(data) {
            //alert(data);
            $.ajax({
                type: "GET",
                url: '/UserLog/AnotherListCoach',
                data: { id: data },
                success: function (data) {
                    console.log(data);
                    window.location.href = '/appUser/ManageAccount';
                    return data;
                },
                error: function () {
                    $("#loader").fadeOut("slow");
                    console.log("error1");
                }
            });
        }
        $(document).ready(function () {
            $("a[name=link]").on("click", function () {
                var valueOfClickedTag = $(this).data("index");
                alert("Clicked On Anchor: " + valueOfClickedTag);
                var callFunc = PassToContoller(valueOfClickedTag)
            });
      
            $(":button[id=GoToAnywhere3]").on("click", function () {
                var valueOfClickedBtn = $(this).data("index");
                var callFunc = PassToContoller(valueOfClickedBtn )
            });
            


        });
    </script>
}

Razor HTML:

<div class="container">
    <div class="row">
        @foreach (var item in Model)
        {
            <div class="col-md-4">
                <div class="card" style="width: 18rem;">
                    @*<img src="~/Content/no_foto.png" class="card-img-top" alt="...">*@
                    <div class="card-body">
                        <h5 class="card-title">@item.StudentID</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <div id="textButton">
                            <a href="#"  class="btn btn-primary" data-index="@item.Name" name="link">Go to anywhere</a>
                            <a  class="btn btn-primary" data-index="@item.Name"  name="link">Go to anywhere</a>
                            <input class="btn btn-primary" type="button" id="GoToAnywhere3" data-index="@item.StudentID" value="Save" />
                            <input type="text" class="inputVal"  id="getValue" value="@item.Name"  hidden />
                        </div>
                    </div>
                </div>
            </div>
        }
    </div>
</div>

Output:

Note: <input type="text" class="inputVal" id="getValue" value="@item.StudentID" hidden /> is not needed anymore.

Hope it would completely resolve your problem.

Answer 2

Firstly make use of button type rather than an a. With that change, you can use the onclick event in two ways:

First opt:

<button class="btn btn-primary list-coaches" onclick="listCoaches()">List Coaches</button>

function listCoaches() { ... }

Second opt:

<button class="btn btn-primary list-coaches">List Coaches</button>

$('.list-coaches').click(function() { ... });