Differences

This shows you the differences between two versions of the page.

Link to this comparison view

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>