javascript - 尚未找到函数 SubmitSurvey 的定义，但我定义了它

Question

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

我尝试通过 Razor View 中的按钮调用方法，没有重定向到其他 View ，只是在单击按钮时调用一个简单的方法。

脚本如下:

<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");

}

完整 View (这是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”。

Answer 1

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

首先，不要将脚本直接嵌入 View 中。我知道您需要包含通过 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 属性。最好将功能动态绑定(bind)到元素，例如:

(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。