将脚本与ASP .NET MVC Razor View中的按钮相关联 [英] Associating script with a button in ASP .NET MVC Razor View

问题描述

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

 < script> 
函数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> 
函数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> 
 
 @使用WebApplication2.Models 
 @model System.Tuple< Person，List< Survey>> 
 
< hr /> 
< h1>调查< / h1> 
< input type =buttonid =Collvalue =Collapseonclick =javascript：CollapseDiv（）/> 
 @ *< p> 
调查次数：@ Html.DisplayFor（x => Model.Item2.Count）
< / p> * @ 
 
 @ {int i = 1;} 
 @foreach（Model.Item2中的var调查）{
 using（Html.BeginForm（））{
< h2> Survey @（i）< / h2> 
< p /> 
 @ Html.EditorFor（x => survey.Questions）
 
 
< button class ='mybutton'type ='button'data-personid =@ Model。 Item1.Iddata-surveyid =@ survey.Idonclick =javascript：SubmitClick（）>点击我< / 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）; 
 
 $ b  

结果点击该按钮我收到错误消息说 SubmitClick 尚未找到：

Details.pshtml（_Survey1.cshtml）被渲染到里面

  @model WebApplication2.Models.Person 
 
 @ {
 ViewBag。标题=详情; 
} 
 
< script> 
函数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>详情< / h2> 
 
< div> 
< h4> Person< / h4> 
< hr /> 
< dl class =dl-horizo​​ntal> 
< 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 =buttonvalue =Expandid =btnExpand
 onclick =javascript：BtnOnclick（）; /> 
< / p> 
< div id =divpopupstyle =display：none> 
 
< / div> 
 <！ -  END  - > 
 
 
 @ Html.ActionLink（Call Cell Phone，Call，new {id = Model.Id，number = Model.CellNumber}，new {@class =btn btn -default}）< / p> 
< p> @ Html.ActionLink（呼叫客户的次号码，呼叫，新的{id = Model.Id，number = Model.SecondaryPhoneNumber}，新的{@class =btn btn-default}）< / p> 
< p> 
 @ Html.ActionLink（Edit，Edit，new {id = Model.Id}）
 @ Html.ActionLink（返回列表，索引）
 < ; / p为H. 
  

解决方案

从 foreach 循环，并在页面底部添加一个脚本。在循环中，将要传递给post方法的值分配给按钮的 data 属性，以便可以在脚本中访问它们。例如

  @foreach（Model.Item2中的var调查）{
 using（Html.BeginForm（））{ 
 .... 
< button class ='mybutton'type ='button'data-personid =@ Model.Item.IDdata-surveyid =@ Survey.ID>点击ME< /按钮> 
  

脚本

  $（'。mybutton'）。click（function（）{
 var pid = $（this）.data（'personid'）; 
 var sid = $（this） .data（'surveyid'）; 
 var url ='@ Url.Action（SubmitSurvey，Person）'; 
 $ .post（url，{personid：pid，surveysid：sid} ，函数（data）{
 alert（'updated'）; 
}）; 
}）; 
  

注意：post方法应该返回表示成功或否则的JSON数据，因此您可以测试结果 - for例如返回Json（true）或返回Json（null），然后在脚本 if （data）{alert（'updated'）; }其他{alert（'oops'）; }

I have a button and a script:

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

When I click the button the script is not run/called/invoked. How to make this button invoke this script?

Full view _Survey1.html this is 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 />

The SubmitSurvey method in PersonController:

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

    }

The result is that after clicking the button I get error saying that SubmitClickhaven't been found:

Details.cshtml (the _Survey1.cshtml) is rendered inside of it.

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

解决方案

Remove the script from the foreach loop and add a single script at the bottom of the page. In the loop, assign the values you want to pass to the post method as data attributes of the button so they can be accessed in the script. For example

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

And the script

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

Note: the post method should return JSON data indicating success or otherwise so you can test the result - for example return Json(true) or return Json(null), then in the script if(data) { alert('updated'); } else { alert('oops'); }

这篇关于将脚本与ASP .NET MVC Razor View中的按钮相关联的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！