bootstrapモーダルダイアログとblazor

<button class="btn btn-primary" data-toggle="modal" data-target="#Modal">ユーザー選択</button>
<br/>
<span style="color:red;font-weight:bold">@mesg</span>
<!-- モーダル本体 -->
<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<!-- モーダルヘッダ部 -->
			<div class="modal-header" style="background-color:navy;color:white">
				<h5 class="modal-title" id="exampleModalLongTitle">Modal Test</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				  <span aria-hidden="true">×</span>
				</button>
			</div>
			<!-- モーダルボディ -->
			<div class="modal-body" style="height:500px">
			@if (Employees != null) {
				<select size="20" style="width:200px" @bind="selectedEmpNo">
					@foreach(var itm in Employees) {
					  <option value="@itm.EmpNo">@itm.Name</option>
					}
				</select>
			}
			</div>
			<!-- モーダルヘッダ -->
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" @onclick="OnCancelClick">キャンセル</button>
				<button type="button" class="btn btn-primary" @onclick="OnOKClick">選択</button>
			</div>
		</div>
	</div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

var modalope = {
    close: (target) => {
        var eleid = '#' + target;
        $(eleid).modal('hide');
    },
    open: (target) => {
        var eleid = '#' + target;
        $(eleid).modal();
    }
};

@code {
	protected string mesg = "";
	protected string selectedEmpNo = "";
	protected List<Employee> Employees = null!;
		・・・
	protected async Task OnOKClick() {
		await JS.InvokeVoidAsync("modalope.close","Modal");
		var emp = Employees.Where(v=>v.EmpNo == selectedEmpNo).FirstOrDefault();
		if (emp != null) {
		  mesg = $"「{emp.EmpNo}:{emp.Name}」が選択されたよ!!";
		}
	}
	protected async Task OnCancelClick() {
		await JS.InvokeVoidAsync("modalope.close","Modal");
		mesg = "選択がキャンセルされたよ!!";
	}
	・・・
}