Getting Started

At the very minimum, the following elements and configuration are needed to display and make use of the ISBjs widget:

1. a div or other dom element to contain the button to begin or reset a search
2. a <ul> to contain the dynamic search elements
3. code to instantiate and configure ISBjs
4. code to add the filters you want to expose to the end user

For example: ```

```` ``` <script> var isb; window.onload = function(){ //the constructor takes a configuration object. The minumum properties are divName and srchUL. //It is in these dom elements that ISBjs will inject its UI isb = new com.contrivedexample.isbjs.Isb({"divName": "content", "ulName": "srchUL"});

    //For each field you want to expose to the end user, add an array of filter properties, providing\
    //the display value, the actual field name to be used in the database query, the data type
    //and nullability. Nullability is only needed for dates that map to nullable DateTime? in
    //.net classes
    isb.addFilterProperty([
         { "display": "OrderID", "value": "OrderID", "dataType": "number" },
         { "display": "CustomerID", "value": "CustomerID", "dataType": "text" },
         { "display": "OrderDate", "value": "OrderDate", "dataType": "date", "nullable": true }]);
}

</script> ``` An example user-generated interface with the preceding minimum configuration might look like: 

Next, you must provide some way to trigger a parsing of the widget. The return value of the parse function is an array of string that you can use in a dynamic linq to entities query (other parsings experimental at this time). You will utilize the first element of this array only (until support for parameters is added).

1. Provide a way to initiate the query, such as a button
2. Call Parse on ISBjs
3. Send the result of parsing to the server for processing
4. Handle the returned data; for instance, display in a list or table

```

Execute Query

OrderID	CustomerID	EmployeeID
{{o.OrderID}}	{{o.CustomerID}}	{{o.EmployeeID}}

... ```` ``` <script> ... //Send the query to your handler. For example, to send the query to a //web api controller named "Orders" via AngularJs: function OrdersController($scope, $http) { $scope.orders = []; $scope.parseandquery = function () { $scope.orders = []; try { var linqresults = isb.parse("l2e").join(); //parse, and specifically ask for the Linq to Entities format "l2e" //the example web api expects x-www-form-urlencoded key "Query" with value of // the parse result. Your implementation may vary. $http.post('http://isb.contrivedexample.com/api/Orders', {'Query' : document.querySelector("#dynLinq").value}).success( function (data, status, headers, config) { $scope.orders = data; $scope.loading = false; }).error(function (data, status, headers, config) { $scope.loading = false; alert(status); }); } catch (e) { alert(e.message); } } } } </script> ``` And finally the WebApi Controller implementation. You can see the use of the System.Linq.Dynamic namespace and how the entity framework query simply takes a string in the Where clause: ``` using com.crowcoder.isbjs; using IsbApi.Models; using System.Collections.Generic; using System.Linq; using System.Linq.Dynamic; using System.Web.Http;

namespace IsbApi.Controllers { public class OrdersController : ApiController { private readonly NorthwindContext nwCtx = new NorthwindContext();

//IsbQuery is a simple POCO that has one string property named "Query"
//to match up with the POST data in the ajax call above.
public IEnumerable<Orders> Post([FromBody] IsbQuery l2eQuery)
{
  var qry = nwCtx.Orders.AsQueryable();

  if (l2eQuery != null)
  {
    qry = qry.Where(l2eQuery.Query);
  }
  return qry.ToList();
}

} }

### To work with a live demo, debug and view the source please visit:
[ISBjs Playground](http://www.yardsaleseason.com/isb/Playground.html)