如何调用 javascript 函数？

Question

我尝试从 razor 文件调用 js 函数。该脚本在 index.html 中可用。将显示所选文件的数量。但我希望在 html-text: "Selected files:" 下显示 Excel-文件的名称。但是选择后什么都没有显示。

我做错了什么？我解决了吗？

Blazor 页面 [importexceldata.razor]

@page "/importexceldata"
@inject IJSRuntime js

<h3>Import Excel Data</h3>
<form>
    <div><input id="minimum" type="text" /></div>
    <div><input id="maximum" type="text" /></div>
    <div></div>
    <div></div>
    <p><span>Select file(s) to upload :</span></p>
    <p>
        <input class="btn btn-danger"
               id="file" multiple
               name="file"
               type="file"
               onchange="javascript:updateList()" />
    </p>
    <p>
        <input class="btn btn-warning"
               id="button1"
               type="button"
               value="Upload" />
    </p>
    <p>Selected files:</p>
    <div id="fileList"></div>
</form>

@code {
    public object UpdateList() => js.InvokeAsync<object>("updateList");
    //protected override async Task OnAfterRenderAsync(bool firstRender)
    //{
    //}
}

... 和 index.html

    <script type="text/javascript">
        window.document.readyState(function(){
            $("#button1").click(function (evt) {
                var files = $("#file").get(0).files;
                var minimum = $("#minimum").val();
                var maximum = $("#maximum").val();

                if (files.length > 0) {
                    console.log(files.length);

                    var data = new FormData();
                    for (i = 0; i < files.length; i++) {
                        data.append("file" + i, files[i]);
                    }

                    console.log(data);
                    $.ajax({
                        type: "POST",
                        url: "/Home/UploadFiles?minimum=" + minimum + "&maximum=" + maximum,
                        contentType: false,
                        processData: false,
                        data: data,
                        success: function (messages) {
                            for (i = 0; i < messages.length; i++) {
                                alert(messages[i]);
                            }
                        },
                        error: function () {
                            alert("Error while invoking the Web API");
                        }
                    });
                }
            });

            //window.jsMethod = (updateList) => {
         updateList = function () {
            var input = document.getElementById('file');
            var output = document.getElementById('fileList');
            var children = "";
            for (var i = 0; i < input.files.length; ++i) {
                children += '<li>' + input.files.item(i).name + '</li>';
            }
            output.innerHTML = '<ul>' + children + '</ul>';
        };
    </script>
</body>

</html>

Answer 1

检查你的函数代码，没有return值，所以你不能这样调用js:

@code {
   public object UpdateList() => js.InvokeAsync<object>("updateList");
}

像这样更改您的函数代码：

       function updateList () {
            var input = document.getElementById('file');
            var output = document.getElementById('fileList');
            var children = "";
            for (var i = 0; i < input.files.length; ++i) {
                children += '<li>' + input.files.item(i).name + '</li>';
            }
            output.innerHTML = '<ul>' + children + '</ul>';
        };

更改input代码使用@onchange=xx:

<input class="btn btn-danger"
               id="file" multiple
               name="file"
               type="file"
               @onchange="UpdateList" />

然后这样调用js:

@code {
    public async Task UpdateList() {
        await Js.InvokeVoidAsync("updateList");
    }
}

演示

==================编辑===============

@page "/importexceldata"
@inject IJSRuntime Js

<PageTitle>Index</PageTitle>
<form>
    <div><input id="minimum" type="text" /></div>
    <div><input id="maximum" type="text" /></div>
    <div></div>
    <div></div>
    <p><span>Select file(s) to upload :</span></p>
    <p>
        <input class="btn btn-danger"
               id="file" multiple
               name="file"
               type="file"
               @onchange="UpdateList" />
    </p>
    <p>
        <input class="btn btn-warning"
               id="button1"
               type="button"
               value="Upload" />
    </p>
    <p>Selected files:</p>
    <div id="fileList"></div>
</form>

@code {
    public async Task UpdateList() {
        await Js.InvokeVoidAsync("updateList");
    }
}

索引

<script type="text/javascript">
        $(document).ready(function () {
            $("#button1").click(function (evt) {
                var files = $("#file").get(0).files;
                var minimum = $("#minimum").val();
                var maximum = $("#maximum").val();

                if (files.length > 0) {
                    console.log(files.length);

                    var data = new FormData();
                    for (i = 0; i < files.length; i++) {
                        data.append("file" + i, files[i]);
                    }

                    console.log(data);
                    $.ajax({
                        type: "POST",
                        url: "/Home/UploadFiles?minimum=" + minimum + "&maximum=" + maximum,
                        contentType: false,
                        processData: false,
                        data: data,
                        success: function (messages) {
                            for (i = 0; i < messages.length; i++) {
                                alert(messages[i]);
                            }
                        },
                        error: function () {
                            alert("Error while invoking the Web API");
                        }
                    });
                }
            });
        });

            //window.jsMethod = (updateList) => {
         function updateList () {
            var input = document.getElementById('file');
            var output = document.getElementById('fileList');
            var children = "";
            for (var i = 0; i < input.files.length; ++i) {
                children += '<li>' + input.files.item(i).name + '</li>';
            }
            output.innerHTML = '<ul>' + children + '</ul>';
        }; 
    </script>

如何调用 javascript 函数？

How to call a javascript function?

javascript

blazor-webassembly

asp.net-core-5.0