作者heavenbetula (綠草)
看板Web_Design
標題[問題] ASP.NET MVC結合React
時間Fri May 31 09:34:43 2019
各位大大好~
我是剛學習React的新手
由於公司環境上使用ASP.NET MVC
想要前後分離，View用React來做，彼此間的溝通藉由web api
問題來了我自己寫好打包好的html、css、js
我不知道該怎麼做，才能在server上運作
server是使用IIS
查了網路上的文章，似乎蠻多都用React.net的package?
如果不使用這個的話，要怎麼做呢?
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 122.116.84.179
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1559266485.A.AF7.html
1F：→ forewero: 你到底是用mvc還是api... 打包好的靜態文件掛iis就可以 05/31 20:15
不好意思可能我觀念不太好
想請問一下"你到底是用mvc還是api"的意思是什麼呢?
因為我以為asp.net mvc中controller寫的get、post的class，就算是api了
※ 編輯: heavenbetula (111.185.94.38), 05/31/2019 21:26:00
2F：→ satanbaby: 關鍵字 UseDefaultFiles 不知道是不是你要的 06/01 00:07
3F：推 pm2001: get post只是HTTP Method,不是是否為api的標準 06/01 00:12
4F：→ ssccg: html css js直接放到IIS上就會動了啊y 06/01 22:58
5F：推 dalconan: 我猜是你不知道你的HTML和JS那些該放在MVC專案的哪？ 06/02 19:25
感謝各位大大~由於會不知道怎麼在IIS運作是因為asp.net mvc好像包出來是個zip檔?
所以一直跟我以往的"直接將html css js放在server"上不太一樣所以很困惑
但現在好像知道了，就是將我包出來的這些檔案，放在asp.net mvc的某個資料夾
(假設叫Webpage),然後讓controller中的ActionResult指向這個Webpage資料的
index.html,然後就可以照asp.net mvc平常的運作方式去打包
只是又有一個問題是我啟動asp.net mvc模擬時，會出現：
http://localhost/main.css is not found.
http://localhost/bundle.js is not found.
資料夾路徑是這樣的：
Webpage----inde.html
bundle.js
main.css
我知道是因為我的React包出來的index.html檔中include的js路徑是相對於
這個index.html
而會跑出這個error的原因是因為實際的server路徑上根本沒有我打包出來的bundle.js
以及main.css
這個問題可實際手動調整index.html裡的引入路徑如將原本的
src="bundle.js"改為src="../Webpage/bundle.js"即可解決
但總覺得還有更好的方法，可以讓我以後React包完直接放在資料夾下都不用再調整...
請問可以透過設定asp.net mvc的什麼東西，達到這樣的功能嗎?
※ 編輯: heavenbetula (111.185.94.38), 06/02/2019 22:17:27
6F：推 dalconan: ASP.NET MVC有個可以打包複數個JS或CSS成一個檔案的功能 06/03 20:47
7F：→ dalconan: 把你所有的檔案打包成一個檔案，然後路徑符合你html檔名 06/03 20:47
8F：→ dalconan: 應該就可以了？ 06/03 20:48
謝謝你~現在我只改了輸出之後的index.html裡的<base href="/Webpage/" />路徑的問題
就解決了！
只是又跑出一個問題...當我頁面reload的時候會404
爬文解決方法是在asp.net mvc路由設定的routes.MapRoute中
將原本的
url:"{controller}/{action}/{id}"
改為
url:"{*url}"
不過改成這樣子後，原本寫在controller的api又不知道怎麼去get post到他了...
※ 編輯: heavenbetula (111.185.94.38 臺灣), 06/03/2019 22:29:38
9F：→ satanbaby: 你現在的問題是如何把react的靜態檔部署到後端吧？ 06/04 10:44
10F：推 pm2001: 我覺得你可能要先了解.net mvc的routing是怎麼設定的 06/04 16:04
react靜態檔放在server上，Apache、nginx都有試過OK
實在是asp.net mvc走controller的方式讓我比較不懂
不過感謝~現在.net mvc routing的設置我也解決了
總之我目前是設兩個routes.MapRoute
第一個路由的url寫成url:"{url}"
第二個的路由維持預設url:"{controller}/{action}/{id}"
之前爬文把第一個的路由url:"{*url}"加了*符號，雖然頁面reload 404的問題解決
但這會導致，當url的路徑為controller名稱時，無法匹配到第二個路由去
所以ajax 的get post根本無法跑進controller去運作
因此只要不要加*符號，兩個問題看起來是解決了！
※ 編輯: heavenbetula (111.185.94.38 臺灣), 06/04/2019 21:51:58