我可以同時使用 ReactJs、EmberJs 和 ASP.NET MVC 嗎？

Question

我有一個使用 Ember 的 ASP.NET MVC 應用程序。 基本上，ember 應用程序被編譯並構建到純 Js 中。 已編譯的 js 腳本添加到其中一個視圖頁面中。 頂層布局是用 ASP.NET MVC 編寫的，即header ，帶有 ember 腳本的視圖被渲染為主體。

現在我想在 React 中擁有頁面的頁腳。 我用 mui 在 React 中編寫了頁腳，使用 babel 和 webpack 將其編譯為純 js，並在頁腳中使用了該 js 腳本。 但是，當我嘗試加載應用程序時，出現 500 錯誤。

這是錯誤

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>IIS 10.0 Detailed Error - 500.0 - Internal Server Error</title>
  <style type="text/css">
    <!-- body {
      margin: 0;
      font-size: .7em;
      font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    
    code {
      margin: 0;
      color: #006600;
      font-size: 1.1em;
      font-weight: bold;
    }
    
    .config_source code {
      font-size: .8em;
      color: #000000;
    }
    
    pre {
      margin: 0;
      font-size: 1.4em;
      word-wrap: break-word;
    }
    
    ul,
    ol {
      margin: 10px 0 10px 5px;
    }
    
    ul.first,
    ol.first {
      margin-top: 5px;
    }
    
    fieldset {
      padding: 0 15px 10px 15px;
      word-break: break-all;
    }
    
    .summary-container fieldset {
      padding-bottom: 5px;
      margin-top: 4px;
    }
    
    legend.no-expand-all {
      padding: 2px 15px 4px 10px;
      margin: 0 0 0 -12px;
    }
    
    legend {
      color: #333333;
      ;
      margin: 4px 0 8px -12px;
      _margin-top: 0px;
      font-weight: bold;
      font-size: 1em;
    }
    
    a:link,
    a:visited {
      color: #007EFF;
      font-weight: bold;
    }
    
    a:hover {
      text-decoration: none;
    }
    
    h1 {
      font-size: 2.4em;
      margin: 0;
      color: #FFF;
    }
    
    h2 {
      font-size: 1.7em;
      margin: 0;
      color: #CC0000;
    }
    
    h3 {
      font-size: 1.4em;
      margin: 10px 0 0 0;
      color: #CC0000;
    }
    
    h4 {
      font-size: 1.2em;
      margin: 10px 0 5px 0;
    }
    
    #header {
      width: 96%;
      margin: 0 0 0 0;
      padding: 6px 2% 6px 2%;
      font-family: "trebuchet MS", Verdana, sans-serif;
      color: #FFF;
      background-color: #5C87B2;
    }
    
    #content {
      margin: 0 0 0 2%;
      position: relative;
    }
    
    .summary-container,
    .content-container {
      background: #FFF;
      width: 96%;
      margin-top: 8px;
      padding: 10px;
      position: relative;
    }
    
    .content-container p {
      margin: 0 0 10px 0;
    }
    
    #details-left {
      width: 35%;
      float: left;
      margin-right: 2%;
    }
    
    #details-right {
      width: 63%;
      float: left;
      overflow: hidden;
    }
    
    #server_version {
      width: 96%;
      _height: 1px;
      min-height: 1px;
      margin: 0 0 5px 0;
      padding: 11px 2% 8px 2%;
      color: #FFFFFF;
      background-color: #5A7FA5;
      border-bottom: 1px solid #C1CFDD;
      border-top: 1px solid #4A6C8E;
      font-weight: normal;
      font-size: 1em;
      color: #FFF;
      text-align: right;
    }
    
    #server_version p {
      margin: 5px 0;
    }
    
    table {
      margin: 4px 0 4px 0;
      width: 100%;
      border: none;
    }
    
    td,
    th {
      vertical-align: top;
      padding: 3px 0;
      text-align: left;
      font-weight: normal;
      border: none;
    }
    
    th {
      width: 30%;
      text-align: right;
      padding-right: 2%;
      font-weight: bold;
    }
    
    thead th {
      background-color: #ebebeb;
      width: 25%;
    }
    
    #details-right th {
      width: 20%;
    }
    
    table tr.alt td,
    table tr.alt th {}
    
    .highlight-code {
      color: #CC0000;
      font-weight: bold;
      font-style: italic;
    }
    
    .clear {
      clear: both;
    }
    
    .preferred {
      padding: 0 5px 2px 5px;
      font-weight: normal;
      background: #006633;
      color: #FFF;
      font-size: .8em;
    }
    
    -->
  </style>

</head>

<body>
  <div id="content">
    <div class="content-container">
      <h3>HTTP Error 500.0 - Internal Server Error</h3>
      <h4>The page cannot be displayed because an internal server error has occurred.</h4>
    </div>
    <div class="content-container">
      <fieldset>
        <h4>Most likely causes:</h4>
        <ul>
          <li>IIS received the request; however, an internal error occurred during the processing of the request. The root cause of this error depends on which module handles the request and what was happening in the worker process when this error occurred.</li>
          <li>IIS was not able to access the web.config file for the Web site or application. This can occur if the NTFS permissions are set incorrectly.</li>
          <li>IIS was not able to process configuration for the Web site or application.</li>
          <li>The authenticated user does not have permission to use this DLL.</li>
          <li>The request is mapped to a managed handler but the .NET Extensibility Feature is not installed.</li>
        </ul>
      </fieldset>
    </div>
    <div class="content-container">
      <fieldset>
        <h4>Things you can try:</h4>
        <ul>
          <li>Ensure that the NTFS permissions for the web.config file are correct and allow access to the Web server's machine account.</li>
          <li>Check the event logs to see if any additional information was logged.</li>
          <li>Verify the permissions for the DLL.</li>
          <li>Install the .NET Extensibility feature if the request is mapped to a managed handler.</li>
          <li>Check the failed request tracing logs for additional information about this error. For more information, click <a href="http://go.microsoft.com/fwlink/?LinkID=66439">here</a>. </li>
        </ul>
      </fieldset>
    </div>

    <div class="content-container">
      <fieldset>
        <h4>Detailed Error Information:</h4>
        <div id="details-left">
          <table border="0" cellpadding="0" cellspacing="0">
            <tr class="alt">
              <th>Module</th>
              <td>&nbsp;&nbsp;&nbsp;ManagedPipelineHandler</td>
            </tr>
            <tr>
              <th>Notification</th>
              <td>&nbsp;&nbsp;&nbsp;ExecuteRequestHandler</td>
            </tr>
            <tr class="alt">
              <th>Handler</th>
              <td>&nbsp;&nbsp;&nbsp;System.Web.Mvc.MvcHandler</td>
            </tr>
            <tr>
              <th>Error Code</th>
              <td>&nbsp;&nbsp;&nbsp;0x00000000</td>
            </tr>

          </table>
        </div>
        <div id="details-right">
          <table border="0" cellpadding="0" cellspacing="0">
            <tr class="alt">
              <th>Requested URL</th>
              <td>&nbsp;&nbsp;&nbsp;http://localhost:9001/client-content/?specialtyCode=2</td>
            </tr>
            <tr>
              <th>Physical Path</th>
              <td>&nbsp;&nbsp;&nbsp;C:\ash_repos\ChooseHealthy\ChooseHealthy\ASH.Web.ChooseHealthy\client-content\</td>
            </tr>
            <tr class="alt">
              <th>Logon Method</th>
              <td>&nbsp;&nbsp;&nbsp;Anonymous</td>
            </tr>
            <tr>
              <th>Logon User</th>
              <td>&nbsp;&nbsp;&nbsp;Anonymous</td>
            </tr>

          </table>
          <div class="clear"></div>
        </div>
      </fieldset>
    </div>

    <div class="content-container">
      <fieldset>
        <h4>More Information:</h4>
        This error means that there was a problem while processing the request. The request was received by the Web server, but during processing a fatal error occurred, causing the 500 error.
        <p><a href="https://go.microsoft.com/fwlink/?LinkID=62293&amp;IIS70Error=500,0,0x00000000,19042">View more information &raquo;</a></p>
        <p>Microsoft Knowledge Base Articles:</p>
        <ul>
          <li>294807</li>
        </ul>

      </fieldset>
    </div>
  </div>
</body>

</html>

有誰知道會發生什么？

謝謝！

Answer 1

Ember 和 React 都使用虛擬 DOM，它們在嘗試更新實際 DOM 時可能會相互干擾。

當您的瀏覽器加載頁面時，它開始在該頁面上執行 JavaScript 代碼。 如果 Ember 和 React 之間存在沖突導致錯誤，JavaScript 代碼將無法正常執行，瀏覽器將無法更新頁面。 所以接下來發生的是服務器沒有收到任何頁面正確呈現的反饋，因此將返回一個錯誤 (500)，表明服務器端存在問題。

嘗試使用允許您一起使用兩者的 React-Ember 庫。 它還允許您對同一組件使用 Ember 的反應性和 React 的 JSX 語法，並有助於避免任何沖突。

我可以同時使用 ReactJs、EmberJs 和 ASP.NET MVC 嗎？

問題描述

1 個解決方案

解決方案1
0 2023-01-19 05:31:20

我可以同時使用 ReactJs、EmberJs 和 ASP.NET MVC 嗎？

問題描述

1 個解決方案

解決方案1 0 2023-01-19 05:31:20

解決方案1
0 2023-01-19 05:31:20