2016-05-03 41 views
2

私はASP.Net MVC 6アプリケーションで作業しています。デフォルトのインデックスビューは通常、編集、詳細へのリンクを持っており、表示、編集、テーブルと行の外に表示されます削除&のリンクを使用して選択されるべきであることを私の要件は、このようなあるforeachループなしでjavascriptを使用してasp-route-idの値を動的に設定しました

@foreach (var item in Model) { 
     <tr> 
      <td>@Html.DisplayFor(modelItem => item.FirstName)</td> 
      <td>@Html.DisplayFor(modelItem => item.LastName)</td> 
      <td> 
       <a asp-action="Edit" asp-route-id="@item.SpeakerId">Edit</a> | 
       <a asp-action="Details" asp-route-id="@item.SpeakerId">Details</a> | 
       <a asp-action="Delete" asp-route-id="@item.SpeakerId">Delete</a> 
      </td> 
     </tr> 
    } 

のように、foreachループ内で削除します。ラジオボタンの列。

radiobuttonのonchangeイベントを使用してasp-route-id属性を動的に設定する方法はありますか?

私はこの

function radioSelected() {   
     var routeId = $('input[name="selectRecord"]:checked').val(); 
     var links = "<a asp-action='Details' asp-route-id=" + routeId + ">View Details</a> | " 
        + "<a asp-action='Edit' asp-route-id=" + routeId + ">Edit</a> | " 
        + "<a asp-action='Delete' asp-route-id=" + routeId + ">Delete</a>"; 

     document.getElementById("actions").innerHTML = links; 
    } 

何かのリンクを試してみましたが、ASP-ルート-idとASP-アクションの属性は、このように動作しません。

+1

ASP-ルート-idとASP-アクション属性は、サーバー側のタグであり、はい、彼らはサーバー側の属性であるサーバー – Hadi

+0

でコンパイルして実行する必要があります。私の質問は、それはとにかくjavascriptを使ってこの値を設定することですか? –

答えて

0

可能であれば、jqueryを使用できます。私はあなたのケースを処理するために、一部の下に追加:

<a id="lnkEdit" data-url-prefix="@Url.Action("Edit")">Edit</a> | 
<table id="tableSelect"> 
    @foreach (var item in Model) 
    { 
     <tr data-item-id="@item.SpeakerId"> 
      <td><input name="selectRow" type="radio"></td> 
      <td>@Html.DisplayFor(modelItem => item.FirstName)</td> 
      <td>@Html.DisplayFor(modelItem => item.LastName)</td> 
     </tr> 
    } 
</table> 


<script type="text/javascript"> 
    $(function() { 
     $('#tableSelect tr').click(function() { 
      $(this).find('td input:radio').prop('checked', true); 
      $("#lnkEdit").attr("href", $("#lnkEdit").data("url-prefix") + "/" + $(this).data("item-id")); 
     }) 
    }); 
</script> 
関連する問題