GitHub의 새로운 저장소인 WebFormsJS가 출시되었습니다!-JS 튜토리얼-php.cn

New Repository on GitHub, WebFormsJS is Here!

WebFormsJS는 CodeBehind 프레임워크에서 웹 컨트롤과 상호 작용하기 위한 인프라를 제공하는 JavaScript 라이브러리입니다. 이를 통해 개발자는 서버측에서 HTML 태그를 쉽게 관리할 수 있습니다.

효율적인 웹 개발을 위한 새로운 아키텍처

웹 개발은 항상 여러 계층의 복잡성과 관리해야 할 수많은 기술로 인해 복잡하고 시간이 많이 걸리는 프로세스였습니다. WebFormsJS는 서버 측에서 웹 컨트롤(HTML 태그)과 상호 작용하기 위한 강력한 인프라를 제공하여 이 프로세스를 단순화함으로써 개발자가 프런트 엔드에 대해 걱정하지 않고 서버 응답에 집중할 수 있도록 하는 새로운 JavaScript 라이브러리입니다.

WebFormsJS를 사용하면 프런트 엔드 개발의 필요성이 상당 부분 제거됩니다. 더 이상 React, Angular, Vue와 같은 프런트엔드 프레임워크를 사용할 필요가 없으며 프런트엔드에서 JavaScript로 작업할 필요도 없습니다. WebFormsJS를 프런트엔드 프레임워크 또는 JavaScript와 동시에 사용하면 프로젝트에 많은 이점을 제공할 수도 있습니다.

다음 예를 참조하세요.

이것은 ID가 MyTag인 div 태그 내부에 콘텐츠를 추가하도록 서버의 페이지를 요청하는 HTML 페이지입니다.

JavaScript를 사용한 간단한 AJAX

<!DOCTYPE html>
<html>
<head>
    <script>
    function loadDoc()
    {
        const xhttp = new XMLHttpRequest();
        xhttp.onload = function()
        {
            document.getElementById("MyTag").innerHTML = this.responseText;
            document.body.style.backgroundColor = "#409354";
            document.getElementsByTagName("h2")[0].setAttribute("align","right");
        }
        xhttp.open("GET", "/AjaxPage.aspx");
        xhttp.send();
    }
    </script>
</head>
<body>
<div id="MyTag"></div>
<div>
    <h2>Request from server</h2>
    <button type="button" onclick="loadDoc()">Set Content</button>
</div>

</body>
</html>

로그인 후 복사

위 코드에 따르면 AJAX 형식으로 페이지의 응답을 수신하는 JavaScript 메소드가 있는 HTML 페이지가 있습니다.

JavaScript 메서드를 실행하면 세 가지 일이 발생합니다.
1- 서버에서 페이지 내용을 찾아 HTML 페이지의 일부에 추가
2- 배경색 변경
3- 태그 중 하나를 오른쪽에서 왼쪽으로 설정

참고: 옵션 2와 3은 클라이언트 측에서 수행되며, 서버에서 변경하려면 서버에 두 번 더 요청해야 하거나 복잡한 프로세스에서 한 번의 요청으로 세 가지 옵션을 모두 검색해야 합니다. .

WebFormsJS를 지원하기 위해 위의 HTML 페이지를 아래와 같이 다시 작성했습니다.

WebFormsJS 사용

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="/script/web-forms.js"></script>
</head>
<body>

<form method="GET" action="/AjaxPage.aspx">
    <div id="MyTag"></div>
    <div>
        <h2>Request from server</h2>
        <input name="MyButton" type="submit" value="Set Content" />
    </div>
</form>

</body>
</html>

로그인 후 복사

아래 링크에서 web-forms.js 파일을 복사해서 script/web-forms.js 경로에 저장했습니다.

https://github.com/elanatframework/Web_forms/blob/elanat_framework/web-forms.js

서버에 페이지를 요청하면 서버는 다음과 같은 응답을 보냅니다.

서버 응답

[web-forms]
stMyTag=Server response text
bc<body>=#409354
ta<h2>=right

로그인 후 복사

우리 Elanat 팀에서는 이 구조를 액션 컨트롤이라고 부릅니다. 액션 컨트롤은 INI 형식으로 수신되는 WebFormsJS 수신 코드입니다. WebFormsJS는 서버 응답에 액션 컨트롤이 있는지 여부를 자동으로 감지합니다. 서버의 응답이 [web-forms]로 시작하는 INI 파일의 구조를 기반으로 하는 경우 액션 컨트롤을 처리하고, 그렇지 않은 경우 페이지에서 AJAX 형식의 서버 응답을 대체합니다.

Line 1: stMyTag=Server response text 여기서 처음 두 문자는 st로 텍스트를 설정한다는 의미이며, 그 다음에는 ID가 MyTag인 태그에 적용되어야 함을 지정하고 동일한 문자 뒤에는 (=) 받은 문자가 있습니다.
Line 2: bc=#409354 여기서 처음 두 글자는 bc로 배경색을 의미하고 그 다음에는 body 태그에 적용하도록 지정하고, 뒤에는 등호 문자(= ) 색상값이 있습니다.
3행 : ta
=right 여기서 처음 두 글자는 ta로 텍스트 정렬을 뜻하며, 이후 li라는 태그에 적용할 것으로 판단하고, 뒤에는 등호(=) 문자가 옵니다. 오른쪽에서 왼쪽으로라는 뜻의 right 값이 있습니다.

서버 측의 WebFormsJS

유연한 백엔드 프레임워크를 사용하면 액션 컨트롤 생성을 위한 프로세스를 쉽게 만들 수 있습니다. 그렇지 않으면 소유자나 개발자에게 백엔드 프레임워크의 핵심을 다시 작성하거나 WebFormsJS를 지원하는 새 모듈을 생성하도록 요청할 수 있습니다.

CodeBehind 프레임워크에서 WebFormsJS를 사용하는 예

선택 유형의 입력이 있는 새 보기를 만듭니다. 선택 항목에 새 옵션 값을 추가하려고 하므로 보기에 새 옵션의 이름과 값에 대한 두 개의 텍스트 상자 입력을 넣고 이 보기에서 새 옵션이 선택되었는지 여부에 대한 확인란 입력도 만듭니다. .

보기(Form.aspx)

@page
@controller FormController
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Send Form Data</title>
    <script type="text/javascript" src="/script/web-forms.js"></script>
</head>
<body>
    <form method="post" action="/Form.aspx">

        <label for="txt_SelectName">Select name</label>
        <input name="txt_SelectName" id="txt_SelectName" type="text" />
        <br>
        <label for="txt_SelectValue">Select value</label>
        <input name="txt_SelectValue" id="txt_SelectValue" type="text" />
        <br>
        <label for="cbx_SelectIsSelected">Select Is Selected</label>
        <input name="cbx_SelectIsSelected" id="cbx_SelectIsSelected" type="checkbox" />
        <br>
        <label for="ddlst_Select">Select</label>
        <select name="ddlst_Select" id="ddlst_Select">
            <option value="1">One 1</option>
            <option value="2">Two 2</option>
            <option value="3">Three 3</option>
            <option value="4">Four 4</option>
            <option value="5">Five 5</option>
        </select>
        <br>
        <input name="btn_Button" type="submit" value="Click to send data" />

    </form>
</body>
</html>

로그인 후 복사

먼저 IgnoreViewAndModel 속성을 활성화합니다. 이렇게 하면 보기 페이지가 반환되는 것을 방지할 수 있습니다. 그런 다음 WebForms 클래스의 인스턴스를 생성하고 Form 메서드를 통해 전송된 값에 따라 드롭다운 목록에 새 값을 추가합니다. 마지막으로 WebForms 클래스의 생성된 인스턴스를 Control 메서드 내에 배치해야 합니다.

컨트롤러(FormController)

public partial class FormController : CodeBehindController
{
    public void PageLoad(HttpContext context)
    {
        if (!string.IsNullOrEmpty(context.Request.Form["btn_Button"]))
            btn_Button_Click(context);
    }

    private void btn_Button_Click(HttpContext context)
    {
        IgnoreViewAndModel = true;

        Random rand = new Random();
        string RandomColor = "#" + rand.Next(16).ToString("X") + rand.Next(16).ToString("X") + rand.Next(16).ToString("X") + rand.Next(16).ToString("X") + rand.Next(16).ToString("X") + rand.Next(16).ToString("X");

        WebForms Form = new WebForms();

        string SelectValue = context.Request.Form["txt_SelectValue"];
        string SelectName = context.Request.Form["txt_SelectName"];
        bool SelectIsChecked = context.Request.Form["cbx_SelectIsSelected"] == "on";

        Form.AddOptionTag(InputPlace.Id("ddlst_Select"), SelectName, SelectValue, SelectIsChecked);
        Form.SetBackgroundColor(InputPlace.Tag("body"), RandomColor);

        Control(Form);
    }
}

로그인 후 복사

Each time the button is clicked, new values are added to the drop-down list and the background changes to a random color.

This is a simple example of CodeBehind framework interaction with WebFormsJS.

These features will be available in version 2.9 of the CodeBehind framework. In the coming days, version 2.9 of the CodeBehind framework will be released.

Advantages of WebFormsJS over using JavaScript and AJAX:

Simplified code: WebFormsJS provides a simpler and more concise way of interacting with web controls on the server-side, reducing the complexity of code and making it easier to maintain.
Automatic form serialization: WebFormsJS automatically serializes form data, eliminating the need to manually serialize and deserialize data using techniques like JSON or XML.
Progress bar: WebFormsJS includes a progress bar that displays the amount of data sent on the screen, providing a more engaging user experience.
Server-Side processing: WebFormsJS allows for server-side processing of form data, enabling more complex logic and validation to be performed on the server-side.
Support for multiple controls: WebFormsJS supports multiple controls, including checkboxes, radio buttons, select boxes, and text inputs, making it easy to interact with multiple controls on the server-side.
Customizable: WebFormsJS provides customizable options, such as the ability to set the progress bar display, error messages, and other settings.
Robust infrastructure: WebFormsJS provides a robust infrastructure for interacting with web controls on the server-side, making it suitable for large-scale applications.

In contrast, using JavaScript and AJAX:

Requires manual serialization and deserialization of form data
Does not provide a progress bar or error handling
Does not support multiple controls or server-side processing
Is more verbose and complex to use

Comparison with Frontend Frameworks

Frontend frameworks like React, Angular, and Vue have gained popularity in recent years for their ability to create dynamic and interactive user interfaces. However, compared to WebFormsJS, they have some key differences:

Complexity: Frontend frameworks can be complex to set up and require a deep understanding of JavaScript and the framework itself. In contrast, WebFormsJS simplifies web development by allowing developers to focus on server-side interactions and control the HTML elements.

Performance: While frontend frameworks offer high performance and efficiency, WebFormsJS also boasts high performance and low bandwidth consumption. It efficiently manages server responses and controls HTML tags, reducing the complexity of web development.

Customization: Frontend frameworks offer extensive customization options and flexibility to create unique user interfaces. WebFormsJS also provides customization options, such as postback, progress bar, and script extraction, but focuses more on server-side interaction.

Action Controls: WebFormsJS introduces the concept of Action Controls, which are received in INI format to define specific actions for HTML tags. This provides a clear and structured way to handle server responses and modify controls on the page.

Conclusion

WebFormsJS is a powerful JavaScript library that simplifies web development by providing a robust infrastructure for interacting with web controls on the server-side. Its advanced system, low bandwidth consumption, and customization options make it an attractive choice for developers looking to build efficient and scalable web applications.