Q & A

시삽: 레드플러스 님 
게시판 이동:
 제목 : Re : blazor 콤포넌트내에서 자바스크립트를 수행하려고  합니다.
글번호: 1025
작성자: 레드플러스
작성일: 2022/02/18 오전 5:20:00
조회수: 2157

 

안녕하세요.

 

Blazor의 razor 파일에서는 직접 JavaScript의 스크립트 블록이 실행되지 않습니다.

예를 들어, 서버에서 직접 스크립트 블록을 만들어서 전달해준 값을

특정 페이지에서 실행하고자 한다면,

 

MVC 영역에서 cshtml 파일 위에 @Html.Raw() 메서드 안에서 script 블록을 실행해야 합니다.

 

Blazor에서는 이미 살펴보셨겠지만, JS 인터롭을 사용하여

window 개체에 담긴 JavaScript 전역 함수를 호출하는 식으로 JavaScript를 사용할 수 있습니다.

https://docs.microsoft.com/ko-kr/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-6.0

 

아참 그리고, 저는 아직까지는 Blazor WebAssembly를 사용하고 있진 않습니다.

 

도움 못드려 죄송합니다.

 

감사합니다.

 

 

 

 


On 2022-02-17 오후 5:24:00, '박성훈' wrote:

 

 


안녕하세요. 

현재 blazor/aspnetcore를 이용해서 솔루션을 만들고 있는 직장인입니다.

blazor 페이지 내의 특정 버튼을 누를 경우 CS 프로그램과의 연계를 위해서 아래와 같이 구성하고 검증 중인데 계속 오류가 나서 질의를 드리고자 합니다.

  1. blazor 컴포넌트내의 특정 버튼을 누르면, 백엔드 API서버로 관련 요청을 보내고 백엔드 API서버는 custom uri scheme 정보를 포함한 html 응답을 보낸다.
  2. blazor 서비스는 관련 html응답을 받고, 응답내에 포함한 자바스크립트를 수행한다.

에러 메시지를 보면 관련 자바스크립트 함수를 못 찾는다고 나오는데, blazor의 wwwroot내에 미리 저장할 수 있는 형태가 아니라서, 어떻게 고쳐야 할지 해결책이 필요합니다.

[blazor component]

await RestBuilderService.Edit(id, testCase, testType);
await Js.InvokeVoidAsync("RunRestBuilder");

[blazor service]

public async Task<string> Edit(string id, string testCase, string testType)
        {
            var queryStringParam = new Dictionary<string, string>
            {
                ["projectName"] = await _localStorage.GetItemAsync<string> 
        ("projectName"),
                ["id"] = id,
                ["testCase"] = testCase ?? string.Empty,
                ["testType"] = testType};
            using (var response = await 
      _client.GetAsync(QueryHelpers.AddQueryString("restbuilder/edit", 
      queryStringParam)))
            {
                if (!response.IsSuccessStatusCode)
                {
                    var error = await response.Content.ReadAsStringAsync();
                    _snackbar.Add($"error occured. errorMessage:{error}", 
       Severity.Error);
                    return string.Empty;
                }

                var result = await response.Content.ReadAsStringAsync();

                return result;
            }
        }

 

[server response]

<!doctype html>
<html lang=\"en\">
 <head>
   <script src=\"/res/vender/jquery/jquery-3.5.1.min.js\"></script>
   <script type=\"text/javascript\">
     $(document).ready(function() {
       RunRestBuilder(
     }
   </script>
     <script language=\"JavaScript\" type=\"text/javascript\">
         function RunRestBuilder()         
  {location.href="APIRunner://runmode:0;username:pink;password:xxx;project:myproject;id: 
  {1};testcase:{test};testtype:{1};";
         }
    </script>
 </head>
 <body>
   <a href="#"onclick=\"RunRestBuilder(\">Execute</a>
 </body>
</html>

[Error Message]

'Could not find 'RunRestBuilder' ('RunRestBuilder' was undefined).Error: Could not find 'RestBuilder' ('RestBuilder' was undefined). at http://localhost:5002/_framework/blazor.webassembly.js:1:1287 at Array.forEach ()\n at e.findFunction (http://localhost:5002/_framework/blazor.webassembly.js:1:1247) at b (http://localhost:5002/_framework/blazor.webassembly.js:1:2989) at http://localhost:5002/_framework/blazor.webassembly.js:1:3935 at new Promise () at Object.beginInvokeJSFromDotNet (http://localhost:5002/_framework/blazor.webassembly.js:1:3908) at Object.w [as invokeJSFromDotNet] (http://localhost:5002/_framework/blazor.webassembly.js:1:64232) at _mono_wasm_invoke_js_blazor (http://localhost:5002/_framework/dotnet.5.0.13.js:1:190800) at do_icall (wasm://wasm/00aba242:wasm-function[10596]:0x194e4e)' 

 
이전 글   다음 글 삭제 수정 답변 글쓰기 리스트

(댓글을 남기려면 로그인이 필요합니다.)

관련 아티클 리스트
  제       목 파일 작성자 작성일 조회
이전글 ASP.NET & Core를 다루는 기술 예제 관련 - 김창환 2022-02-26 2229
  blazor 콤포넌트내에서 자바스크립트를 수행하려고  합니다. - 박성훈 2022-02-17 1987
현재글 Re : blazor 콤포넌트내에서 자바스크립트를 수행하려고  합니다. - 레드플러스 2022-02-18 2157
다음글 blazor의 궁금한 점이 있습니다. - C#만세 2022-02-14 1892
 
손님 사용자 Anonymous (손님)
로그인 Home