Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit ffda4d4

Browse files
Merged in JS-15332-MVC6-UG-document (pull request #287)
MVC6 UG Document changes merged.
2 parents 8cbfb4d + 9c2fc5a commit ffda4d4

16 files changed

+351
-0
lines changed

‎aspnetmvc/getting-started.md‎

Lines changed: 351 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1576,6 +1576,357 @@ Now build and run the application by pressing F5, you can see something similar
15761576

15771577
The DatePicker is rendered with its default appearance. You can then use its various properties to set its value and also make use of its available events to trigger when necessary.
15781578

1579+
## MVC6 Application
1580+
1581+
This document briefly explains how to configure the ASP.NET MVC6 to your local machine.
1582+
1583+
### System Requirements:
1584+
1585+
1586+
1587+
To work with ASP.NET MVC 6, you need to make sure is whether you have installed the following software on your machine
1588+
1589+
1590+
1591+
* Download [Visual Studio 2015](https://www.microsoft.com/en-us/download/details.aspx?id=49989) Update 1.
1592+
1593+
* Download [Microsoft ASP.NET Web Tools 2015 (RC1)](https://www.microsoft.com/en-us/download/details.aspx?id=49959).
1594+
1595+
1596+
1597+
### Installation
1598+
1599+
1600+
1601+
Refer the following steps to configure ASP.NET MVC 6 on your system
1602+
1603+
1604+
1605+
* Open the [GitHub ASP.NET](https://github.com/aspnet/home) page that guides you to configure the ASP.NET MVC6.
1606+
1607+
* Copy the below mentioned command for Upgrading **DNVM** from that page.
1608+
1609+
{% highlight text %}
1610+
1611+
1612+
@powershell -NoProfile -ExecutionPolicy unrestricted -Command "&{$Branch='dev';$wc=New-Object System.Net.WebClient;$wc.Proxy=[System.Net.WebRequest]::DefaultWebProxy;$wc.Proxy.Credentials=[System.Net.CredentialCache]::DefaultNetworkCredentials;Invoke-Expression ($wc.DownloadString('https://raw.githubusercontent.com/aspnet/Home/dev/dnvminstall.ps1'))}"
1613+
1614+
1615+
1616+
{% endhighlight %}
1617+
1618+
* Open the command prompt with[Administrator mode](https://technet.microsoft.com/en-in/library/cc947813(v=ws.10).aspx) and run the above command,which will download the **DNVM (.NET Version Manager)**as mentioned in the below screenshotand place it in your user profile. The DNVM works manipulate from this installed path.
1619+
1620+
![](getting-started_images/getting-started_img100.jpeg)
1621+
1622+
1623+
1624+
* Now you check with the existing location of **DNVM** by executing the following command in a command prompt.
1625+
1626+
1627+
1628+
{% highlight text %}
1629+
1630+
1631+
**C:\Users> where dnvm**
1632+
1633+
1634+
1635+
{% endhighlight %}
1636+
1637+
1638+
1639+
* After the DNVM installation, execute the following command to know about the current DNVM version.
1640+
1641+
{% highlight text %}
1642+
1643+
1644+
**C:\Users> dnvm**
1645+
1646+
1647+
1648+
{% endhighlight %}
1649+
1650+
1651+
1652+
![](getting-started_images/getting-started_img101.jpeg)
1653+
1654+
* Download the **DNX (.NET Execution Environment)** to your local machine with the help of already installed **DNVM** by executing the following command as given below.
1655+
1656+
{% highlight text %}
1657+
1658+
1659+
**C:\Users> dnvm upgrade**
1660+
1661+
1662+
1663+
{% endhighlight %}
1664+
1665+
1666+
1667+
![](getting-started_images/getting-started_img102.jpeg)
1668+
1669+
* After this installation is completed, run the below command which will list out the DNX version installed in your local machine.
1670+
1671+
N> The default version is marked with asterisk (***) symbol.
1672+
1673+
{% highlight text %}
1674+
1675+
1676+
**C:\Users> dnvm list**
1677+
1678+
1679+
1680+
{% endhighlight %}
1681+
1682+
1683+
1684+
![](getting-started_images/getting-started_img103.jpeg)
1685+
1686+
* If the asterisk symbol is not marked to any specific installed DNX version, you need to update the default one to latest DNX version by execute the following command in prompt window.
1687+
1688+
{% highlight text %}
1689+
1690+
1691+
**C:\Users> dnvm use 1.0.0-rc1-update2 -p**
1692+
1693+
1694+
1695+
{% endhighlight %}
1696+
1697+
1698+
1699+
![](getting-started_images/getting-started_img104.jpeg)
1700+
1701+
* Execute the **dnvm list** command to identify the modified active DNX version.
1702+
1703+
{% highlight text %}
1704+
1705+
1706+
**C:\Users> dnvm list**
1707+
1708+
1709+
1710+
{% endhighlight %}
1711+
1712+
* Please ensure whether the changes are got reflected in your local machine by checking the **default.txt** file which is available in the following location. This should contain the version same as the default active version that you have selected.
1713+
1714+
{% highlight text %}
1715+
1716+
1717+
**C:\Users\{user name}\.dnx\alias**
1718+
1719+
1720+
1721+
{% endhighlight %}
1722+
1723+
1724+
1725+
1726+
1727+
### Deploying the ASP.NET MVC 6 Sample
1728+
1729+
The following steps helps to know how to run the ASP.NET MVC 6 sample.
1730+
1731+
* Open the **Visual Studio 2015**.
1732+
1733+
* Select **File - > New Project**.
1734+
1735+
* Choose **Templates -> Visual C# -> ASP.NET Web Application**.
1736+
1737+
* Specify the name and location for the project.
1738+
1739+
* Select the **Web Application** option from an **ASP.NET 5 Template**.
1740+
1741+
![](getting-started_images/getting-started_img105.jpeg)
1742+
1743+
* Click OK to create the ASP.NET MVC 6 application.
1744+
1745+
* In Solution Explorer window, right click the project name and choose the "**Properties**" option.
1746+
1747+
* In that property window, open the application tab and choose the latest DNX version (list out the existing configured version) from the Solution SDK DNX Version combo box, then save the project.
1748+
1749+
* Select the **Tools -> NuGet Package Manager -> Package Manger Settings -> Package Manager**.
1750+
1751+
* In this Package Sources window, you need to add the MVC 6 related online feed link and click OK button to complete the configuration. (This online feed will helps to download an unavailable packages in local machine that may be used in your application)
1752+
1753+
![](getting-started_images/getting-started_img106.jpeg)
1754+
1755+
1756+
1757+
* Press F5 or click the **IIS Express** option to deploy and run your web application project.
1758+
1759+
1760+
1761+
![](getting-started_images/getting-started_img107.jpeg)
1762+
1763+
1764+
1765+
1766+
1767+
### Deploying Syncfusion components into ASP.NET MVC 6 Application
1768+
1769+
After successfully configured ASP.NET MVC 6 to your local machine, refer the below steps to deploy our Syncfusion components into ASP.NET MVC6Web applications.Before follow the below guidelines,please make sure that you have installed our latest [Essential Studio ASP.NET MVC](http://www.syncfusion.com/downloads/aspnetmvc) setup in your machine.
1770+
1771+
1772+
1773+
[Follow the steps which is mentioned in "**Deploying the ASP.NET MVC 6 Sample**" to create and configure the MVC 6 application]
1774+
1775+
* Open the **project.json** file from the solution explorer window and type our **Syncfusion NuGet** Packages as mentioned below,
1776+
1777+
![](getting-started_images/getting-started_img108.jpeg)
1778+
1779+
1780+
1781+
* After this NuGet package references, save the **project.json** file to include the two Syncfusion packages to your application.
1782+
1783+
![](getting-started_images/getting-started_img109.jpeg)
1784+
1785+
1786+
1787+
* Now open **_viewImports.cshtml** file from the views folder and add the following namespace for components references and Tag Helper support.
1788+
1789+
1790+
1791+
{% highlight text %}
1792+
1793+
1794+
@using Syncfusion.JavaScript
1795+
1796+
@addTagHelper "*, Syncfusion.EJ"
1797+
1798+
1799+
1800+
{% endhighlight %}
1801+
1802+
1803+
1804+
1805+
* To render the Syncfusion MVC controls with its unique style and theme, it is necessary to refer the required CSS files into your application. You need to copy all the required CSS files into your application from the following location,
1806+
1807+
`(installed location)\Syncfusion\Essential Studio\{{ site.releaseversion }}\MVC\samples\web\content`
1808+
1809+
1810+
_**For** **example**, If you have installed the Essential Studio package within **C:\Program Files (x86),** then navigate to the below location,_
1811+
`C:\Program Files (x86)\Syncfusion\Essential Studio\{{ site.releaseversion }}\MVC\samples\web\content`
1812+
1813+
1814+
1815+
When you navigate to the above location, you can find the folder "**ejthemes**" shown in the below image, which you need to copy entirely and paste it into your root application.
1816+
1817+
1818+
1819+
![](getting-started_images/getting-started_img110.jpeg)
1820+
1821+
Before pasting it into your application, you need to traversal within the **wwwroot\css** folder of your application and place all the copied files into it as shown below,
1822+
1823+
![](getting-started_images/getting-started_img111.jpeg)
1824+
1825+
To refer the below CSS stylesheet in your application in **layout.cshtml** page to render our components properly.
1826+
1827+
{% highlight razor %}
1828+
1829+
1830+
<html>
1831+
<head>
1832+
<link href="@Url.Content("~/css/ejthemes/default-theme/ej.widgets.all.min.css")" rel="stylesheet"/>
1833+
</head>
1834+
</html>
1835+
1836+
1837+
{% endhighlight %}
1838+
1839+
1840+
1841+
* Adding the required JavaScript files into your application plays an important role, without which the Syncfusion controls cannot be created. It requires the following mandatory common script files,
1842+
1843+
* jQuery-1.10.2.min.js
1844+
1845+
* jquery.easing.1.3.min.js
1846+
1847+
* jsrender.min.js
1848+
1849+
Apart from the above common scripts, it is also necessary to refer the **ej.web.all.min.js** file in your application, which contains all JavaScript components scripts in minified format.
1850+
1851+
You need to copy the above specified 4 external script files into your application from the following location,
1852+
1853+
`(installed location)\Syncfusion\Essential Studio\{{ site.releaseversion }}\MVC\samples\web\content`
1854+
1855+
_**For example**, If you have installed the Essential Studio package within **C:\Program Files (x86),** then navigate to the below location,_
1856+
`C:\Program Files (x86)\Syncfusion\Essential Studio\{{ site.releaseversion }}\MVC\samples\web\scripts`
1857+
1858+
![](getting-started_images/getting-started_img112.jpeg)
1859+
1860+
1861+
1862+
Before pasting it into your application, now you need to traversal within the **wwwroot** folder and create a folder named "**scripts**" of your application and place all the copied files into it as shown below,
1863+
1864+
![](getting-started_images/getting-started_img113.jpeg)
1865+
1866+
1867+
1868+
Refer the below mandatory Script files in the **layout.cshtml** page to render our components properly.
1869+
1870+
1871+
1872+
{% highlight razor %}
1873+
1874+
1875+
<head>
1876+
<link href="@Url.Content("~/css/ejthemes/flat-saffron/ej.widgets.all.min.css")" rel="stylesheet"/>
1877+
<script src="@Url.Content("~/Scripts/jquery-1.11.3.min.js")"></script>
1878+
<script src="@Url.Content("~/scripts/jsrender.js")"></script>
1879+
<script src="@Url.Content("~/scripts/jquery.easing-1.3.min.js")"></script>
1880+
<script src="@Url.Content("~/scripts/ej.web.all.min.js")"></script>
1881+
</head>
1882+
1883+
1884+
{% endhighlight %}
1885+
1886+
1887+
1888+
N> Also completely remove the already referred scripts and themes within the **environment** tag. The order of the reference to the script files made in the above section should be maintained in the same manner as mentioned above.
1889+
1890+
I> Since the **jquery-1.11.3.min.js** file is referred explicitly in the application, therefore make sure that your application doesn’t refer to any other jQuery versions multiple times, which will cause the script error. Make sure that the jQuery scripts are not again referred through bundles in **_Layout.cshtml** file.
1891+
1892+
* Add **ScriptManager** to the bottom of the **layout.cshtml** page. The ScriptManager used to place our control initialization script in the page.
1893+
1894+
1895+
1896+
{% highlight c# %}
1897+
1898+
1899+
<**ej-script-manager**></**ej-script-manager**>
1900+
1901+
1902+
1903+
{% endhighlight %}
1904+
1905+
1906+
1907+
* Open your view page to render Syncfusion components with ASP.NET MVC 6 Tag Helper syntax.
1908+
1909+
1910+
1911+
{% highlight c# %}
1912+
1913+
1914+
<**ej-rating** id="DefaultRating" **value**="3" />
1915+
1916+
1917+
1918+
{% endhighlight %}
1919+
1920+
1921+
1922+
* Finally compile your project, after successful compilation then press F5 key to deploy your project.
1923+
1924+
1925+
1926+
![](getting-started_images/getting-started_img114.jpeg)
1927+
1928+
1929+
15791930
## Integration of Syncfusion MVC components into an existing MVC Application using Project Conversion Wizard
15801931

15811932
In order to achieve the conversion of normal MVC application into Syncfusion MVC application, it is mandatory that you need to install the MVC extension in your machine as mentioned in the **Project** **Template** topic. To add the Syncfusion MVC controls into an existing ASP.NET MVC application, refer the below steps,
70.7 KB
Loading[フレーム]
77.4 KB
Loading[フレーム]
88.5 KB
Loading[フレーム]
32.7 KB
Loading[フレーム]
48.6 KB
Loading[フレーム]
50.1 KB
Loading[フレーム]
51.1 KB
Loading[フレーム]
44.2 KB
Loading[フレーム]
83.7 KB
Loading[フレーム]

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /