MVC从部分视图调用函数不起作用

Question

这是我的第一个MVC应用程序，这一定很简单，但我一直在尝试让这项工作工作好几个小时..

我想做什么

我想在局部视图中显示一个表，并能够从父视图中删除项目。简单的版本看起来像这样（实际的应用程序不是关于水果）：

我现在拥有什么

部分视图（_FruitList.cshtml）

<div id="listOfFruits">
    <table class="table">
        <tr>
            <th class="active">Description</th>
            <th class="active">Amount</th>
        </tr>
        @foreach(var item in Model)
        {
            <tr>
                <td>@item.Description</td>
                <td>@item.Amount</td>
                <td><button class=".." onclick="d(@item.FruitID)">Delete</button></td>
            </tr>
        }
    </table>
</div>

父视图（Home.cshtml）

@section scripts
{
    <script type="text/javascript">
        $(document).ready(function (){
            function d(id){
                var url = "/Fruit/DeleteFruit/";
                $.post(url, {id: id})
                .done(function(response){
                    $("#listOfFruits").html(response);
                });
            }
        });



    </script>
}

@{Html.RenderPartial("_FruitList", Model.FruitList);}

Controller（FruitController.cs）

[HttpPost]
public ActionResult DeleteFruit(int id)
{
    //Delete the selected fruit
    FruitViewMode item = new FruitViewMode();

    return PartialView(item.FruitList);
}

我的问题

我可以在父视图中查看包含水果数据的表，但单击Delete按钮不会在父视图中调用d函数。 （Javascript和JQuery应该在部分视图中工作，因为我已经测试了alert和addClass并且它们工作正常）

我对此非常陌生，所以很可能我错过了一些基本的东西，但我错过了什么？

Answer 1

d()未在全局页面范围内声明，因此无法找到。在<script>标记的根目录中声明它（即不在document.ready内），以便从onclick

访问它

<script type="text/javascript">
    function d(id){
        var url = "/Fruit/DeleteFruit/";
        $.post(url, {id: id})
        .done(function(response){
            $("#listOfFruits").html(response);
        });
    }
</script>

Answer 2

我相信在过去我使用了HTML。 ActionLink ，用于通过Id删除内容的相同目标：

HTML.ActionLink method