Using JavaScript EntitiesPanel widget in WebForms project.

Where and when to use

Instructions

1. Add JQuery and Query UI into your .aspx files

<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" />

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:

    <script src="eq-all-min.js"></script>
    <link href="easyquery.css" rel="stylesheet" type="text/css" media="screen" />

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:

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;
        }
 
    }
}

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:

    <div id="EntitiesPanel" style="width:180px;height:360px;overflow-x: auto;"></div>

5. Add client-side code to load model and initiate EntitiesPanel widget

    $(document).ready(function () {
 
        EQ.client.init({
            serviceUrl: "EQService.asmx",
            modelName: "NWind",
            entitiesPanel: { showCheckboxes: true },
        });
 
        .  .  .  .  .  .  .  
    });

Discussion

Real name:

E-Mail:

Website:

Enter your comment:

Subscribe to comments

Table of Contents