调用相同的函数

Question

我希望无论单击哪个按钮，我都想调用相同的函数。 现在我在 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>

我的控制器：

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

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

脚本 我从查看使用助手部分调用我的脚本

@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

您应该尝试这种方式，因为您的按钮类型根据当前场景 <a> 和 button 不同，因此您可以尝试以下方式。

脚本：

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

输出：

注意： <input type="text" class="inputVal" id="getValue" value="@item.StudentID" hidden /> 不再需要了。

希望它能彻底解决您的问题。

Answer 2

首先使用button 类型而不是a。通过该更改，您可以通过两种方式使用 onclick 事件：

第一个选择：

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

function listCoaches() { ... }

第二选择：

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

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