Heim  >  Artikel  >  Web-Frontend  >  So implementieren Sie die modulare Isolierung von Seiteninhalten in der Bootstrap-Frontend-Ansicht

So implementieren Sie die modulare Isolierung von Seiteninhalten in der Bootstrap-Frontend-Ansicht

青灯夜游
青灯夜游nach vorne
2021-06-18 11:15:092139Durchsuche

In diesem Artikel erfahren Sie BootstrapWie Sie @RenderPage in der Front-End-Ansicht verwenden, um eine modulare Isolierung des Seiteninhalts zu erreichen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

So implementieren Sie die modulare Isolierung von Seiteninhalten in der Bootstrap-Frontend-Ansicht

In vielen Entwicklungsszenarien müssen wir Abstraktion, Modularität und andere Aspekte berücksichtigen. Der Zweck besteht darin, den Fokus der Entwicklung weniger auf Änderungen zu legen und dadurch die Komplexität der Entwicklung zu verringern Bei der Entwicklung von Winform kann dieser Zweck häufig durch die Definition von Basisklassenmodulen und Benutzersteuerelementen erreicht werden.

Und können wir diese Funktionen auch während der Webentwicklung nutzen? Können diese Merkmale insbesondere im HTML in der MVC-Ansichtsvorlage verwendet werden, um die sich ändernden Teile zu isolieren, wodurch die Komplexität der gesamten Seite verringert und die Wiederverwendbarkeit des Moduls verbessert wird?

In diesem Aufsatz wird die Verwendung von @RenderPage in der MVC-Ansichtsverarbeitung von Asp.NET vorgestellt, um eine modulare Isolierung des Seiteninhalts zu erreichen und die Komplexität zu reduzieren. [Verwandte Empfehlungen: „Bootstrap-Tutorial“]

1. Sehen Sie sich die Schnittstellenverarbeitungsmethode von Winform an. Nehmen Sie zur Veranschaulichung die Verarbeitung von Workflow-Formularen Die folgenden Formularregeln und Verarbeitungslogiken sind ähnlich, sodass diese unveränderten Inhalte in die Basisklassenschnittstelle extrahiert werden können. Für die Winform-Methode können wir dies durch Erben verschiedener Geschäftsformularobjekte erreichen, wie in der folgenden Verarbeitungsmethode gezeigt.



Da die Basisklasse bestimmt ist und die meisten Verarbeitungsregeln kapselt, müssen bei der Unterklassenschnittstelle lediglich die mit der Geschäftsschnittstelle verbundenen Zuweisungs- oder Wertlesevorgänge verarbeitet werden Geschäftsformulare sind einfach zu erstellen. Sie müssen lediglich den geänderten Inhalt in das Unterformular einfügen.

Zum Beispiel ist die Vererbungsbeziehung der Formularschnittstelle für die Antragsformulare für Geschäftsreisen und Konferenzräume wie folgt.

So wird die Winform-Schnittstelle mit ähnlichen Regeln in der Front-End-Ansicht des Bootstrap-Entwicklungsframeworks verarbeitet.

Die Antwort besteht darin, @RenderPage zu verwenden, um eine modulare Isolierung des Seiteninhalts zu erreichen.

2. Verwenden Sie @RenderPage, um eine modulare Isolierung des Seiteninhalts zu erreichen.

Im Allgemeinen ist uns zu Beginn aufgefallen, dass bei Verwendung des Masters in der MVC-Ansicht derselbe Teil des Seitenlayouts, das untergeordnete Fenster, vorhanden war isoliert Der Körper muss nur verschiedene Teile des Ansichtscodes definieren.



Darüber hinaus können wir @RenderPage auch in Unterseiten verwenden, um den Inhalt verschiedener Geschäftsschnittstellen zu unterscheiden und zu isolieren.

Zum Beispiel zum Erstellen des Ansichtsinhalts der Formularoberfläche.

Die obige Ansicht ist in mehrere Teile unterteilt. Die Benutzeroberfläche für die Auswahl ist ein Popup-Benutzerauswahlfeld, das wir benötigen in eine Ansichtsseite extrahiert werden, und der Seiteninhalt kann bei Bedarf direkt mithilfe von @RenderPage modularisiert werden.

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

Wenn der Benutzer auf die Schaltfläche [Prozessprozessor auswählen] klickt, wird eine p-Ebene angezeigt. Dies ist die Auswahl-Benutzeroberfläche, die wir gerade mit @RenderPage implementiert haben. Diese Verarbeitungsmethode ist flexibler und kann bei Bedarf verwendet werden. Fügen Sie es einfach ein. Sie müssen große Codeabschnitte nicht wiederholt kopieren, was die Wartung des Codes erleichtert.

Ähnlich verhält es sich mit der Ansichtsformularschnittstelle: Obwohl der Schnittstelleninhalt viel komplizierter ist als die Schnittstelle zum Erstellen eines neuen Geschäftsformulars, verwendet sie dieselbe Verarbeitungsmethode.

Gerade haben wir gesehen, dass in der Winform-Schnittstelle die folgende Ansichtsvererbungsmethode verwendet wird.

In der MVC-Ansichtsschnittstelle wird @RenderPage verwendet, um den Seiteninhalt zu modularisieren.

这样主视图和子视图虽然同名,但是它们是在不同的控制器名下,这样我们在父页面视图的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")

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

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

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

更多编程相关知识,请访问:编程入门!!

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die modulare Isolierung von Seiteninhalten in der Bootstrap-Frontend-Ansicht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:cnblogs.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen