Difference between revisions of "MVC Templates"

m (TCAWiki moved page Enable MVC Templates to MVC Templates without leaving a redirect)
 
(90 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
'''<span style="color:red">Currently MVC templates are only supported on Windows.</span>''' The MVC templates are currently in beta testing.
+
MVC Templates allow you to edit the HTML for all or each individual page. If you only want to edit colors of the theme see [[MVC Themes]].
 +
 
 
== Features ==
 
== Features ==
 +
* Editable HTML templates.
 +
** Create a new theme in Settings > Themes. Set the type to MVC. A folder will be created in TCAdmin2\ControlPanel.MVC\Views where you can place your custom .cshtml and images.
 +
** Your custom template folder only needs to have the files that have been modified.
 +
** If a file doesn't exist in your custom template it will use the file from ~/Views/Default/. Use the same directory structure as the Default template.
 +
** You can safely add new files to the default template folder but all the original files will be overwritten when you update TCAdmin.
 +
** To translate MVC templates go to Settings > Languages > select the language > Other Components > Resources.*.
 
* The following features are configurable in the game settings:
 
* The following features are configurable in the game settings:
−
** Custom background images per game. Place the images in TCAdmin2\ControlPanel.MVC\Views\Default so they are used in all your custom themes.
+
** Custom service home page template per game. (change whole layout of the service home page)
−
** Custom service home page template per game.
+
** Custom status template per game. (change which information and ports are displayed)
−
** Custom status template per game.
 
 
** Join URL
 
** Join URL
−
* Responsive design.
+
<table><tr><td>[[File:MVCPreview1.png|800px]]</td><td>[[File:MVCPreview2.png|thumb]]</td></tr></table>
−
* When creating a new theme in Settings > Themes you can set the theme type to MVC. A folder will also be created in TCAdmin2\ControlPanel.MVC\Views where you can place your custom .cshtml and images. Keep the same directory structure as the Default template.
 
  
 +
== Requirements ==
 +
* '''.NET 4.7.2''' (Windows) or '''Mono 6.x''' (Linux) must be installed on your server.
 +
* Install TCAdmin version '''2.0.127.0''' or greater.
  
−
[[File:MVCPreview1.png]] [[File:MVCPreview2.png]]
+
== Configure TCAdmin ==
 +
New installations already have MVC enabled by default.
  
−
== Requirements ==
+
* Edit TCAdmin2\Monitor\TCAdminMonitor.exe.config or /home/tcadmin/Monitor/TCAdminMonitor.exe.config. Add these lines under <appSettings> (update them if they already exist).
−
* .NET '''4.5''' must be installed on your server.
+
<add key="TCAdmin.Public.MVC" value="True" />
−
* Install TCAdmin version 2.0.126.0 or greater.
+
<add key="TCAdmin.Public.MVC.WebServicesPath" value="../ControlPanel.MVC" />
 +
* Restart the monitor service.
 +
* <span style="color:red">'''Important for Linux users:'''</span>
 +
** Https is not supported by the built in web server when "TCAdmin.Public.MVC" is set to True. To use https you must [[MVC_Templates#Linux_Nginx_configuration_.28optional.29|configure your control panel with Nginx]].
 +
 
 +
== Update the WHMCS module (optional) ==
 +
Make a backup of your /whmcs/modules/servers/tcadmin2_advanced/tcadmin2_advanced.php and replace it the one included in the tcadmin2_advanced module for MVC. This module has the links updated to work with the MVC template format. [http://clients.tcadmin.com/downloads.php?action=displaycat&catid=5 You can download the module from the client area]
  
−
== Stop the monitor ==
+
== Linux Nginx configuration (optional) ==
−
* Stop the monitor service.
+
Configure Nginx with these instructions [[Configure_the_TCAdmin_website_to_run_with_Nginx]]
 +
<!--
 +
upstream tcadmin-fcgi {
 +
        ip_hash;
 +
        server unix:/home/tcadmin/Temp/fastcgi-socket-1;
 +
        keepalive 32;
 +
}
 +
 +
upstream tcadmin-fcgi-mvc {
 +
        ip_hash;
 +
        server unix:/home/tcadmin/Temp/fastcgi-socket-mvc-1;
 +
        keepalive 32;
 +
}
 +
 +
server {
 +
        #the following line is required if you want to configure with Let's Encrypt
 +
        #server_name tcadmin.yourdomain.com;
 +
        fastcgi_temp_path /home/tcadmin/Temp 1 2;
 +
        client_body_temp_path /home/tcadmin/Temp 1 2;
 +
        listen  8880;
 +
        #access_log  /home/tcadmin/Logs/nginx.log;
 +
        root /home/tcadmin/ControlPanel.MVC;
 +
        index index.html index.htm default.aspx Default.aspx;
 +
 +
        #Support for Let's encrypt tools
 +
        location /.well-known {
 +
                try_files $uri $uri/ =404;
 +
        }
 +
 +
        #Everything else served by fastcgi server
 +
        location / {
 +
                root /home/tcadmin/ControlPanel.MVC;
 +
                fastcgi_ignore_client_abort on;
 +
                fastcgi_pass tcadmin-fcgi-mvc;
 +
                include fastcgi_params;
 +
                fastcgi_split_path_info ^(.+\.as[pmh]x)(.*)$;
 +
                fastcgi_param PATH_INFO $fastcgi_path_info;
 +
                fastcgi_param  SCRIPT_FILENAME    $document_root$fastcgi_script_name;
 +
                fastcgi_keep_conn on;
 +
                fastcgi_buffering off;
 +
                fastcgi_read_timeout 600s;
 +
                gzip            off;
 +
                client_max_body_size 100m;
 +
        }
 +
 +
        #Everything else served by fastcgi server
 +
        location /Aspx {
 +
                root /home/tcadmin/ControlPanel;
 +
                fastcgi_ignore_client_abort on;
 +
                fastcgi_index Default.aspx;
 +
                fastcgi_pass tcadmin-fcgi;
 +
                include fastcgi_params;
 +
                fastcgi_split_path_info ^(.+\.as[pmh]x)(.*)$;
 +
                fastcgi_param PATH_INFO $fastcgi_path_info;
 +
                fastcgi_param  SCRIPT_FILENAME    $document_root$fastcgi_script_name;
 +
                fastcgi_keep_conn on;
 +
                fastcgi_buffering off;
 +
                fastcgi_read_timeout 600s;
 +
                gzip            off;
 +
                client_max_body_size 100m;
 +
        }
 +
}
 +
-->
  
−
== Generate a machine key ==
+
== Windows IIS configuration (optional) ==
−
TCAdmin starts 2 web applications. The classic ASP.NET web app and the MVC web app. Both need to have the same machine key.
+
* Configure the website in IIS with these instructions: [[Frequently_Asked_Questions#Configure_the_TCAdmin_website_to_run_with_IIS|Configure_the_TCAdmin_website_to_run_with_IIS]]
−
* Make a copy of TCAdmin2\ControlPanel\Windows.config and name it Windows.Custom.config.
 
−
* Make a copy of TCAdmin2\ControlPanel.MVC\Windows.config and name it Windows.Custom.config.
 
−
* Use this tool to generate an ASP.NET 2.0 Machine Key. http://www.developerfusion.com/tools/generatemachinekey/ '''Do this even if you already had a custom Machine Key. This will force the users to log out of their current session.'''
 
−
* Edit the 2 Windows.Custom.config with notepad. Replace the following line with the value generated in the previous step. If you run IIS with the built in website disabled you must also update your Web.config because it won't get updated automatically.
 
−
<machineKey validation="AES" decryption="AES" decryptionKey="AutoGenerate" validationKey="AutoGenerate" />
 
  
−
== IIS configuration (optional) ==
+
== Edit Templates in Visual Studio 2017/2019 ==
−
* Configure the website in IIS with these instructions: [[Frequently_Asked_Questions#Configure_the_TCAdmin_website_to_run_with_IIS|Configure_the_TCAdmin_website_to_run_with_IIS]] The only difference is that your main website will point to '''TCAdmin2\ControlPanel.MVC'''. If you already have your website configured in IIS just change the website path to '''TCAdmin2\ControlPanel.MVC'''.
+
* Go to settings > Themes > Create a new MVC theme. This is the template that you will be editing in Visual Studio.
−
* Right click on the control panel website and select add application. Set the alias to Aspx and point it to '''TCAdmin2\ControlPanel'''. Both must run with the classic .NET application pool.
+
* Copy TCAdmin2\ControlPanel.MVC and TCAdmin2\Monitor\Shared to your PC.
 +
* Rename ControlPanel.MVC\Web.VS2017.config to ControlPanel.MVC\Web.config
 +
* Edit ControlPanel.MVC\Web.config in notepad.
 +
** Update the value of "TCAdmin.SharedPath" to the correct path.
 +
** Update "TCAdmin.Database.MySql.ConnectionString" with your MySQL info. If the connection string is encrypted use these lines and change MYSQLIP, MYSQLUSER, MYSQLPASSWORD and MYSQLDB with the correct values. You can connect to your master's database or to a local copy.
 +
<add key="TCAdmin.Database.MySql.ConnectionString" value="Data Source=MYSQLIP;User Id=MYSQLUSER;Password=MYSQLPASSWORD;Database=MYSQLDB;Pooling=false;Compress=false;Connection Lifetime=900;Connect Timeout=30;Protocol=TCP" />
 +
<add key="TCAdmin.Database.MySql.ConnectionString.Encrypted" value="False" />
 +
* Run Visual Studio.
 +
** select File > Open > Web Site. Select your ControlPanel.MVC folder.
 +
** Select Website > Start Options from the menu.
 +
** In Build > Before running startup page select "No build" and click on OK. Depending on your Visual Studio version this might be in Build > Configuration Manager > Uncheck build next to the website.
 +
** You should be able to run the solution and it will load the control panel website. '''Only MVC content will render correctly. Classic ASP.NET content will show a server error.'''
 +
** Don't edit the files from the default template. To edit a specific page copy it from ControlPanel.MVC\Views\Default to ControlPanel.MVC\Views\(YourTemplate) keeping the same directory structure. You don't need to copy all files. If a file is not in your template the default file will be used.
 +
** You should have full intellisense support when editing the template files. If you see an errors about missing references copy the file from Shared to ControlPanel.MVC\bin and restart Visual Studio.
  
−
== Update the monitor configuration ==
+
== Edit Templates with a text editor ==
−
* Edit TCAdmin2\Monitor\TCAdminMonitor.exe.config. Add these lines under <appSettings> (update them if they already exist).
+
* Create a new theme in Settings > Themes. Set the type to MVC. A folder will be created in TCAdmin2\ControlPanel.MVC\Views where you can place your custom .cshtml and images.
−
<add key="TCAdmin.Public.MVC" value="True" />
+
* Copy the file you want to customize from TCAdmin2\ControlPanel.MVC\Views\Default to TCAdmin2\ControlPanel.MVC\Views\(YourTemplate). You must keep the same directory structure of the original file. For example to customize the login page copy Views\Default\Base\Login\Index.cshtml to Views\(YourTemplate)\Base\Login\Index.cshtml and edit Index.cshtml with a text editor.
−
<add key="TCAdmin.Public.MVC.WebServicesPath" value="../ControlPanel.MVC" />
 
  
−
== Start the monitor ==
+
== Adding code to existing .cshtml file without modifying it ==
−
* Start the monitor service.
+
Each .cshtml file in TCAdmin2\ControlPanel.MVC\Views\Default supports adding server and client side code using plugin files. The plugin filename should be OriginalFile.Plugin.AnyName.cshtml.
 +
For example if you want to add code to the HTML HEAD for a live chat software:
 +
* The default HEAD code is in TCAdmin2\ControlPanel.MVC\Views\Default\Shared\_Head.cshtml
 +
* To add your code as a plugin you need to create a file TCAdmin2\ControlPanel.MVC\Views\Default\Shared\_Head.Plugin.LiveChat.cshtml
  
 
== Going back to the classic ASP.NET themes ==
 
== Going back to the classic ASP.NET themes ==
 
If you want to go back to the classic ASP.NET themes:
 
If you want to go back to the classic ASP.NET themes:
−
* Stop the monitor.
+
* Permanently:
−
* Edit TCAdmin2\Monitor\TCAdminMonitor.exe.config and set the value of TCAdmin.Public.MVC to False
+
** Edit C:\Program Files\TCAdmin2\Monitor\TCAdminMonitor.exe.config or /home/tcadmin/Monitor/TCAdminMonitor.exe.config and set the value of TCAdmin.Public.MVC to False
−
* Generate a new MachineKey for your Windows.Custom.config so all users are forced to log out.
+
** Restart the monitor.
−
* Start the monitor.
+
* Temporary:
−
 
+
** Log out from the MVC panel. View '''<nowiki>http://x.x.x.x:8880/Aspx/</nowiki>''' (the / at the end is important) Then log in again.
−
== Known Issues ==
 
−
* Login from WHMCS is not implemented.
 
−
* Captcha is not implemented.
 
−
* Reseller MVC templates are not implemented.
 
−
* User notifications are not implemented.
 
−
* Quick search doesn't show all services.
 
−
* Can't translate MVC pages to other languages.
 

Latest revision as of 08:26, 29 July 2022

MVC Templates allow you to edit the HTML for all or each individual page. If you only want to edit colors of the theme see MVC Themes.

Features

  • Editable HTML templates.
    • Create a new theme in Settings > Themes. Set the type to MVC. A folder will be created in TCAdmin2\ControlPanel.MVC\Views where you can place your custom .cshtml and images.
    • Your custom template folder only needs to have the files that have been modified.
    • If a file doesn't exist in your custom template it will use the file from ~/Views/Default/. Use the same directory structure as the Default template.
    • You can safely add new files to the default template folder but all the original files will be overwritten when you update TCAdmin.
    • To translate MVC templates go to Settings > Languages > select the language > Other Components > Resources.*.
  • The following features are configurable in the game settings:
    • Custom service home page template per game. (change whole layout of the service home page)
    • Custom status template per game. (change which information and ports are displayed)
    • Join URL
MVCPreview1.png
MVCPreview2.png

Requirements

  • .NET 4.7.2 (Windows) or Mono 6.x (Linux) must be installed on your server.
  • Install TCAdmin version 2.0.127.0 or greater.

Configure TCAdmin

New installations already have MVC enabled by default.

  • Edit TCAdmin2\Monitor\TCAdminMonitor.exe.config or /home/tcadmin/Monitor/TCAdminMonitor.exe.config. Add these lines under <appSettings> (update them if they already exist).
<add key="TCAdmin.Public.MVC" value="True" />
<add key="TCAdmin.Public.MVC.WebServicesPath" value="../ControlPanel.MVC" />
  • Restart the monitor service.
  • Important for Linux users:

Update the WHMCS module (optional)

Make a backup of your /whmcs/modules/servers/tcadmin2_advanced/tcadmin2_advanced.php and replace it the one included in the tcadmin2_advanced module for MVC. This module has the links updated to work with the MVC template format. You can download the module from the client area

Linux Nginx configuration (optional)

Configure Nginx with these instructions Configure_the_TCAdmin_website_to_run_with_Nginx

Windows IIS configuration (optional)

Edit Templates in Visual Studio 2017/2019

  • Go to settings > Themes > Create a new MVC theme. This is the template that you will be editing in Visual Studio.
  • Copy TCAdmin2\ControlPanel.MVC and TCAdmin2\Monitor\Shared to your PC.
  • Rename ControlPanel.MVC\Web.VS2017.config to ControlPanel.MVC\Web.config
  • Edit ControlPanel.MVC\Web.config in notepad.
    • Update the value of "TCAdmin.SharedPath" to the correct path.
    • Update "TCAdmin.Database.MySql.ConnectionString" with your MySQL info. If the connection string is encrypted use these lines and change MYSQLIP, MYSQLUSER, MYSQLPASSWORD and MYSQLDB with the correct values. You can connect to your master's database or to a local copy.
<add key="TCAdmin.Database.MySql.ConnectionString" value="Data Source=MYSQLIP;User Id=MYSQLUSER;Password=MYSQLPASSWORD;Database=MYSQLDB;Pooling=false;Compress=false;Connection Lifetime=900;Connect Timeout=30;Protocol=TCP" />
<add key="TCAdmin.Database.MySql.ConnectionString.Encrypted" value="False" />
  • Run Visual Studio.
    • select File > Open > Web Site. Select your ControlPanel.MVC folder.
    • Select Website > Start Options from the menu.
    • In Build > Before running startup page select "No build" and click on OK. Depending on your Visual Studio version this might be in Build > Configuration Manager > Uncheck build next to the website.
    • You should be able to run the solution and it will load the control panel website. Only MVC content will render correctly. Classic ASP.NET content will show a server error.
    • Don't edit the files from the default template. To edit a specific page copy it from ControlPanel.MVC\Views\Default to ControlPanel.MVC\Views\(YourTemplate) keeping the same directory structure. You don't need to copy all files. If a file is not in your template the default file will be used.
    • You should have full intellisense support when editing the template files. If you see an errors about missing references copy the file from Shared to ControlPanel.MVC\bin and restart Visual Studio.

Edit Templates with a text editor

  • Create a new theme in Settings > Themes. Set the type to MVC. A folder will be created in TCAdmin2\ControlPanel.MVC\Views where you can place your custom .cshtml and images.
  • Copy the file you want to customize from TCAdmin2\ControlPanel.MVC\Views\Default to TCAdmin2\ControlPanel.MVC\Views\(YourTemplate). You must keep the same directory structure of the original file. For example to customize the login page copy Views\Default\Base\Login\Index.cshtml to Views\(YourTemplate)\Base\Login\Index.cshtml and edit Index.cshtml with a text editor.

Adding code to existing .cshtml file without modifying it

Each .cshtml file in TCAdmin2\ControlPanel.MVC\Views\Default supports adding server and client side code using plugin files. The plugin filename should be OriginalFile.Plugin.AnyName.cshtml. For example if you want to add code to the HTML HEAD for a live chat software:

  • The default HEAD code is in TCAdmin2\ControlPanel.MVC\Views\Default\Shared\_Head.cshtml
  • To add your code as a plugin you need to create a file TCAdmin2\ControlPanel.MVC\Views\Default\Shared\_Head.Plugin.LiveChat.cshtml

Going back to the classic ASP.NET themes

If you want to go back to the classic ASP.NET themes:

  • Permanently:
    • Edit C:\Program Files\TCAdmin2\Monitor\TCAdminMonitor.exe.config or /home/tcadmin/Monitor/TCAdminMonitor.exe.config and set the value of TCAdmin.Public.MVC to False
    • Restart the monitor.
  • Temporary:
    • Log out from the MVC panel. View http://x.x.x.x:8880/Aspx/ (the / at the end is important) Then log in again.
Retrieved from "https://help.tcadmin.com/index.php?title=MVC_Templates&oldid=2491"