方法被调用两次

Question

我做错了什么？ 我的方法被调用了两次。 我第一次得到 Id，这是正确的行为 我第二次得到 Null 我不明白什么是正确的解决方法？

我的看法

 <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 class="btn btn-primary" data-index="@item.Id" name="link">Go to anywhere</a>
                        </div>
                    </div>
                </div>
            </div>
        }
    </div>
</div>

我的控制者

[HttpGet]
public ActionResult ListCoach(int id)
{    
    if (id != null)
    {
        var ChoachList = _TraningService.Coach(id);
        return View(ChoachList);
    }

    return HttpNotFound();

}

脚本 我在我的视图上使用脚本使用帮助器@Section {}

@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: '/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");
                }
            });
        }
        $(document).ready(function () {
            $("a[name=link]").on("click", function () {
                var valueOfClickedTag = $(this).data("index");
                alert("Clicked: " + valueOfClickedTag);
                var callFunc = PassToContoller(valueOfClickedTag)
            });

            $(":button[id=GoToAnywhere3]").on("click", function () {
                var valueOfClickedBtn = $(this).data("index");
                var callFunc = PassToContoller(valueOfClickedBtn)
            });
        });
    </script>
}

如果我使用该方法： 我无法进入 View ListCoach 我可以返回 Json on My View 吗？

[HttpGet]
    public JsonResult ListCoach(int id)
    {
        var ChoachList = _TraningService.Coach(id);

        return Json(ChoachList,JsonRequestBehavior.AllowGet);
    }

Answer 1

您的代码似乎没问题，理论上，您的操作不应调用两次，但我想向您展示一些方法来解决问题：

1. 当在标签网络中的 chrome 开发者工具中调用服务器时，您会看到一条记录，其中有一个名为 Initiator 的列，显示调用是由谁和在哪里创建的。
2. 您可以在函数 PassToContoller 的第一个函数中使用关键字 DEBUG 并查看堆栈以了解谁调用了您的函数

关于你的最后一个问题，我的回答是否定的，你不能使用这种方式将 JSON 对象传递给你的视图，但你可以通过 ViewBag 或 ViewData 在模型旁边传递 JSON 对象

Answer 2

在你的函数PassToContoller，在ajax success，你使用window.location.href = '/TrainingType/ListCoach';，所以在你调用函数之后，它会有两个请求，一个是ajax，一个是window.location.href。

如果你想在ajax中获取jsondata，你需要在ajax中使用dataType: "json",。 下面是一个传递json数据的demo：

行动：

[HttpGet]
        public JsonResult GetJson(int id)
        {
            return new JsonResult(new TestModel { Id=id,Name="Test"});
        }

查看：

<button onclick="test()">
    test
</button>
@section scripts
{
    <script>
        function test() {
           $.ajax({
                type: "GET",
                url: 'GetJson',
                data: { id: 1 },
                dataType: "json",
                success: function (data) {
                    console.log(data);
                    
                },
                error: function () {
                    $("#loader").fadeOut("slow");
                    console.log("error1");
                }
            });
        }
    </script>
}

结果：

更新：

您可以尝试使用表单将 Id 传递给操作（不使用 <a></a>）：

<form asp-action="GetJson" asp-route-id="@item.Id">
    <input type="submit" value="Go to anywhere" />
</form>

行动：

[HttpGet]
        public IActionResult GetJson(int id)
        {
            return View("Index",new List<TestModel> { new TestModel { Id = id, Name = "Test" } });
        }