{"id":34699,"date":"2025-09-11T20:00:00","date_gmt":"2025-09-11T12:00:00","guid":{"rendered":"https:\/\/donghong.info\/blog\/?p=34699"},"modified":"2025-09-11T10:27:21","modified_gmt":"2025-09-11T02:27:21","slug":"%e5%9f%ba%e6%96%bcmvcasp-net%ef%bc%8c%e6%95%b4%e5%90%88%e3%80%8c%e5%89%8d%e7%ab%afmvvm%e6%a1%86%e6%9e%b6%e3%80%8dvue%e3%80%81%e3%80%8c%e5%89%8d%e7%ab%af%e5%85%83%e4%bb%b6%e6%a1%86%e6%9e%b6","status":"publish","type":"post","link":"https:\/\/donghong.info\/blog\/?p=34699","title":{"rendered":"\u57fa\u65bcMVC(Asp.net)\uff0c\u6574\u5408\u300c\u524d\u7aefMVVM\u6846\u67b6\u300d(Vue)\u3001\u300c\u524d\u7aef\u5143\u4ef6\u6846\u67b6\u300d(Bootstrap) (250911)"},"content":{"rendered":"<p>This Post is under <a href=\"\/blog\/?page_id=10815\">\u8edf\u9ad4\u958b\u767c<\/a><br \/>\u9019\u7bc7\u6587\u7ae0\u662f\u91dd\u5c0d\u4e0d\u60f3\u653e\u68c4<a href=\"https:\/\/zh.wikipedia.org\/zh-tw\/MVC\" target=\"_blank\" rel=\"noopener\">MVC<\/a>\uff0c\u4f46\u53c8\u60f3\u8981\u8a66\u8a66\u770b<a href=\"https:\/\/zh.wikipedia.org\/wiki\/Vue.js\" target=\"_blank\" rel=\"noopener\">Vue<\/a>\u9019\u985e\u7684\u524d\u7aef\u6846\u67b6\u7684\u7db2\u9801\u6e32\u67d3\u3001\u8cc7\u6599\u7e6b\u7d50\u7b49\u529f\u80fd\uff0c\u800c\u4e14\u300c\u4e0d\u60f3\u7de8\u8b6f\u524d\u7aef\u7db2\u9801\u7a0b\u5f0f\uff0c\u53c8\u4e0d\u60f3\u56e0\u70ba\u4f7f\u7528Vue\u5c31\u5f97\u5206\u6210\u524d\u5f8c\u7aef\u5169\u500b\u5c08\u6848\u300d\u7684\u4eba\uff0c\u5617\u8a66\u63d0\u51fa\u4e00\u500b\u89e3\u6c7a\u65b9\u6848\u3002\u800c\u4e14\u5982\u679c\u9084\u6709\u4f7f\u7528<a href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"noopener\">Bootstrap<\/a>\u9019\u985e\u524d\u7aef\u6846\u67b6\u7684\u5143\u4ef6\uff0c\u642d\u914dVue\u4e4b\u5f8c\u8981\u653e\u9032MVC\uff0c\u6703\u9047\u5230\u64fa\u4e0d\u592a\u9032\u53bb\u7684\u554f\u984c\u3002\u8b6c\u5982\u5728\u5916\u5c64Layout\u4f7f\u7528Bootstap\u7684<a href=\"https:\/\/bootstrap-vue-next.github.io\/bootstrap-vue-next\/docs\/components\/nav.html\" target=\"_blank\" rel=\"noopener\">Collapse<\/a>\u4f86\u7e2e\u653e\u5167\u5c64View\u7684\u5167\u5bb9\uff0c\u800c\u5728\u5167\u5c64\u7684View\u5982\u679c\u6703\u4f7f\u7528\u5230\u4e0d\u540c\u7684BS\u5143\u4ef6(\u5982<a href=\"https:\/\/bootstrap5.hexschool.com\/docs\/5.0\/components\/buttons\/\" target=\"_blank\" rel=\"noopener\">\u6309\u9215<\/a>)\uff0c\u5c31\u6703\u6709\u5916\u5c64\u7684Layout\u5fc5\u9808\u4e00\u6b21\u8a3b\u518a\u6240\u6709View\u53ef\u80fd\u4f7f\u7528\u7684BS\u5143\u4ef6\u7684\u554f\u984c\uff0c\u56e0\u70baVue\u4f7f\u7528\u5143\u4ef6\u9700\u8981\u5148\u8a3b\u518a\u3002<\/p>\n<p>\u5982\u679c\u4e0d\u60f3\u5728\u5916\u5c64\u4e00\u6b21\u8a3b\u518a\u6240\u6709\u5916\u90e8\u5143\u4ef6\uff0c\u5916\u5c64Layout\u8207\u5167\u5c64\u7684View\u61c9\u8a72\u8981\u6210\u70ba\u4e0d\u6703\u4e92\u76f8\u5305\u542b\u7684\u5169\u500b\u7368\u7acbVue App\u3002\u5be6\u4f5c\u4e0a\u53ef\u7b49\u5230View App\u521d\u59cb\u5316\u4e4b\u5f8c\uff0c\u518d\u628aView \u7684Vue app \u7528\u64cd\u4f5cDOM\u7684\u65b9\u5f0f\u642c\u9032Layout\u4e2d\u70baView\u4fdd\u7559\u7684\u4f4d\u7f6e\u3002<\/p>\n<p><!--more--><\/p>\n<p>\u4ee5<a href=\"https:\/\/learn.microsoft.com\/zh-tw\/aspnet\/mvc\/overview\/older-versions-1\/overview\/asp-net-mvc-overview\" target=\"_blank\" rel=\"noopener\">ASP.NET MVC<\/a>\u70ba\u4f8b\uff1a<\/p>\n<p><style>pre{background: #f4f4f4; word-wrap: break-word; max-width: 100%;text-wrap: auto;}<\/style><\/p>\n<h3>_Layout.cshtml \u5167\u5bb9<\/h3>\n<pre>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.7\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" crossorigin=\"anonymous\"&gt;\n    &lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-vue-next@0.30.4\/dist\/bootstrap-vue-next.min.css\" rel=\"stylesheet\" \/&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n   &lt;div id=\"app\"&gt;\n       &lt;BCollapse&gt;\n\t    &lt;div class=\"content\"&gt;\n\t\t@if (!IsSectionDefined(\"vueScript\"))\n\t\t{\n\t\t\t@RenderBody()\n\t\t}\n\t    &lt;\/div&gt;\t\n       &lt;\/BCollapse&gt;\n    &lt;\/div&gt;\n&lt;script type=\"importmap\"&gt;\n{\n  \"imports\": {\n     \"vue\": \"https:\/\/unpkg.com\/vue@3\/dist\/vue.esm-browser.prod.js\",\n     \"bootstrapVueNext\": \"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-vue-next@0.30.4\/dist\/bootstrap-vue-next.mjs\"\n  }\n}\n&lt;\/script&gt;\n&lt;script type=\"module\"&gt;\n\timport { createApp, ref } from 'vue'\n\timport { createBootstrap, BCollapse } from 'bootstrapVueNext'\n\n\tconst app = createApp({\n\t\t\/\/...\n\t});\n\tapp.component('BCollapse', BCollapse);\n            \n\tapp.use(createBootstrap());\n\tapp.mount('#app');\n&lt;\/script&gt;\n@if (IsSectionDefined(\"vueScript\"))\n{\n\t&lt;div id=\"app-content\"&gt;\n\t\t@RenderBody()\n\t&lt;\/div&gt;\n\n\t@RenderSection(\"vueScript\", required: false)\n}\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/pre>\n<h3>Index.cshtml \u5167\u5bb9<\/h3>\n<pre>&lt;BButton&gt;Click me&lt;\/BButton&gt;\n\n@section vueScript {\n    &lt;script type=\"module\"&gt;\n        import { createApp } from 'vue'\n\n        import { createBootstrap, BButton } from 'bootstrapVueNext';\n\n        const appContent = createApp({\t\t\n\t\t\t\/\/...\n\t\t\n\t\t\tonMounted(() =&gt; {\t\t\t\n\t\t\t\tdocument.querySelector(\".content\").appendChild(document.querySelector(\"#app-content\"));\n\t\t\t});\n\t\t});\n\t\t\n\tappContent.component('BButton', BButton);\n            \n        appContent.use(createBootstrap());\n\tappContent.mount('#app-content')\n    &lt;\/script&gt;\n}\n<\/pre>\n<p>\u4ee5\u4e0a\u7bc4\u4f8b\u5728 _Layout.cshtml \u8207 Index.cshtml \u5206\u5225\u4f7f\u7528\u4e86\u4e0d\u540c\u7684 bootstrap-vue \u5143\u4ef6\uff0c\u904b\u7528<a href=\"https:\/\/learn.microsoft.com\/zh-tw\/aspnet\/web-pages\/overview\/getting-started\/introducing-razor-syntax-c\" target=\"_blank\" rel=\"noopener\">Razor \u8a9e\u6cd5<\/a>\u4e2d\u7684 <strong>RenderSection<\/strong>\uff0c\u5c07\u5169\u500b vue app \u5206\u958b\u4f86\u521d\u59cb\u5316\uff0c\u7136\u5f8c\u5728 Index view \u7684 vue app onMounted \u4e2d\u518d\u505a\u6574\u4f75\u3002\u5982\u6b64\u5c31\u53ef\u907f\u514d\u4e00\u500bVue App\u4e2d<strong>\u76f4\u63a5<\/strong>\u5167\u542b\u53e6\u4e00\u500bVue App\uff0c\u4e14Layout\u8207\u771f\u6b63\u7684\u5167\u5bb9\u7684View\u4e5f\u53ef\u4ee5\u5206\u958b\u8a2d\u8a08\u3002<\/p>\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u91dd\u5c0d\u4e0d\u60f3\u653e\u68c4MVC\uff0c\u4f46\u53c8\u60f3\u8981\u8a66\u8a66\u770bVue\u9019\u985e\u7684\u524d\u7aef\u6846\u67b6\u7684\u7db2\u9801\u6e32\u67d3\u3001\u8cc7\u6599\u7e6b\u7d50\u7b49\u529f\u80fd\uff0c\u800c\u4e14\u300c\u4e0d\u60f3\u7de8\u8b6f\u524d\u7aef\u7db2\u9801\u7a0b\u5f0f\uff0c\u53c8\u89ba\u5f97\u70ba\u4f55\u8981\u56e0\u70ba\u4f7f\u7528Vue\u4e00\u5b9a\u5f97\u8981\u5206\u6210\u524d\u5f8c\u7aef\u5169\u500b\u5c08\u6848\uff1f\u300d\u7684\u4eba\uff0c\u5617\u8a66\u63d0\u51fa\u4e00\u500b\u89e3\u6c7a\u65b9\u6848\u3002\u800c\u4e14\u5982\u679c\u9084\u6709\u4f7f\u7528Bootstrap\u9019\u985e\u524d\u7aef\u6846\u67b6\u7684\u5143\u4ef6\uff0c\u642d\u914dVue\u4e4b\u5f8c\u8981\u653e\u9032MVC\uff0c\u6703\u9047\u5230\u64fa\u4e0d\u592a\u9032\u53bb\u7684\u554f\u984c\u3002\u8b6c\u5982\u5728\u5916\u5c64Layout\u4f7f\u7528Bootstap\u7684Collapse\u4f86\u7e2e\u653e\u7684View\uff0c\u800c\u5728\u5167\u5c64\u500b\u5225\u7684View\u5982\u679c\u6703\u4f7f\u7528\u5230\u4e0d\u540c\u7684BS\u5143\u4ef6(\u5982\u6309\u9215)\uff0c\u5c31\u6703\u6709\u5916\u5c64\u7684Layout\u5fc5\u9808\u4e00\u6b21\u8a3b\u518a\u6240\u6709View\u53ef\u80fd\u4f7f\u7528\u7684BS\u5143\u4ef6\u7684\u554f\u984c\uff0c\u56e0\u70baVue\u4f7f\u7528\u5143\u4ef6\u9700\u8981\u5148\u8a3b\u518a\u3002<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":true,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[543],"tags":[441,686],"class_list":["post-34699","post","type-post","status-publish","format-standard","hentry","category-software-development","tag-javascript","tag-mvc"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/donghong.info\/blog\/index.php?rest_route=\/wp\/v2\/posts\/34699","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/donghong.info\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/donghong.info\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/donghong.info\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/donghong.info\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=34699"}],"version-history":[{"count":2,"href":"https:\/\/donghong.info\/blog\/index.php?rest_route=\/wp\/v2\/posts\/34699\/revisions"}],"predecessor-version":[{"id":34726,"href":"https:\/\/donghong.info\/blog\/index.php?rest_route=\/wp\/v2\/posts\/34699\/revisions\/34726"}],"wp:attachment":[{"href":"https:\/\/donghong.info\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=34699"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/donghong.info\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=34699"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/donghong.info\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=34699"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}