Bootstrap 프런트 엔드 보기에서 페이지 콘텐츠의 모듈식 격리를 구현하는 방법

이 기사에서는 Bootstrap페이지 콘텐츠의 모듈식 격리를 달성하기 위해 프런트 엔드 보기에서 @RenderPage를 사용하는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

많은 개발 시나리오에서 추상화 및 모듈화와 같은 측면을 고려해야 하는 경우가 많습니다. 목적은 개발의 초점을 변경에 덜 집중하여 개발의 복잡성을 줄이는 것입니다. Winform을 개발할 때 이 목적은 기본 클래스 모듈과 사용자 컨트롤을 정의하여 달성할 수 있는 경우가 많습니다.

그리고 웹 개발 중에도 이러한 기능을 활용할 수 있나요? 특히 MVC 뷰 템플릿의 HTML에서 이러한 특성을 사용하여 변경되는 부분을 격리함으로써 전체 페이지의 복잡성을 줄이고 모듈의 재사용성을 향상시킬 수 있습니까?

이 에세이에서는 페이지 콘텐츠의 모듈식 격리를 달성하고 복잡성을 줄이기 위해 Asp.NET의 MVC 뷰 처리에서 @RenderPage를 사용하는 방법을 소개합니다. [관련 권장 사항: "bootstrap Tutorial"]

1. Winform의 인터페이스 처리 방법을 검토합니다

---

프로세스를 처리할 때 대부분의 경우 워크플로 양식 처리를 예로 들어 보겠습니다. 양식 아래의 규칙과 처리 논리는 유사하므로 이러한 변경되지 않은 내용을 기본 클래스 인터페이스로 추출할 수 있습니다. Winform 메서드의 경우 다음 처리 메서드에 표시된 것처럼 다양한 비즈니스 양식 개체를 상속하여 이를 달성할 수 있습니다.

기본 클래스가 결정되고 대부분의 처리 규칙을 캡슐화하므로 하위 클래스 인터페이스의 경우 처리해야 할 것은 비즈니스 인터페이스와 관련된 할당 또는 값 읽기 작업뿐입니다. 비즈니스 양식은 하위 양식에 변경된 내용만 넣으면 쉽게 만들 수 있습니다.

예를 들어 출장 신청서와 회의실 이용 신청서의 경우 양식 인터페이스 상속 관계는 다음과 같습니다.

이것은 Winform 인터페이스가 처리되는 방식입니다. Bootstrap 개발 프레임워크의 프런트 엔드 보기에서 유사한 규칙을 사용하여 이러한 인터페이스의 분리 작업을 처리하는 방법은 무엇입니까?

답은 @RenderPage를 사용하여 페이지 콘텐츠를 모듈식으로 분리하는 것입니다.

2. @RenderPage를 사용하여 페이지 콘텐츠의 모듈식 격리 달성

---

일반적으로 처음에는 MVC 뷰에서 마스터를 사용할 때 페이지 레이아웃의 동일한 부분인 하위 창이 분리된 본문은 뷰 코드의 다른 부분만 정의하면 됩니다.

또한 하위 페이지에서 @RenderPage를 사용하여 다양한 비즈니스 인터페이스의 콘텐츠를 구별하고 격리할 수도 있습니다.

예를 들어 양식 인터페이스의 보기 콘텐츠를 생성하는 경우입니다.

위 보기는 여러 부분으로 나누어져 있습니다. 하나는 양식을 만드는 인터페이스 처리입니다. 관련된 선택 사용자 인터페이스는 사용자 선택 처리가 일반적인 작업이므로 필요합니다. 뷰 페이지로 추출하고, 필요할 때 @RenderPage를 사용하여 페이지 콘텐츠를 직접 모듈화할 수 있습니다.

@RenderPage("~/Views/Apply/SelectUser.cshtml")

사용자가 [프로세스 프로세서 선택] 버튼을 클릭하면 p 레이어가 팝업됩니다. 이는 @RenderPage를 사용하여 방금 구현한 선택 사용자 인터페이스입니다. 이 처리 방법은 필요할 때 사용할 수 있습니다. 단지 포함시키면 큰 코드 섹션을 반복적으로 복사할 필요가 없으므로 코드 유지 관리가 더 쉬워집니다.

마찬가지로 보기 양식 인터페이스의 경우 인터페이스 내용이 새 비즈니스 양식을 생성하는 인터페이스보다 훨씬 복잡하지만 동일한 처리 방법을 사용합니다.

방금 우리는 Winform 인터페이스에서 다음과 같은 뷰 상속 방법이 사용되는 것을 보았습니다.

MVC 뷰 인터페이스에서 @RenderPage는 페이지 콘텐츠를 모듈화하는 데 사용됩니다.

这样主视图和子视图虽然同名，但是它们是在不同的控制器名下，这样我们在父页面视图的ViewDetail.cshtml就可以封装一些常见的处理界面内容，而留下部分和具体业务表单相关的展示内容放在子页面的ViewDetail.cshtml里面即可。

在页面地址中，得到完整的页面访问路径是：/Reimbursement/ViewDetail?id=8f32231d-852e-9f16-6e5a-79031c8ec995，这个URL其实就是访问具体业务视图下的内容，但是业务视图已经引用了父页面共同的部分。

我们来看看具体业务表单中的视图页面代码，如下所示。

其中的不变的业务界面内容（理解为父窗体也可以），我们通过引用页面的方式把它包含进来。

<!--此处放置业务表单的数据呈现，方便隔离，减少复杂性-->
@RenderPage("~/Views/Apply/ViewDetail.cshtml", new { applyId = Request["id"] })

这样就把它们分开维护了，共同的部分就在这个 Views/Apply/ViewDetail.cshtml 视图页面里面了。

而这个共同的部分，则可以封装常规的事件处理，和界面展示，如下是界面视图的截图说明。

其中我们还可以看到通用选择用户的视图层界面

@RenderPage("~/Views/Apply/SelectUser.cshtml")

最后我们来看看两个不同的视图界面效果，以烘托一下隔离界面也不影响整体效果，但是可以降低代码的维护复杂性。

新建业务流程表单如下界面所示。

查看具体流程表单明细的界面如下所示。

更多编程相关知识，请访问：编程入门！！

위 내용은 Bootstrap 프런트 엔드 보기에서 페이지 콘텐츠의 모듈식 격리를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!