Определение функции SubmitSurvey не найдено, но я определил его

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 /> 

Проблема заключается в том, что при нажатии на кнопку:

я получаю сообщение об ошибке выполнения говоря, что нет никакого определения: "SubmitClick".

Answer 1

Я не вижу каких-либо очевидных проблем в коде, но при условии, что вы ее обработки в неоптимальной образом, рефакторинга кода может решить проблему только за счет улучшения настройки.

Во-первых, не вставляйте свои скрипты непосредственно в представление. Я понимаю, что вам нужно включить URL-адрес, сгенерированный с помощью одного из помощников Razor, но я здесь говорю об использовании разделов, чтобы ваши сценарии включались в стандартное местоположение в документе:

Итак, в вашем вид:

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

а потом в макете:

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

Это гарантирует, что 1) все ваши JavaScript идет туда, куда надо, прямо перед закрывающим тегом тела и 2) все ваши JavaScript запускаемых после различные глобальные сценарии, от которых, вероятно, будет зависеть (jQuery).

Во-вторых, обычно это плохая идея определить вещи в глобальном масштабе, например, вы делаете свою функцию SubmitClick. Если появляется другой скрипт и определяет его собственную функцию SubmitClick в глобальной области, то ваш получает hosed или наоборот. Вместо этого вы хотите использовать пространства имен или закрытие.

пространство имен

var MyNamespace = MyNamespace || {}; 

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

Закрытие

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

Конечно, если вы используете замыкание, как это, то вы SubmitClick функция действительно будет не существует, так как это уже не в глобальный масштаб, который подводит меня к ...

В-третьих, не используйте атрибуты HTML on*. Это гораздо лучше, чтобы связать функциональность элементов динамически, например:

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