2014-08-28 361 views
0

按鈕關聯腳本我有一個按鈕和一個腳本:在ASP .NET MVC Razor視圖

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

當我點擊按鈕的腳本將不運行/被叫/調用。如何使這個按鈕調用這個腳本?

完全視圖_Survey1.html這是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 /> 

SubmitSurvey方法PersonController

public void SubmitSurvey(int personId, int surveyId) { 
     System.Diagnostics.Debug.WriteLine("UPDATING DATABASE"); 

    } 

結果是,點擊按鈕後,我得到錯誤說SubmitClick避風港未找到:

enter image description here

Details.cshtml(_Survey1.cshtml)被渲染到裏面。

@model WebApplication2.Models.Person 

@{ 
    ViewBag.Title = "Details"; 
} 

<script> 
    function BtnOnclick() { 
     $.ajax({ 
      type: 'POST', 
      url: '@Url.Content("~/Person/_Survey1")', 
      data: { 
       id: '@Model.Id' 
      }, 
      success: function (data) { 
       $('#divpopup').css("display", "block"); 
       $('#btnExpand').css("display", "none"); 
       $('#divpopup')[0].innerHTML = data; 
      } 
     }); 
    } 
    function CollapseDiv() { 
     $('#divpopup').css("display", "none"); 
     $('#btnExpand').css("display", "block"); 
    } 




</script> 
<h2>Details</h2> 

<div> 
    <h4>Person</h4> 
    <hr /> 
    <dl class="dl-horizontal"> 
     <dt> 
      @Html.DisplayNameFor(model => model.FirstName) 
     </dt> 

     <dd> 
      @Html.DisplayFor(model => model.FirstName) 
     </dd> 

     <dt> 
      @Html.DisplayNameFor(model => model.LastName) 
     </dt> 


     <dd> 
      @Html.DisplayFor(model => model.LastName) 
     </dd> 

     <dt> 
      @Html.DisplayNameFor(model => model.CellNumber) 
     </dt> 

     <dd> 
      @Html.DisplayFor(model => model.CellNumber) 
     </dd> 

     <dt> 
      @Html.DisplayNameFor(model => model.SecondaryPhoneNumber) 
     </dt> 

     <dd> 
      @Html.DisplayFor(model => model.SecondaryPhoneNumber) 
     </dd> 

     <dt> 
      @Html.DisplayNameFor(model => model.Address) 
     </dt> 

     <dd> 
      @Html.DisplayFor(model => model.Address) 
     </dd> 

     <dt> 
      @Html.DisplayNameFor(model => model.BirthDate) 
     </dt> 

     <dd> 
      @Html.DisplayFor(model => model.BirthDate) 
     </dd> 

     <dt> 
      @Html.DisplayNameFor(model => model.Pesel) 
     </dt> 

     <dd> 
      @Html.DisplayFor(model => model.Pesel) 
     </dd> 

     <dt> 
      @Html.DisplayNameFor(model => model.Notes) 
     </dt> 

     <dd> 
      @Html.DisplayFor(model => model.Notes) 
     </dd> 
     <dt> 
      @Html.DisplayNameFor(model => model.Status) 
     </dt> 
     <dd> 
      @Html.DisplayFor(model => model.Status.Name) 
     </dd> 
     <dt> 
      @Html.DisplayNameFor(model => model.PersonalDataProcessing) 
     </dt> 
     <dd> 
      @Html.DisplayFor(model => model.PersonalDataProcessing) 
     </dd> 
    </dl> 
</div> 
<!--BEGIN--> 
<p> 
    <input type="button" value="Expand" id="btnExpand" 
      onclick="javascript:BtnOnclick();" /> 
</p> 
<div id="divpopup" style="display:none"> 

</div> 
<!--END--> 

<p>@Html.ActionLink("Call Cell Phone", "Call", new { id = Model.Id, number = Model.CellNumber }, new { @class = "btn btn-default" })</p> 
<p> @Html.ActionLink("Call Client's Secondary Number »", "Call", new { id = Model.Id, number = Model.SecondaryPhoneNumber }, new { @class = "btn btn-default" })</p> 
<p> 
    @Html.ActionLink("Edit", "Edit", new { id = Model.Id }) 
    @Html.ActionLink("Back to List", "Index") 
</p> 
+0

有一個答案,發生了什麼? – Yoda 2014-08-28 23:47:39

+1

始終包含按鈕的'type'屬性。不同的瀏覽器使用不同的默認值,因此可能默認提交。'' – 2014-08-28 23:53:55

+0

@StephenMuecke我完全更新了原始帖子 - >代碼和說明。我向HTML添加了'type ='button''。它防止了死亡的黃色屏幕,沒有運行時錯誤,但點擊後沒有任何反應,控制檯上沒有任何輸出或任何東西。 – Yoda 2014-08-29 00:06:34

回答

3

foreach循環刪除腳本,並在頁面的底部添加一個腳本。在循環中,將要傳遞給post方法的值分配爲該按鈕的data屬性,以便可以在腳本中訪問它們。例如

@foreach (var survey in Model.Item2) { 
    using (Html.BeginForm()) { 
    .... 
    <button class='mybutton' type='button' data-personid="@Model.Item.ID" data-surveyid="@Survey.ID">Click Me</button> 

和腳本

$('.mybutton').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'); 
    }); 
}); 

注:POST方法應該返回JSON數據表明成功與否,所以你可以測試的結果 - 例如return Json(true)return Json(null),然後在腳本if(data) { alert('updated'); } else { alert('oops'); }

+0

我已經嘗試過你已發佈的內容。沒有錯誤,但是Java腳本函數從未被調用過。我修改了一點。當前的代碼在原始文章中。我給你的函數命名,並添加:onclick =「javascript:SubmitClick()」'到按鈕。這會產生運行時錯誤,表示沒有找到'SubmitClick'的定義。我在2分鐘內發佈OP中的屏幕截圖。 – Yoda 2014-08-29 18:33:29

+0

哦,我的代碼使用你的解決方案後看起來像這樣:http://wklej.org/id/1452605/沒有任何事情發生。 – Yoda 2014-08-29 18:43:22

+0

'_Survey1.html' **是PartialView **,它從OP底部的'Details.cshtml'位置被調用。 – Yoda 2014-08-29 18:48:57

0

請勿將腳本放在剃鬚刀塊中,並儘可能將所有腳本放在頁面的底部,以便更好地改善頁面響應。

+0

我會在2小時內回來工作(在凌晨2點問問題),但是我把它放在那裏的原因是在'foreach'循環中存在局部變量'survey'。這就是爲什麼我把它放在那裏,我不知道如何將它作爲參數傳遞給JQuery方法。 – Yoda 2014-08-29 09:00:06

+0

好吧,讓我們考慮在JavaScript中重構提交方法,然後將item.id和survey.id作爲參數傳遞給jQuery方法。這是我的方式,如果你有方便的時間,你可以嘗試一次。 – 2014-08-29 14:05:53

+0

我還不知道正確的語法。你能介紹一下如何去做 ? – Yoda 2014-08-29 17:45:46

0

我不得不把腳本放在Details.cshtml這是主視圖到_Survey1.cshtml(部分視圖)。 也把這個腳本Details.csthml引起的服務器試圖執行它,當我去Details.cshtml(之前甚至我點擊了一個按鈕)導致運行時錯誤:

$('.mybutton').click(function() { 
    var pid = $(this).data('personid'); 
    var sid = $(this).data('surveyid'); 
    var url = '@UrlAction("SubmitSurvey", "Person")'; 
    $.post(url, { personid: pid, surveyid: sid }, function(data) { 
    alert('updated'); 
    }); 
}); 

所以我把它改爲:

function SubmitClick(pid, sid) {  
     var url = '@Url.Action("SubmitSurvey", "Person")'; 
     $.post(url, { personid: pid, surveyid: sid }, function (data) { 
      alert('updated' + pid + " " + sid); 
     }); 
    } 

我不得不添加參數,因爲沒有它們,pidsid未定義,即使在按鈕中定義了data-personid="@Model.Item1.Id" data-surveyid="@survey.Id"

按鈕看起來像:

<button class='mybutton' type='button' onclick="javascript:SubmitClick(@Model.Item1.Id, @survey.Id.);" >Click Me</button>