How to create ASP.NET Web Forms Application in VB.NET and how to add Syncfusion controls in it?
In this documentation we’ll explain the step by step process to add Syncfusion controls in ASP.NET Web Forms VB.Net application.
Section 1: Creating ASP.NET Web Forms Application.
Step 1: Open the Visual studio.
Step 2: Click File->New->Project.
Step 3: After clicking the project it will show project template. Then we need to select the type as Visual Basic and project template as a ASP.NET Web Application. Refer the below screen shot.
|
Step 4: After clicking ok button it will show another popup to select the web application template then we need to select webforms template. Refer the below screenshot.
|
Step 5: After clicking the ok button ASP.NET Web Form Application will be created successfully.
Section 2: Adding Syncfusion controls in ASP.NET Web Forms Application.
Step 1: Right click the project it will show popup like below, then we need to select Manage NuGet packages to open the NuGet package manager. Refer the below screens shot.
|
Step 2: search the Syncfusion.AspNet NuGet package in the browse tab. Refer the below screen shot.
|
Step 3: Syncfusion.AspNet NuGet package will be appear on top. Then install the Nuget packages.
Step 4: After successful installation of NuGet packages then it will automatically add the required assembly reference in the Web.config file. Refer the below screen shot.
|
Step 5: NuGet package also it will add the styles and script files inside the Content and Scripts folder of your project. refer the below screen shot.
|
Step 6: Include the reference “ej.web.all.min.css” file in the Site.Master page, within the head section.
<link href="Content/ej/web/default-theme/ej.web.all.min.css" rel="stylesheet" />
Step 7: Add the required JavaScript files into your application. It requires the following mandatory common script files.
jQuery (version supported from 1.7.1.min.js to latest jQuery version).
jsrender.min.js
Step 8: Apart from the above common scripts, it is also necessary to refer to the ej.web.all.min.js file in the application that plays a major role in control creation. It also requires reference to the ej.webform.min.js file in your application, as it is responsible for the server-side event functionalities of the ASP.NET controls.
Step 9: The Script Manager is mandatory in order to place our control initialization script in the page. Ensure whether the ScriptManager is added in the Site.Mater or else add the ScriptManager to your web page.
<asp:ScriptManager runat="server">
</asp:ScriptManager>
Step 10: After referring the required scripts and styles, the Site.Master page look like below.
<%@ Master Language="VB" AutoEventWireup="true" CodeBehind="Site.master.vb" Inherits="WebApplication1VB.SiteMaster" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%: Page.Title %> - My ASP.NET Application</title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:bundlereference runat="server" path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="Content/ej/web/default-theme/ej.web.all.min.css" rel="stylesheet" />
<script src="Scripts/jquery-3.3.1.min.js"></script>
<script src="Scripts/jsrender.min.js"></script>
<script src="Scripts/ej/web/ej.web.all.min.js"></script>
<script src="Scripts/ej/common/ej.webform.min.js"></script>
</head>
<body>
<form runat="server">
<asp:ScriptManager runat="server">
</asp:ScriptManager>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
…
..
</div>
</div>
<div class="container body-content">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
<hr />
<footer>
<p>© <%: DateTime.Now.Year %> - My ASP.NET Application</p>
</footer>
</div>
</form>
</body>
</html>
Step 11: Add the following DatePicker code within the Default.aspx file.
<ej:DatePicker ID="DatePicker" runat="server"></ej:DatePicker>
Step 12: To run the application, press F5.
Output be like below.
|
Thus, the DatePicker control is rendered successfully with its default appearance. You can then use its various properties to set its value and make use of its available events to trigger when necessary.
Please refer the sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1VB394207481
Note:
A new version of Essential Studio for ASP.NET is available. Versions prior to the release of Essential Studio 2014, Volume 2 will now be referred to as a classic versions.The new ASP.NET suite is powered by Essential Studio for JavaScript providing client-side rendering of HTML 5-JavaScript controls, offering better performance, and better support for touch interactivity. The new version includes all the features of the old version, so migration is easy.
The Classic controls can be used in existing projects; however, if you are starting a new project, we recommend using the latest version of Essential Studio for ASP.NET. Although Syncfusion will continue to support all Classic Versions, we are happy to assist you in migrating to the newest edition.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below.
You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
