SharePoint 2013 - Handling page display modes in webpart

Overview
As you might already know that a SharePoint webpart page can be rendered in 3 different modes:-
1) Display mode: This is the page mode when the end user is browsing the site;
2) Design mode: This is the page mode when the user can design the page layout;
3) Edit mode: This is the page mode when the end user is configuring/customizing the page and/or its controls.

WebPartManager.DisplayMode Property
To identify the page display mode and render a Web Part accordingly, you need to query the DisplayMode property of the WebPartManager (SPWebPartManager in SharePoint).

Code Sample
Lets take a closer look by creating a simple webpart and analyzing the different display modes.

1) Create an empty SharePoint project and add a classic webpart named "WPDisplayModesDemo".

2) Write the following code in the CreateChildControls() event. Looking at the code you will observe that WebPartManager.DisplayMode Property is used to define functionality for different modes.
i) For Display mode the text will be "You are now viewing the webpart in Page Display Mode."
ii) For Design mode the text will be "You are now viewing the webpart in Page Design Mode."
iii) For Edit mode the text will be "You are now viewing the webpart in Page Edit Mode."

Following is the complete code for CreateChildControls() method.

Code Snippet

15. protected override void CreateChildControls()
16.         {
17.             if (this.WebPartManager.DisplayMode == WebPartManager.BrowseDisplayMode)
18.             {
19.                 // Page Display mode
20.                 this.Controls.Add(new LiteralControl(@"<div>You are now viewing the webpart in Page Display Mode.</div>"));
21.             }
22.             else if (this.WebPartManager.DisplayMode == WebPartManager.DesignDisplayMode)
23.             {
24.                 // Page Design mode
25.                 this.Controls.Add(new LiteralControl(@"<div>You are now viewing the webpart in Page Design Mode.</div>"));
26.             }
27.             else if (this.WebPartManager.DisplayMode == WebPartManager.EditDisplayMode)
28.             {
29.                 // Page Edit mode
30.                 this.Controls.Add(new LiteralControl(@"<div>You are now viewing the webpart in Page Edit Mode.</div>"));
31.             }
32.         }

3) Deploy the webpart. Open the target webpart page in Edit Mode and add the webpart.

4) The webpart page's initial mode will be Design mode, therefore the text displayed in the webpart will be "You are now viewing the webpart in Page Display Mode".

5) Click the webpart menu and choose Edit Web Part.

6) Now the webpart page's mode will be Edit mode, therefore the text displayed in the webpart will be "You are now viewing the webpart in Page Edit Mode."

7) Select "Stop Editing" button on the top-left corner of the page for rendering the page in Display Mode.

8)  Now the webpart page's mode will be Display mode, therefore the text displayed in the webpart will be "You are now viewing the webpart in Page Display Mode."

This is the basic implementation of WebPartManager.DisplayMode property for handling web part display modes. Hope this post is helpful to you!