Guy Burstein : ASP.Net

Getting Started with jQuery in Visual Studio 2008

Guy Burstein — Fri, 05 Jun 2009 19:16:47 GMT

Getting Started with jQuery in Visual Studio 2008

In this post I’ll talk about adding jQuery IntellSense in Visual Studio 2008, and how to add jQuery to a simple Web Application inside Visual Studio 2008.

jQuery IntelliSense in Visual Studio 2008 - KB946581

In order to use jQuery in Visual Studio 2008 with IntelliSence a hotfix for Visual Studio 2008 must be installed:

Download the hotfix from Connect
Run the executable and extract its contents to a folder in your hard drive.
Make sure all instances of Visual Studio 2008 are closed, and run VS90-KB946581.exe from the above folder.

Download the Latest jQuery Library + Documentation

To use jQuery in Visual Studio 2008, and enjoy its IntelliSense, you should download 2 javascript files. One contains the actual jQuery library, and the second contains the library with documentation for Visual Studio 2008 to display its IntelliSense.

Go to jQuery Official Download Page
Scroll down and find the Current Release section.
Download the Uncompressed version (jquery-1.2.6.js) and the documentation for Visual Studio (jquery-1.2.6-vsdoc.js).

Using jQuery in a Visual Studio 2008 Web Application

In a new Web Application or inside an existing one, add the jQuery scripts into a certain folder.

In a web page (or a master page), add a reference to the jQuery library:

<head runat="server">
  <title>jQuery Sample</title>
 
  <script src="scripts/jquery-1.2.6.js"         
          type="text/javascript" ></script>
 
</head>

Then, in any javascript function you can start using jQuery functions and enjoy the IntelliSense in Visual Studio 2008.

A Simple Example of Using jQuery Functions

For example, Assuming that you have a page with the following content in it:

<form id="form1" runat="server">
<div>
  <input type="text" class="inputs" id="txtName"       
         value="Enter Text Here" />
  <input type="button" class="inputs" id="btnSubmit"       
         value="Click Me" onclick="handleButtonClick();" />
</div>
</form>

This form contains a single textbox followed by a button.

The handleButtonClick() function handles the button onclick event.

<script type="text/javascript">
  function handleButtonClick() {
  }
</script>

The way jQuery works is by selecting DOM elements and then doing something with them, such as executing a function or applying some properties. For example:

<script type="text/javascript">
  function handleButtonClick() {
    $("#txtName").css("border", "solid 2px red");
  }
</script>

The above method uses the selector function $ to select DOM elements (in this case – a single element with id = txtName) and to apply a style property of a red border. Running this page and clicking the button results in this output:

Summary

In this post I talked about the steps you should follow in order to use jQuery in Visual Studio 2008 with InstelliSense support. Then, we used jQuery in a simple web application.

ASP.Net DomainDataSource with Select Parameters

Guy Burstein — Sun, 12 Apr 2009 10:19:40 GMT

ASP.Net DomainDataSource with Select Parameters

Continuing with .Net RIA Services with Silverlight and ASP.Net. In the last port I wrote about Using DomainDataSource in ASP.Net, and showed its basic usage. In this post I’ll show a more advanced scenario in which you want to use a domain service select method that takes parameters, and get the parameter value from a control on the form.

In the previous post, we had a GridView bound to a DomainDataSource that called a Select Method on the DomainService.

<asp:GridView runat="server" ID="GridView" 
  AutoGenerateColumns="true"
  DataSourceID="customersDataSource">
</asp:GridView>
 
<asp:DomainDataSource runat="server" ID="customersDataSource" 
  DomainServiceTypeName="Samples.Bank.Domain.BankDomainService"
  SelectMethod="GetCustomers">
</asp:DomainDataSource>

The output was:

Now we want to filter the output list by the City property. To do that, we first have to add a method in our Domain Service that returns the data filtered by a city parameter.

public class BankDomainService : LinqToSqlDomainService<BankDataContext>
{
  public IQueryable<Customer> GetCustomers()
  {
    return this.Context.Customers;
  }
 
  public IQueryable<Customer> GetCustomersByCity(string city)
  {
    if (city == null)
      return GetCustomers();
 
    return GetCustomers().Where(c => c.City == city);
  }
 
  ...
}

Notice that GetCustomersByCity method uses the GetCustomers method that returns an IQueryable<Customer> and filters the result by city.

To select which city we want to filter by, lets add a ListBox with some items:

<asp:ListBox ID="lstCities" AutoPostBack="true" runat="server">
  <asp:ListItem>Tel Aviv</asp:ListItem>
  <asp:ListItem>Raanana</asp:ListItem>
  <asp:ListItem>Ramat Gan</asp:ListItem>
</asp:ListBox>

Note that I had to specify AutoPostBack=”true” in make any change to the filter, since this is a server control.

Now, in order to filter the data source according to the domain method with the select parameter I have to specify a SelectParameter that takes its value from the ListBox, and change the select method to execute.

<asp:DomainDataSource runat="server" ID="customersDataSource"        
  DomainServiceTypeName="Samples.Bank.Domain.BankDomainService"
  SelectMethod="GetCustomersByCity">         
        
  <SelectParameters>
    <asp:ControlParameter Name="city" ControlID="lstCities"         
         PropertyName="SelectedValue"  Type="String" />
  </SelectParameters>          
        
</asp:DomainDataSource>

Now, If we run the application, we can select items in the ListBox, and the items in the GridView will be filtered by the city value.

Enjoy!

Using DomainDataSource in ASP.Net

Guy Burstein — Sat, 11 Apr 2009 23:16:05 GMT

Using DomainDataSource in ASP.Net

In ASP.Net 2.0 we were introduced to this concept of Data Source controls. We got the ObjectDataSource, XmlDataSource and SqlDataSource that let us bind a GridView or a ListBox to some data without having to write any additional code. In .Net Framework 3.5 we got LinqDataSource and with .Net Framework 3.5 – the EntityDataSource. In the future of ASP.Net, among other significant improvements around data access, we get a new way of accessing our data – DomainDataSource.

The benefits of using the DomainDataSource is that is give us nice separation from the way our Data Model is represented (LINQ to SQL vs EF, POCO and Cloud) and gives us more control over how the data is being retrieved and manipulated.

In this post I’ll introduce the DomainDataSource that is already available as part of .Net RIA Service, and give a quick walkthrough on how to use it in an ASP.Net Web Forms application.

Creating a Data Model and a Domain Service

Create a new ASP.Net Web Application in Visual Studio 2008.

Add a Data Model to your application, whether it is a LINQ to SQL data model, an Entity Framework Data Model, or any other data model. In this sample I am using the Bank Schema with LINQ to SQL.

Make sure to build the project so that Visual Studio will generate the data classes and data context before the next step.

Add a new Domain Service. Add a new Item to the server project, and select the Domain Service template in the Web category.

After you add this item, the New Domain Service Class Dialog is shown. Select the Data Context (BankDataContext in this sample), select the entities you want to expose and whether you want to allow editing and click OK.

This adds the BankDomainService.cs that contains the code that exposes the data to the client, and BankDomainService.metadata.cs that contains additional metadata, mostly for presentation and validation.

This is how the DomainService looks like when working with LINQ to SQL. If you were working with the Entity Framework, the base class would be different. It simply contains CRUD methods for working with the data context.

public class BankDomainService : LinqToSqlDomainService<BankDataContext>
{
  public IQueryable<Customer> GetCustomers()
  {
    return this.Context.Customers;
  }
 
  public void InsertCustomer(Customer customer)
  {
    this.Context.Customers.InsertOnSubmit(customer);
  }
 
  public void UpdateCustomer(Customer currentCustomer, Customer originalCustomer)
  {
    this.Context.Customers.Attach(currentCustomer, originalCustomer);
  }
 
  public void DeleteCustomer(Customer customer)
  {
    this.Context.Customers.Attach(customer, customer);
    this.Context.Customers.DeleteOnSubmit(customer);
  }
}

It also adds some new references to System.ComponentModel.DataAnnotations, System.Web.DomainServices, System.Web.DomainServices.Providers and System.Web.Ria.

In addition to that, a new Http Handler was added to the web.config file.

<httpHandlers>
  ...
  <add path="DataService.axd"
      verb="GET,POST"
      type="System.Web.Ria.DataServiceFactory, System.Web.Ria,          
            Version=2.0.0.0, Culture=neutral,PublicKeyToken=31BF3856AD364E35"
      validate="false" />
</httpHandlers>

Use the DomainDataSource with ASP.Net

In a page of your choice, add a GridView control or any control that can bind to a DataSourceControl.

<asp:GridView runat="server" ID="GridView">
</asp:GridView>

Add a reference to System.Web.DomainServices.WebControls.dll, and in your page, register the prefix for this namespace:

<%@ Register TagPrefix="asp" Namespace="System.Web.DomainServices.WebControls" Assembly="System.Web.DomainServices.WebControls" %>

Add a DomainDataSource and bind it to the Grid. Notice the in the DomainDataSource declaration I referenced the type of the DomainService with its full namespace, and added which method in it should be used to retrieve data.

<asp:GridView runat="server" ID="GridView" 
  AutoGenerateColumns="true"
  DataSourceID="customersDataSource">
</asp:GridView>
 
<asp:DomainDataSource runat="server" ID="customersDataSource" 
  DomainServiceTypeName="Samples.Bank.Domain.BankDomainService"
  SelectMethod="GetCustomers">
</asp:DomainDataSource>

If you now run the application, you’ll see the grid populated with the results.

With DomainDataSource you get more control on how your data is retrieved and manipulated. You can add your logic to the select method, for example – providing a filter by the authenticated user, and add logic in the update methods, such as adding default values before updating the database.

Enjoy!