C# 에서 제공하는 WebBrowser 컨트롤과 컨트롤안에 로드된 javascript 간의 통신방법이다.


1. javascript 에서 C# 호출방법

    아래와 같은 선언이 필요하며, 호출될 메소드는 당연히 public 이어야 한다. 


    [PermissionSet(SecurityAction.Demand, Name = "FullTrust")]

    [ComVisible(true)]

    public partial class AppContainer : Form{

         // .. 중략


        /**

         * 호출될 public 메소드

         * 호출받은 값을 메세지 박스로 보여줌

         */

        public void RecieveJs(Object msg)

        {

            MessageBox.Show(@"받은 값" + msg);

        }

        /**

         *  아래와 같이 호출시 리턴도 가능하다.

         *  디렉토리목록을 보여주고 선택한 디렉토리의 파일목록을 리턴함

         */

        public string ShowDirectory()

        {

            var files = String.Empty;

            var folderBrowser = new FolderBrowserDialog();

            if (folderBrowser.ShowDialog() == DialogResult.OK)

            {

                files = String.Join(",", Directory.GetFiles(folderBrowser.SelectedPath));

            }

            return files;

        }

    }


2. C# 에서 javascript 호출

C# form의 textbox 두개의 값을 버튼 클릭시 javascript 로 보내는 예제이다.

invoikeScript 를 통해 호출할 function 명 및 parameter 를 전송한다.

    // wb 는 WebBrowser 컨트롤 변수명

     private void SendBtn_Click(object sender, EventArgs e)

    {

         if (wb.Document != null)

         {

               Object[] objArray = {textBox1.Text, textBox2.Text};

              // javascript 의 recieveMessage function 을 호출함

               wb.Document.InvokeScript("recieveMessage", objArray);  

          }

     }


이상

'IT > C#' 카테고리의 다른 글

Control Docking  (0) 2014.12.02
폼(Form) 이동 막기  (0) 2014.12.02
HTML , CSS 를 쉽게 만들자~~!

subline Text 라는 툴이 있다.
파이썬으로 개발된 편집기로 매우 막강한 기능을 제공한다.

이 편집기의 기능중 하나인 Zen-coding 이라는게 있다.

이클립스에서는 플러그인으로 이 기능을 사용할 수 있다.


Zen-coding 은 html 또는 css 를 간단한 문법으로 매우 빠르게 생성할 수 있다.


* 설치

이클립스 의 이클립스마켓을 선택한다.(help > Eclipse Marketplace)

Emmet 을 검색한다.




위 그림에 표시된 플러그인을 설치한다.(그림의 경우는 이미 설치된 상태임)


Window > Preferences 를 실행한다.



위그림과 같이 emmet 을 선택후 extensions 부분에 jsp 를 추가한다.(이 부분을 안할 경우 jsp 에서는 동작하지 않는다)


여기까지 했다면 설정은 완료되었다.


이제 간단한 사용법을 살펴보자.

사용법은 css 또는 jquery 의 셀렉터를 생각하면된다.


table>tr>td*3  이와 같이 타이핑후 탭(tab)키를 누르면 아래와 같은 경과가 나온다.

       <table>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

</table>

table 태그 아래 tr 태그 아래 td 태그를 생성하고 td는 3개를 생성하라는 의미이다. 너무나 간단하다.


 태그

 내용

 >

 하위에 태그를 생성한다.

 +

 동등한 위치에 태그를 생성한다.

 * 횟수

 생성할 갯수를 정한다.


이것 이외에 클래스 또는 id 등을 다는 방법은 기본적인 셀렉터와 동일하다.


input:button#btn.btnStyle 이와 같이 입력하면 아래와 같은 결과값이 도출된다.

<input type="button" value="" id="btn" class="btnStyle" />

# 은 id 를  .은 클래스를 생성한다.

또한 input:button 은 input:b 로 줄여서 사용이 가능하다.



그렇다면 역으로 아래와 같은 결과를 뽑기 위해서는 어떻게 작성해야하는가~?


      <table id="list" class="viewList">

<thread>

<tr>

<th></th>

<th></th>

<th></th>

</tr>

</thread>

<tr class="row">

<td class="cell"></td>

<td class="cell"></td>

<td class="cell"></td>

</tr>

<tr class="row">

<td class="cell"></td>

<td class="cell"></td>

<td class="cell"></td>

</tr>

<tr class="row">

<td class="cell"></td>

<td class="cell"></td>

<td class="cell"></td>

</tr>

</table>

  

정답 =>   table#list.viewList>(thread>tr>th*3)+(tr.row*3>td.cell*3)

단 한줄만으로 저러한 table 태그를 생성할 수 있다.

이것 이외에도 매우 많은 기능들이 제공되고 있으며, 아래 사이트에서 확인이 가능하다.



html Zen-coding 문법 확인

css Zen-coding문법 확인


이상~~


+ Recent posts