2014-08-29 59 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。

相關問題