2017-06-15 21 views
0

ModalダイアログでViewComponentを使用してデータを編集したい場合、ボタンをクリックしたときにViewComponentを表示し、値は正しいデータを取得します。データID値をViewComponentに渡すにはどうすればいいですか

@await Component.InvokeAsync("Contact", 2); 

又は
@await Component.InvokeAsync(新しい "連絡先"、{ID = 2})。

しかし、どのように表示するかわからないのは、Idをどのボタンをクリックするかによって決めることです。理想的には、私はちょうどデータIDを使用したいと思います。 私が見たすべての例では、固定値が使用されていました。

編集:

ViewComponentは、アンカータグを介して上のトグルさModalTagHelper、で使用されているが、私はまた、最初に起動いくつかのjQueryを持っています。

$('.btnShow').on('click', function() { 
    $('#hdnContactId').val($(this).data('id')); 
    alert($('#hdnContactId').val()); 
}); 

<a href="#" data-toggle="modal" data-id="@Model.StudentContactId" data-target="#EditContact" class="btnShow btn btn-default">Edit</a> 


<modal id="EditContact" title="Contact Details"> 
    <modal-body> 
     @await Component.InvokeAsync("Contact", new { id=2 }); 
    </modal-body> 
    <modal-footer> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
    </modal-footer> 
</modal> 
+0

キャブあなたは共有ボタンのクリックは、このコードを呼び出していますか? –

答えて

0

OK、私は最終的にそれを行う方法を考え出しました。
モーダルセクションから@awaitなどを削除したので、デフォルトではデータは取得されません。

public IActionResult ContactViewComponent(int Id) { 
    return ViewComponent("Contact", Id); 
} 

をしてまで私のスクリプトを変更: は、コントローラに私が追加

$('.btnShow').on('click', function (e) { 
    $('#hdnContactId').val($(this).data('id')); 
    var container = $(".modal-body"); 
    $.get("/Contact/ContactViewComponent?Id=" + $(this).data('id'), function (data) { container.html(data); }); 
}); 

、それが動作するようになりました:)

関連する問題