{"id":608,"date":"2023-01-16T11:55:07","date_gmt":"2023-01-16T02:55:07","guid":{"rendered":"https:\/\/sumomo.ohwaki.jp\/wordpress\/?p=608"},"modified":"2023-01-30T15:46:36","modified_gmt":"2023-01-30T06:46:36","slug":"bootstrap%e3%83%a2%e3%83%bc%e3%83%80%e3%83%ab%e3%83%80%e3%82%a4%e3%82%a2%e3%83%ad%e3%82%b0%e3%81%a8blazor","status":"publish","type":"post","link":"https:\/\/sumomo.ohwaki.jp\/wordpress\/?p=608","title":{"rendered":"bootstrap\u30e2\u30fc\u30c0\u30eb\u30c0\u30a4\u30a2\u30ed\u30b0\u3068blazor"},"content":{"rendered":"\n

bootstrap\u3067\u306f\u3001\u6a19\u6e96\u3067\u30e2\u30fc\u30c0\u30eb\u30c0\u30a4\u30a2\u30ed\u30b0\u3092\u30b5\u30dd\u30fc\u30c8\u3057\u3066\u3044\u308b\u3002\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u611f\u3058\u3067\u3001div\u30bf\u30b0\u3078\u7279\u5b9a\u306eCSS\u30af\u30e9\u30b9\u540d\u3092\u6307\u5b9a\u3059\u308b\u3060\u3051\u3067\u3001\u7c21\u5358\u306b\u30e2\u30fc\u30c0\u30eb\u30c0\u30a4\u30a2\u30ed\u30b0\u3092\u8868\u793a\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u3002<\/p>\n\n\n\n

<button class="btn btn-primary" data-toggle="modal" data-target="#Modal">\u30e6\u30fc\u30b6\u30fc\u9078\u629e<\/button>\n<br\/>\n<span style="color:red;font-weight:bold">@mesg<\/span>\n<!-- \u30e2\u30fc\u30c0\u30eb\u672c\u4f53 -->\n<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">\n\t<div class="modal-dialog modal-dialog-centered" role="document">\n\t\t<div class="modal-content">\n\t\t\t<!-- \u30e2\u30fc\u30c0\u30eb\u30d8\u30c3\u30c0\u90e8 -->\n\t\t\t<div class="modal-header" style="background-color:navy;color:white">\n\t\t\t\t<h5 class="modal-title" id="exampleModalLongTitle">Modal Test<\/h5>\n\t\t\t\t<button type="button" class="close" data-dismiss="modal" aria-label="Close">\n\t\t\t\t  <span aria-hidden="true">\u00d7<\/span>\n\t\t\t\t<\/button>\n\t\t\t<\/div>\n\t\t\t<!-- \u30e2\u30fc\u30c0\u30eb\u30dc\u30c7\u30a3 -->\n\t\t\t<div class="modal-body" style="height:500px">\n\t\t\t@if (Employees != null) {\n\t\t\t\t<select size="20" style="width:200px" @bind="selectedEmpNo">\n\t\t\t\t\t@foreach(var itm in Employees) {\n\t\t\t\t\t  <option value="@itm.EmpNo">@itm.Name<\/option>\n\t\t\t\t\t}\n\t\t\t\t<\/select>\n\t\t\t}\n\t\t\t<\/div>\n\t\t\t<!-- \u30e2\u30fc\u30c0\u30eb\u30d8\u30c3\u30c0 -->\n\t\t\t<div class="modal-footer">\n\t\t\t\t<button type="button" class="btn btn-secondary" @onclick="OnCancelClick">\u30ad\u30e3\u30f3\u30bb\u30eb<\/button>\n\t\t\t\t<button type="button" class="btn btn-primary" @onclick="OnOKClick">\u9078\u629e<\/button>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/div><\/code><\/pre><\/div>\n\n\n\n
blazor\u3067\u3082\u4ee5\u4e0b\u306escript\u3092\u8aad\u8fbc\u3093\u3067\u304a\u3051\u3070\u3001\u4f7f\u7528\u3067\u304d\u308b\u3002<\/p>\n\n\n\n
<script src="https:\/\/code.jquery.com\/jquery-3.3.1.slim.min.js" integrity="sha384-q8i\/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"><\/script>\n<script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.14.6\/umd\/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ\/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"><\/script>\n<script src="https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.2.1\/js\/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U\/mkkaduKaBhlAXv9k" crossorigin="anonymous"><\/script><\/code><\/pre><\/div>\n\n\n\n
\u30e2\u30fc\u30c0\u30eb\u306e\u30af\u30ed\u30fc\u30ba\u3092Javascript\u304b\u3089\u660e\u793a\u7684\u306b\u884c\u306a\u3046\u306b\u306f\u3001modal(‘hide’)\u3092\u4f7f\u7528\u3059\u308b\u3002<\/p>\n\n\n\n
var modalope = {\n    close: (target) => {\n        var eleid = '#' + target;\n        $(eleid).modal('hide');\n    },\n    open: (target) => {\n        var eleid = '#' + target;\n        $(eleid).modal();\n    }\n};<\/code><\/pre><\/div>\n\n\n\n
\u4ee5\u4e0b\u306fblazor\u306ecode\u90e8\u5206<\/p>\n\n\n\n
@code {\n\tprotected string mesg = "";\n\tprotected string selectedEmpNo = "";\n\tprotected List<Employee> Employees = null!;\n\t\t\u30fb\u30fb\u30fb\n\tprotected async Task OnOKClick() {\n\t\tawait JS.InvokeVoidAsync("modalope.close","Modal");\n\t\tvar emp = Employees.Where(v=>v.EmpNo == selectedEmpNo).FirstOrDefault();\n\t\tif (emp != null) {\n\t\t  mesg = $"\u300c{emp.EmpNo}:{emp.Name}\u300d\u304c\u9078\u629e\u3055\u308c\u305f\u3088!!";\n\t\t}\n\t}\n\tprotected async Task OnCancelClick() {\n\t\tawait JS.InvokeVoidAsync("modalope.close","Modal");\n\t\tmesg = "\u9078\u629e\u304c\u30ad\u30e3\u30f3\u30bb\u30eb\u3055\u308c\u305f\u3088!!";\n\t}\n\t\u30fb\u30fb\u30fb\n}<\/code><\/pre><\/div>\n\n\n\n
\u5b9f\u884c\u7d50\u679c\u306f\u3053\u3093\u306a\u611f\u3058<\/p>\n\n\n\n
\"\"
\u5b9f\u884c\u753b\u97621<\/figcaption><\/figure>\n\n\n\n
\"\"
\u5b9f\u884c\u753b\u97622<\/figcaption><\/figure>\n\n\n\n
\u3082\u3061\u308d\u3093\u3001div\u306eid\u3092\u5909\u3048\u308c\u3070\u3001\u8907\u6570\u306e\u30c0\u30a4\u30a2\u30ed\u30b0\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u304c\u53ef\u80fd\u3002<\/p>\n\n\n\n
\u7d50\u69cb\u4fbf\u5229\u306b\u4f7f\u3048\u305d\u3046\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
bootstrap\u3067\u306f\u3001\u6a19\u6e96\u3067\u30e2\u30fc\u30c0\u30eb\u30c0\u30a4\u30a2\u30ed\u30b0\u3092\u30b5\u30dd\u30fc\u30c8\u3057\u3066\u3044\u308b\u3002\u4ee5\u4e0b\u306e\u3088\u3046\u306a … \u7d9a\u304d\u3092\u8aad\u3080 →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,12,10,9,4],"tags":[],"class_list":["post-608","post","type-post","status-publish","format-standard","hentry","category-net","category-asp-net-core","category-blazor","category-c","category-4"],"_links":{"self":[{"href":"https:\/\/sumomo.ohwaki.jp\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/608","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sumomo.ohwaki.jp\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sumomo.ohwaki.jp\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sumomo.ohwaki.jp\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sumomo.ohwaki.jp\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=608"}],"version-history":[{"count":8,"href":"https:\/\/sumomo.ohwaki.jp\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/608\/revisions"}],"predecessor-version":[{"id":636,"href":"https:\/\/sumomo.ohwaki.jp\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/608\/revisions\/636"}],"wp:attachment":[{"href":"https:\/\/sumomo.ohwaki.jp\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=608"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sumomo.ohwaki.jp\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=608"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sumomo.ohwaki.jp\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=608"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}