4

たとえば、ビューにリストを渡す次のモデルがあります。

public class ExampleViewModel
{
    public int id { get; set; }
    public string name { get; set; }

}

私の見解では、私は次のことを持っています：

@model List<ExampleViewModel>

<table>
    <tr>
        <th>Name</th>
        <th>Action</th>
    </tr>
    @foreach (var x in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(m => x.name)
            </td>
            <td> 
                <input type="button" onclick="edit();" value="Edit">
            </td>
        </tr>
    }
</table>

<script type="text/javascript">
    function edit(x) {
        window.location = "/Home/Edit?id=" + x
    }
</script>

私が問題を抱えているのは、 x.id を edit() 関数に渡すことです。私は期待しました：

<input type="button" onclick="edit(@x.id);" value="Edit">

動作しますが、動作しませんでした。

ありがとう

4

3 に答える 3

4

データ スラッシュ属性を使用し、jQuery などを使用してイベントを処理し、データ スラッシュ属性を使用することをお勧めします。

データ スラッシュ属性は、単に名前が「data-」で始まる属性です。これらの属性は必要な数だけ定義でき、どの要素でも、すべてのブラウザーがそれらをサポートします。

<input type="button" onclick="edit" data-id="@x.id" value="Edit">

edit メソッドが実行されると、(これを使用して) 要素にアクセスでき、jQuery を使用して属性値を取得できます。

var id = $(this).attr('data-id');

さらに進んで、「onclick=edit」部分を削除することもできます。次に、jQuery を使用して、次のように、必要な属性を持つすべての要素にクリック イベントをサブスクライブします。

$(document).ready(function() { 
  // this happens when all the page has been loaded in the browser (ready)
  $('input[data-id]').on('click', function() { 
    // find the input elements with the "data-id" attr, and, when 'click'ed...
    var id = $(this).attr('data-id');
    //get the attribute value and do whatever you want with it...
  });
});

var id = $(this).data('id');*注:代替として使用できます。

この手法は「邪魔にならない JavaScript」として知られています。もちろん、これを行うには、ページに jQuery を含める必要があります。物事を簡単にするjQuery（または他のライブラリ）の使用を開始してください。使用する場合は、衝突を避けるために、属性に「名前空間」名を使用することをお勧めします。つまり、「data-mynamespace-id」のようなもので、名前空間として意味のあるものを使用します。

于 2013-07-10T11:11:37.140 に答える
4

これを試して

<input type="button" onclick="edit(@x.id);" value="Edit">
于 2013-07-10T10:51:29.517 に答える
1

これを試して：

<input type="button" onclick="edit('@(x.id)');" value="Edit">

ViewModel から JavaScript に変数を渡したい場合は、次のように qoutes を使用する必要があることに注意してください。

<script type="text/javascript">
    var x = '@Model[0].x';
</script>

また、テーブルの前に編集関数の宣言を試すこともできます。

于 2013-07-10T10:49:56.040 に答える