Question

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

我尝试通过Razor 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");

}

完整视图（这是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 />

问题在于，当我点击按钮时： enter image description here

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

enter image description here

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

函数的定义尚未找到SubmitSurvey，但我对其进行了定义

1 个答案: