2014-08-29 94 views
0

这是字面上第五天我试图解决这个问题。函数SubmitSurvey的定义还没有找到,但我定义了它

我尝试在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

+0

出于好奇,你有jQuery所以你为什么直接在HTML元素上编写事件,比如它是1999? – 2014-08-29 18:28:04

+0

你可以发布视图生成的整个HTML吗? – 2014-08-29 18:34:21

+0

[在ASP .NET MVC Razor视图中将关联脚本与按钮](http://stackoverflow.com/questions/25559610/associating-script-with-a-button-in-asp-net-mvc-razor -view) – 2014-08-29 18:35:41

回答

1

我没有看到你的代码中的任何明显的问题,但考虑到你在一个次优的方式处理这个,重构你的代码可能只是通过提高建立解决问题。

首先,不要直接在视图中嵌入脚本。我知道你需要包含一个通过Razor助手生成的URL,但我在这里讨论的是使用节,以便您的脚本被包含在文档的标准位置:

因此,在你的观点:

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

然后在你的布局:

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

这将确保1)所有的JavaScript,飞到哪里,它应该结束标记前右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。