在ASP .NET MVC Razor视图

Question

按钮关联脚本我有一个按钮和一个脚本：

<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避风港未找到：

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> 

Answer 1

从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'); }

Answer 2

请勿将脚本放在剃须刀块中，并尽可能将所有脚本放在页面的底部，以便更好地改善页面响应。

Answer 3

我不得不把脚本放在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); 
     }); 
    } 

我不得不添加参数，因为没有它们，pid和sid未定义，即使在按钮中定义了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>