未找到函数 SubmitSurvey 的定义，但我定义了它答案

【问题标题】：Definition of Function SubmitSurvey have not been found but I defined it未找到函数 SubmitSurvey 的定义，但我定义了它
【发布时间】：2014-08-29 18:22:36
【问题描述】：

这是我尝试解决这个问题的第五天。

我尝试通过 Razor 视图中的按钮调用方法，不重定向到其他视图，只需在单击按钮时调用一个简单的方法。

脚本如下：

<script>
   function SubmitClick () {
        var pid = $(this).data('personid');
        var sid = $(this).data('surveyid');
        var url = '@Url.Action("SubmitSurvey", "Person")';
        $.post(url, { personid: pid, surveyid: sid }, function (data) {
            alert('updated');
        });
    };
</script>

按钮看起来像：

  <button class='mybutton' type='button' data-personid="@Model.Item1.Id" data-surveyid="@survey.Id" onclick="javascript:SubmitClick()">Click Me</button>

PersonController 方法如下所示：

public void SubmitSurvey(int personId, int surveyId) {
    System.Diagnostics.Debug.WriteLine("UPDATING DATABASE");

}

完整视图（这是PartialView）：

<script>
   function SubmitClick () {
        var pid = $(this).data('personid');
        var sid = $(this).data('surveyid');
        var url = '@Url.Action("SubmitSurvey", "Person")';
        $.post(url, { personid: pid, surveyid: sid }, function (data) {
            alert('updated');
        });
    };
</script>

@using WebApplication2.Models
@model   System.Tuple<Person, List<Survey>>

<hr />
<h1>Surveys</h1>
<input type="button" id="Coll" value="Collapse" onclick="javascript:CollapseDiv()" />
@*<p>
        Number of Surveys: @Html.DisplayFor(x => Model.Item2.Count)
    </p>*@

@{int i = 1;}
@foreach (var survey in Model.Item2) {
    using (Html.BeginForm()) {
        <h2>Survey @(i)</h2>
        <p />
        @Html.EditorFor(x => survey.Questions)
        <button class='mybutton' type='button' data-personid="@Model.Item1.Id" data-surveyid="@survey.Id" onclick="javascript:SubmitClick()">Click Me</button>
    }
    i++;
    <hr style="background-color:rgb(126, 126, 126);height: 5px" />
}
<hr />

问题是当我点击按钮时：

我收到运行时错误，说没有定义："SubmitClick"。

【问题讨论】：

出于好奇，您有 jQuery，那么为什么要像 1999 年那样直接在 HTML 元素上编写事件？
你能把视图生成的整个HTML贴出来吗？
Associating script with a button in ASP .NET MVC Razor View 的可能重复项
@ErikPhilips 我不知道我尝试了很多方法来解决这个问题。其中一些没有给出任何结果（没有错误，也没有发生任何事情），所以没有调用 jquery 函数。在这里，我收到一条错误消息。你能建议如何解决这个问题，我真的厌倦了这个
@ErikPhilips 我试过了：wklej.org/id/1452605 就像 Stephen Muecke 说的，但什么也没发生。

标签： javascript jquery .net asp.net-mvc razor

【解决方案1】：

我没有在您的代码中看到任何明显的问题，但鉴于您以次优方式处理此问题，重构您的代码可能会通过改进设置来解决问题。

首先，不要将脚本直接嵌入到视图中。我知道您需要包含通过 Razor 助手之一生成的 URL，但我在这里谈论的是使用部分，以便您的脚本包含在文档中的标准位置：

所以，在你看来：

@section Scripts
{
    <script>
        // your code here
    </script>
}

然后在你的布局中：

    <!-- global scripts like jQuery here --> 
    @RenderSection("Scripts", required: false)
</body>

这可以确保 1) 你所有的 JavaScript 都在它应该去的地方，就在结束 body 标记之前，以及 2) 你的所有 JavaScript 都在它可能依赖的各种全局脚本（jQuery）之后运行 )。

其次，在全局范围内定义事物通常是个坏主意，例如您正在使用 SubmitClick 函数。如果另一个脚本出现并在全局范围内定义了它自己的 SubmitClick 函数，那么你的脚本就会被冲洗掉，反之亦然。相反，您想使用命名空间或闭包。

命名空间

var MyNamespace = MyNamespace || {};

MyNamespace.SubmitClick = function () {
    ...
}

关闭

(function () {
    // your code here
})();

当然，如果你使用这样的闭包，那么你的 SubmitClick 函数就真的不存在了，因为它不再在全局范围内，这让我...

第三，不要使用on* HTML 属性。将功能动态绑定到元素要好得多，例如：

(function () {
    $('.mybutton').on('click', function () {
        var pid = $(this).data('personid');
        var sid = $(this).data('surveyid');
        var url = '@Url.Action("SubmitSurvey", "Person")';
        $.post(url, { personid: pid, surveyid: sid }, function (data) {
            alert('updated');
        });
    });
})();

现在，您已经实现了零范围污染，并且行为在定义行为的地方被绑定，而不是紧密耦合您的 HTML 和 JavaScript。

【讨论】：