Java 脚本模块（导入/导出）与 Asp.net Core Mvc

Question

I'm trying to work with modules, but when I try to import and use the method I receive the error - reference error onLogin is not defined , what can I be doing wrong?

• LoginController.js

import Api from "/src/Utils/Api.js";

export default async function onLogin() {

try {
    debugger
    document.getElementById("loading").style.visibility = 'visible';

    var usuario = {
        snome: document.getElementById("EdtUsuario").value,
        ssenha: document.getElementById("EdtSenha").value
    };

    let retorno = await Api.post('/Login/login/', usuario);

    console.log(retorno);

} catch (error) {

    document.getElementById("loading").style.visibility = 'hidden';
    console.log(error);

}
}

• Import in View

<script type="module"> import onLogin from '/src/Controller/LoginController.js'</script>

The Method onLogin is called on event onClick

<button onclick="onLogin()" type="submit" class="botaowidth100">Entrar</button >

Answer 1

• you can try new feature ImportMap

1. add script import map in _Layout.cshtml

 <script type="importmap">
        {
          "imports": {
            "AjaxGet": "/js/AjaxGet.js",
            "AjaxPostJSON": "/js/AjaxPostJSON.js"
          }
        }
    </script>

2. import in your script section

@section Scripts
{
<script type="module">
    import {AjaxGet} from "AjaxGet";

      $('#createBtn').click(function() {
            if (!confirm("Are you sure to create new sem account?"))
                return;
          
            AjaxGet("@Url.Action("Create")", {}, doneFunc);
          })
</script>
}

Answer 2

I think you will run into CORS error if you try to load js files locally due to security reasons. So you need to either not use script as module or serve the module from a server.