This shows you the differences between two versions of the page.
— |
easyquery:how-to:javascript-entitiespanel-webforms [2013/09/12 10:54] (current) |
||
---|---|---|---|
Line 1: | Line 1: | ||
+ | ====== Using JavaScript EntitiesPanel widget in WebForms project. ====== | ||
+ | ===== Where and when to use ===== | ||
+ | |||
+ | |||
+ | |||
+ | ===== Instructions ===== | ||
+ | |||
+ | ==== 1. Add JQuery and Query UI into your .aspx files ==== | ||
+ | |||
+ | <code html> | ||
+ | <head runat="server"> | ||
+ | . . . . . . . . | ||
+ | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> | ||
+ | <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script> | ||
+ | <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" rel="stylesheet" type="text/css" /> | ||
+ | |||
+ | </code> | ||
+ | |||
+ | |||
+ | ==== 2. Add EasyQuery script and CSS file ==== | ||
+ | You can find eq-all-min.js and easyquery.css file from our EQMvc3Demo sample project which is distributed with trial version of EasyQuery. | ||
+ | Just put them into root folder of your WebForms projects and add the following tags into the <head> section of your .aspx file: | ||
+ | <code html> | ||
+ | <script src="eq-all-min.js"></script> | ||
+ | <link href="easyquery.css" rel="stylesheet" type="text/css" media="screen" /> | ||
+ | </code> | ||
+ | |||
+ | |||
+ | ==== 3. Add EQService.asmx web-service into your project ==== | ||
+ | * Add a reference on Korzh.EasyQuery.WebService.NET40 assembly into your project | ||
+ | * Add new Web Service EQService.asmx into your project: right-click on project in solution explorer, chose Add | New Item, then select "Web" in the left panel, "Web Service" on the right, type file name "EQService.asmx" and click on "Add" button. | ||
+ | * Copy the following code into newly created EQService.asmx.cs file: | ||
+ | <code csharp> | ||
+ | using System; | ||
+ | using System.Collections.Generic; | ||
+ | using System.IO; | ||
+ | using System.Linq; | ||
+ | using System.Data; | ||
+ | using System.Data.OleDb; | ||
+ | using System.Web; | ||
+ | using System.Web.Services; | ||
+ | using Korzh.EasyQuery; | ||
+ | using Korzh.EasyQuery.Db; | ||
+ | using Korzh.EasyQuery.WebServices; | ||
+ | |||
+ | namespace YourProjectNamespace { | ||
+ | /// <summary> | ||
+ | /// Summary description for EQService | ||
+ | /// </summary> | ||
+ | [WebService(Namespace = "http://korzh.com/")] | ||
+ | //[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] | ||
+ | // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. | ||
+ | [System.Web.Script.Services.ScriptService] | ||
+ | public class EQService : Korzh.EasyQuery.WebServices.EQDbWebService { | ||
+ | public static DbModel Model { get; set; } | ||
+ | |||
+ | static private string dataPath; | ||
+ | static private string dataModelPath; | ||
+ | |||
+ | static EQService() { | ||
+ | |||
+ | dataPath = System.Web.HttpContext.Current.Server.MapPath("~/App_Data"); | ||
+ | dataModelPath = System.IO.Path.Combine(dataPath, "NWind.xml"); | ||
+ | |||
+ | connectionString = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + System.IO.Path.Combine(dataPath, "NWind.mdb"); | ||
+ | queriesPath = System.IO.Path.Combine(dataPath, "Queries"); | ||
+ | |||
+ | if (!Directory.Exists(queriesPath)) | ||
+ | Directory.CreateDirectory(queriesPath); | ||
+ | |||
+ | Model = new DbModel(); | ||
+ | Model.LoadFromFile(dataModelPath); | ||
+ | } | ||
+ | |||
+ | |||
+ | protected override DataModel GainModel() { | ||
+ | return Model; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | } | ||
+ | |||
+ | </code> | ||
+ | |||
+ | |||
+ | ==== 4. Add a placeholder for EntitiesPanel widget in your .aspx file ==== | ||
+ | Just define the following empty <div> object in that place of your page where you plan to show entities panel: | ||
+ | <code html> | ||
+ | <div id="EntitiesPanel" style="width:180px;height:360px;overflow-x: auto;"></div> | ||
+ | |||
+ | |||
+ | </code> | ||
+ | |||
+ | ==== 5. Add client-side code to load model and initiate EntitiesPanel widget ==== | ||
+ | <code javascript> | ||
+ | $(document).ready(function () { | ||
+ | |||
+ | EQ.client.init({ | ||
+ | serviceUrl: "EQService.asmx", | ||
+ | modelName: "NWind", | ||
+ | entitiesPanel: { showCheckboxes: true }, | ||
+ | }); | ||
+ | |||
+ | . . . . . . . | ||
+ | }); | ||
+ | |||
+ | </code> |