Development in Visual Studio
No edit summary
(Adding page to Category:TOC because it contains a TOC.)
(14 intermediate revisions by 6 users not shown)
Line 1: Line 1:
This article helps you set up the environment for local development and debugging of Driven Turnkey application in Visual Studio.
== Do You Want to Debug Turnkey or Add Code and Pages to Your App? ==
This article helps you set up the environment for local development and debugging of the MDriven Turnkey application in Visual Studio.
 
'''Note!''' This is for running the Turnkey server locally, not just moving your model from the Designer to Visual Studio and using code. If you want a simpler way of adding C# code and cshtml pages to your Turnkey application, look first at [[CodeDress]].


== Download MDriven Turnkey ==
== Download MDriven Turnkey ==
To start developing your Turnkey Application locally in Visual Studio you need to download the latest version of MDriven Turknkey from CapableObjects site. [https://www.capableobjects.com/xdownloads/MDrivenTurnkey_20180506.zip Download link]. Then unzip downloaded archive.
To start developing your Turnkey Application locally in Visual Studio, download the latest version of MDriven Turnkey from the MDriven site. [https://mdriven.net/turnkey Download link]. Then, unzip the downloaded archive.


== Setting Up Visual Studio ==
== Setting Up Visual Studio ==
Open downloaded MDriven Turnkey in Visual Studio. You need to choose option "'''Open -> Web Site'''" and choose "Application" folder which was extracted from the downloaded archive.
Open the downloaded MDriven Turnkey in Visual Studio. You need to select the option "'''Open -> Web Site'''" and choose the "Application" folder which was extracted from the downloaded archive. Choose your Application in the Solution Explorer and '''enable SSL''' in the "Properties" window below.  
Then you need to enable SSL in your project. Choose your Application in the Solution Explorer and '''enable SSL''' in the "Properties" window below.  
[[File:Eneble SSL.png|thumb|Enable SSL for the application|none]]                     
[[File:Eneble SSL.png|thumb|Enable SSL for the application|none]]                     
   
   
When SSL is enabled, copy '''SSL Url''' and paste it to "'''Start options'''" in "'''Start Url'''" field ''(Right-click on Application in Solution Explorer)''.  
When SSL is enabled, copy the '''SSL Url''' and paste it to "'''Start options'''" in the "'''Start Url'''" field ''(Right-click on Application in Solution Explorer)''.  
[[File:SSL Url in Start Options.png|none|thumb|468x468px|Paste SSL Url in "Start options"]]
[[File:SSL Url in Start Options.png|none|thumb|468x468px|Paste SSL Url in "Start options"]]
Also, you need to check that you will build the application with a '''correct version of .NET Framework'''.  
Also, check that you will build the application with the '''correct version of .NET Framework'''.  
[[File:Check correct version of .NET.png|none|thumb|504x504px|Check version of .NET Framework]]
[[File:Check correct version of .NET.png|none|thumb|504x504px|Check the version of .NET Framework]]


== Connect with the data and model in the cloud ==
== Connect With the Data and Model in the Cloud ==
To connect your local MDriven Turnkey copy with data and model in the cloud open '''MDrivenServerOverride - NotInEffect.xml'''
To connect your local MDriven Turnkey copy with data and model in the cloud, open '''MDrivenServerOverride - NotInEffect.xml'''
[[File:Add an url and password to your MDriven Server.png|none|thumb|781x781px|Add an url and password to your MDriven Server]]
[[File:Add an url and password to your MDriven Server.png|none|thumb|781x781px|Add a URL and password to your MDriven Server]]
When it's done rename '''MDrivenServerOverride - NotInEffect.xml''' to -> '''MDrivenServerOverride.xml''' and '''TurnkeySettings - NotInEffect.xml''' to -> '''TurnkeySettings.xml ,''' then you can build your application and start debug.
When it's done, rename '''MDrivenServerOverride - NotInEffect.xml''' to -> '''MDrivenServerOverride.xml''' and '''TurnkeySettings - NotInEffect.xml''' to -> '''[[TurnkeySettings]].xml,''' then you can build your application and start debugging.


== View Override ==
== View Override ==
Now, you can change the regular view of page. You just need to find name of ViewModel which you want to override, then create a new file with '''.cshtml''' extension in Views -> EXT_OverridePages. '''Notice!''' You must name the new file exactly like a name of existing ViewModel which you want to override. (''For example, if you have a ViewModel called "TimeManage", your file for overriding this page must be called TimeManage.cshtml).'' For start you can use a default template of page from '''AngularPageDynamicTemplate.cshtml''' (Views -> Turnkey) and copy it in your new page override file. See more about [[Turnkey session 9: View Override|View override]].
Now, you can change the regular view of the page. You just need to find the name of the ViewModel which you want to override, then create a new file with '''.cshtml''' extension in Views -> EXT_OverridePages.  
 
'''Notice!''' You must name the new file exactly like the name of an existing ViewModel that you want to override. (''For example, if you have a ViewModel called "TimeManage", your file for overriding this page must be called TimeManage.cshtml).'' For the start, you can use a default template of the page from '''AngularPageDynamicTemplate.cshtml''' (Views -> Turnkey) and copy it into your new page override file. See more about [[Turnkey session 9: View Override|View override]].


== Video Tutorial ==
== Video Tutorial ==
Line 26: Line 30:
<html>
<html>


<h4> In this session we set up the environment for local development and debugging in visual studio - still using the data and model in the cloud. We also replace one of the standard views from inside VS. </h4>
<p class="video-warn">
  To make your experience smooth, we set the main tags mentioned in the video to the right bar menu of this mini-player. Choose an interesting subtitle on the list and immediately get to the exact theme navigation item place in the video. Now you can pick any topic to be instructed on without watching the whole video.
 


<p>
<em>To make your experience more comfortable, we set the main tags mentioned in the video to the right bar menu of this mini player. Choose the interesting subtitle on the list and immediately get to the exact theme timeplace in the video. Now you can pick any topic to be instructed without watching the whole video.</em>
<style type="text/css">
p {
opacity: 0.7;
text-align: justify;
width: 90%
}
</style>
</p>
</p>


<br>
<p><strong>In this session, we set up the environment for local development and debugging in Visual Studio, using the data and model in the cloud. We also replace one of the standard views from inside VS.</strong></p>
<div id="video12">
 
<iframe width="740" height="500" src="https://www.youtube.com/embed/g1yr-Is8XXY?rel=0&autoplay=0" frameborder="0" allowfullscreen></iframe>
<div class="video">
   <div>
  <div class="video__wrapper">
     <span data-video="g1yr-Is8XXY" data-start="7" tabindex="0"> Installing MDriven Turnkey Locally </span>
    <iframe src="https://www.youtube.com/embed/88436osg67I?rel=0&autoplay=0" frameborder="0" allowfullscreen></iframe>
     <span data-video="g1yr-Is8XXY" data-start="30" tabindex="0"> Setting Application in Visual Studio </span>
  </div>
     <span data-video="g1yr-Is8XXY" data-start="129" tabindex="0"> Start debugging   </span>  
   <div class="video__navigation">
     <span data-video="g1yr-Is8XXY" data-start="175" tabindex="0"> Replacing the standard view in VS</span>
     <span class="navigation-item" data-video="88436osg67I" data-start="5" tabindex="0"> MDriven Turnkey session 12 </span>
</div>
    <span class="navigation-item" data-video="88436osg67I" data-start="12" tabindex="0"> Installing MDriven Turnkey Locally </span>
     <span class="navigation-item" data-video="88436osg67I" data-start="35" tabindex="0"> Setting Application in Visual Studio </span>
     <span class="navigation-item" data-video="88436osg67I" data-start="134" tabindex="0"> Start debugging </span>
     <span class="navigation-item" data-video="88436osg67I" data-start="180" tabindex="0"> Replacing the standard view in VS </span>
  </div>
</div>
</div>
</html>


<script>
<html>
var IMG = document.querySelectorAll('#video12 span'),
    IFRAME = document.querySelector('#video12 iframe');
for (var i = 0; i < IMG.length; i++) {
  IMG[i].onclick = function() {
    IFRAME.src = 'https://www.youtube.com/embed/' + this.dataset.video + '?rel=0&autoplay=1';
    if(this.dataset.end) IFRAME.src = IFRAME.src.replace(/([\s\S]*)/g, '$1&end=' + this.dataset.end);
    if(this.dataset.start) IFRAME.src = IFRAME.src.replace(/([\s\S]*)/g, '$1&start=' + this.dataset.start);
    this.style.backgroundColor='rgba(0,0,0,.2)';
  }
}
</script>
<h4> In this session we show how you bind to things in your view models with angular to completely take control of all rendering with html5. Continue where we left off having MDriven turnkey in Visual Studio for local development. </h4>


<p>
<p><strong>In this session, we show you how to bind things in your ViewModels with Angular to completely take control of all rendering with html5. We also continue where we left off with having MDriven Turnkey in Visual Studio for local development.</strong></p>
<em>To make your experience more comfortable, we set the main tags mentioned in the video to the right bar menu of this mini player. Choose the interesting subtitle on the list and immediately get to the exact theme timeplace in the video. Now you can pick any topic to be instructed without watching the whole video.</em>
<style type="text/css">
p {
opacity: 0.7;
text-align: justify;
width: 90%
}
</style>
</p>


<style>
<div class="video">
#video12 {
   <div class="video__wrapper">
  position: relative;
    <iframe src="https://www.youtube.com/embed/o5oEXNXFXvg?rel=0&autoplay=0" frameborder="0" allowfullscreen></iframe>
  height: 500px;
   </div>
  width:560px;
  <div class="video__navigation">
  padding-bottom: 10px;
    <span class="navigation-item" data-video="o5oEXNXFXvg" data-start="5" tabindex="0"> MDriven Turnkey Session13 </span>
}
     <span class="navigation-item" data-video="o5oEXNXFXvg" data-start="15" tabindex="0"> Setting editable HTML in Visual Studio </span>
#video12 iframe {
     <span class="navigation-item" data-video="o5oEXNXFXvg" data-start="72" tabindex="0"> Development View </span>
  position: absolute;
     <span class="navigation-item" data-video="o5oEXNXFXvg" data-start="190" tabindex="0"> Actions' view functionality and buttons</span>
  min-height: auto;
     <span class="navigation-item" data-video="o5oEXNXFXvg" data-start="309" tabindex="0"> vCurrent boolean  </span>  
  min-width: auto;
     <span class="navigation-item" data-video="o5oEXNXFXvg" data-start="340" tabindex="0"> Designing the page</span>
}
     <span class="navigation-item" data-video="o5oEXNXFXvg" data-start="455" tabindex="0"> Setting navigation  </span>
#video12 div {
     <span class="navigation-item" data-video="o5oEXNXFXvg" data-start="542" tabindex="0"> Extend the view </span>  
  position: absolute;
     <span class="navigation-item" data-video="o5oEXNXFXvg" data-start="586" tabindex="0"> Combobox/selectbox in HTML</span>  
  top: 0;
     <span class="navigation-item" data-video="o5oEXNXFXvg" data-start="816" tabindex="0"> Default naming</span>  
  left:760px;
     <span class="navigation-item" data-video="o5oEXNXFXvg" data-start="885" tabindex="0"> Image styling widget </span>
  width: 260px;
     <span class="navigation-item" data-video="o5oEXNXFXvg" data-start="951" tabindex="0"> Global actions in html </span>
  height: 100%;
  </div>
  padding-left: 10px;
  overflow-y: auto;
}
span {
    font-size: 18;
    display:block;
  padding: 2px 10px 0.5px 10px;
    padding-bottom: 0.5;
    padding-top: 0.5;
  opacity: 0.7;
}
span:hover {
  color: #0000FF;
  cursor: pointer;
}
span:focus {
   color: blue;
</style>
 
<br>
<div id="video12">
<iframe width="740" height="500" src="https://www.youtube.com/embed/Z4uLuMJA8KM?rel=0&autoplay=0" frameborder="0" allowfullscreen></iframe>
   <div>
     <span data-video="Z4uLuMJA8KM" data-start="10" tabindex="0"> Setting editable HTML in Visual Studio </span>
     <span data-video="Z4uLuMJA8KM" data-start="67" tabindex="0"> Development View </span>
     <span data-video="Z4uLuMJA8KM" data-start="185" tabindex="0"> Actions' view functinality and buttons</span>
     <span data-video="Z4uLuMJA8KM" data-start="304" tabindex="0"> vCurrent boolean  </span>  
     <span data-video="Z4uLuMJA8KM" data-start="335" tabindex="0"> Designing the page</span>
     <span data-video="Z4uLuMJA8KM" data-start="450" tabindex="0"> Setting navigation  </span>
     <span data-video="Z4uLuMJA8KM" data-start="538" tabindex="0"> Extend the view </span>  
     <span data-video="Z4uLuMJA8KM" data-start="581" tabindex="0"> Combobox/selectbox in HTML</span>  
     <span data-video="Z4uLuMJA8KM" data-start="811" tabindex="0"> default naming</span>  
     <span data-video="Z4uLuMJA8KM" data-start="880" tabindex="0"> image styling widget </span>
     <span data-video="Z4uLuMJA8KM" data-start="946" tabindex="0"> global actions in html </span>
</div>
</div>
</div>


<script>
var IMG = document.querySelectorAll('#video12 span'),
    IFRAME = document.querySelector('#video12 iframe');
for (var i = 0; i < IMG.length; i++) {
  IMG[i].onclick = function() {
    IFRAME.src = 'https://www.youtube.com/embed/' + this.dataset.video + '?rel=0&autoplay=1';
    if(this.dataset.end) IFRAME.src = IFRAME.src.replace(/([\s\S]*)/g, '$1&end=' + this.dataset.end);
    if(this.dataset.start) IFRAME.src = IFRAME.src.replace(/([\s\S]*)/g, '$1&start=' + this.dataset.start);
    this.style.backgroundColor='rgba(0,0,0,.2)';
  }
}
</script>
</html>
</html>
[[Category:MDriven Turnkey]]
[[Category:MDriven Turnkey]]
[[Category:Visual Studio]]
[[Category:Visual Studio]]
Line 153: Line 86:
[[Category:Bootstrap]]
[[Category:Bootstrap]]
[[Category:Content Override]]
[[Category:Content Override]]
{{Edited|July|12|2024}}
[[Category:TOC]]

Revision as of 13:46, 26 March 2024

Do You Want to Debug Turnkey or Add Code and Pages to Your App?

This article helps you set up the environment for local development and debugging of the MDriven Turnkey application in Visual Studio.

Note! This is for running the Turnkey server locally, not just moving your model from the Designer to Visual Studio and using code. If you want a simpler way of adding C# code and cshtml pages to your Turnkey application, look first at CodeDress.

Download MDriven Turnkey

To start developing your Turnkey Application locally in Visual Studio, download the latest version of MDriven Turnkey from the MDriven site. Download link. Then, unzip the downloaded archive.

Setting Up Visual Studio

Open the downloaded MDriven Turnkey in Visual Studio. You need to select the option "Open -> Web Site" and choose the "Application" folder which was extracted from the downloaded archive. Choose your Application in the Solution Explorer and enable SSL in the "Properties" window below.

Enable SSL for the application

When SSL is enabled, copy the SSL Url and paste it to "Start options" in the "Start Url" field (Right-click on Application in Solution Explorer).

Paste SSL Url in "Start options"

Also, check that you will build the application with the correct version of .NET Framework.

Check the version of .NET Framework

Connect With the Data and Model in the Cloud

To connect your local MDriven Turnkey copy with data and model in the cloud, open MDrivenServerOverride - NotInEffect.xml

Add a URL and password to your MDriven Server

When it's done, rename MDrivenServerOverride - NotInEffect.xml to -> MDrivenServerOverride.xml and TurnkeySettings - NotInEffect.xml to -> TurnkeySettings.xml, then you can build your application and start debugging.

View Override

Now, you can change the regular view of the page. You just need to find the name of the ViewModel which you want to override, then create a new file with .cshtml extension in Views -> EXT_OverridePages.

Notice! You must name the new file exactly like the name of an existing ViewModel that you want to override. (For example, if you have a ViewModel called "TimeManage", your file for overriding this page must be called TimeManage.cshtml). For the start, you can use a default template of the page from AngularPageDynamicTemplate.cshtml (Views -> Turnkey) and copy it into your new page override file. See more about View override.

Video Tutorial

To make your experience smooth, we set the main tags mentioned in the video to the right bar menu of this mini-player. Choose an interesting subtitle on the list and immediately get to the exact theme navigation item place in the video. Now you can pick any topic to be instructed on without watching the whole video.

In this session, we set up the environment for local development and debugging in Visual Studio, using the data and model in the cloud. We also replace one of the standard views from inside VS.

MDriven Turnkey session 12 Installing MDriven Turnkey Locally Setting Application in Visual Studio Start debugging Replacing the standard view in VS

In this session, we show you how to bind things in your ViewModels with Angular to completely take control of all rendering with html5. We also continue where we left off with having MDriven Turnkey in Visual Studio for local development.

MDriven Turnkey Session13 Setting editable HTML in Visual Studio Development View Actions' view functionality and buttons vCurrent boolean Designing the page Setting navigation Extend the view Combobox/selectbox in HTML Default naming Image styling widget Global actions in html

This page was edited 11 days ago on 05/03/2024. What links here