Master-Detail Views with the ASP.NET Ajax Library by Dino Esposito


When you think of data-driven Web pages, most of the time what you really have in mind is a master-detail view of some cross-related data. Master-detail views are ideal for rendering one-to-many relationships, and such relationships are so common in the real world that a Web platform that doesn’t provide an effective set of tools for that functionality is inadequate.

ASP.NET Web Forms has always provided strong support for data binding and a powerful set of data-source and data-bound server controls. In Web Forms, server controls do a great job of rendering hierarchies of data using nearly any possible combination of grids, lists, and drop-down boxes and supporting multiple levels of nesting.

The drawback of the views you get out of Web Forms server controls is not the effectiveness of the rendering, but the static condition.

Users who navigate within a master-detail view typically switch among master records and drill down into the details of the records that are of interest. This interaction is the essence of a master-detail view.

In a classic Web Forms scenario, each drill-down operation may trigger a postback. Many postbacks—and subsequent page reloads— are not what makes users happy these days.

An alternative exists, but it’s not free of issues either. It basically consists of preloading any possible data the user might want to see. The data is then downloaded with the standard page and kept hidden using CSS styles. At the same time, any handler of user actions is rewritten to unveil hidden content rather than triggering a postback. As you can see, this is not an easy way to go.

The ASP.NET Ajax Library, in collaboration with jQuery, offers a much more powerful toolset and makes it possible to write smooth and effective master-detail views that post back asynchronously and only when strictly needed.

Read more

Jay Ganesh

Advertisements

2 thoughts on “Master-Detail Views with the ASP.NET Ajax Library by Dino Esposito

  1. hi Ramani,
    I have one technical question,I am facing one issue while using jquery can u help me?
    this is my question I am using flexigrid with httphandler but i am getting one error.i am not able to display the data in grid.

    $(document).ready(new function () {
    // alert(“hi”);
    $(“#fgrdProduct”).flexigrid
    (
    {

    url: ‘GetProductsHandler.ashx’,
    //url: ‘FlexGridWithXMLDoc/GetProductList’,
    dataType: ‘xml’,
    colModel: [
    { display: ‘Id’, name: ‘Id’, width: 20, sortable: true, align: ‘left’ },
    { display: ‘Name’, name: ‘Name’, width: 180, sortable: true, align: ‘left’ },
    { display: ‘Description’, name: ‘Description’, width: 180, sortable: true, align: ‘left’ },
    { display: ‘Unit’, name: ‘Unit’, width: 120, sortable: true, align: ‘left’ },
    { display: ‘Unit Price’, name: ‘UnitPrice’, width: 130, sortable: true, align: ‘left’, hide: false },
    { display: ‘Create Date’, name: ‘CreateDate’, width: 80, sortable: true, align: ‘left’ }
    ],
    searchitems: [
    { display: ‘Name’, name: ‘Name’ },
    { display: ‘Description’, name: ‘Description’ },
    { display: ‘Unit’, name: ‘Unit’ },
    { display: ‘Unit Price’, name: ‘UnitPrice’ },
    { display: ‘Create Date’, name: ‘CreateDate’ },
    { display: ‘Id’, name: ‘Id’, isdefault: true }
    ],
    sortname: “Name”,
    sortorder: “asc”,
    usepager: true,
    title: ‘List of Products’,
    useRp: true,
    rp: 10,
    showTableToggleBtn: true,
    width: 805,
    onSubmit: addFormData,
    height: 200
    }
    );

    //This function adds paramaters to the post of flexigrid. You can add a verification as well can
    //return false if you don’t want flexigrid to submit
    function addFormData() {

    //passing a form object to serializeArray will get the valid data from all the objects, but, if you pass a non-form object,
    //you have to specify the input elements that the data will come from
    var dt = $(‘#sform’).serializeArray();
    $(“#fgrdProduct”).flexOptions({ params: dt });
    return true;
    }

    $(‘#sform’).submit
    (
    function () {
    $(‘#fgrdProduct’).flexOptions({ newp: 1 }).flexReload();
    return false;
    }
    );

    });

    instead of httphandler of i use webservice (url:’ProductsWebservice.asmx/GetProduct’) its working fine.

    But with httphandler its giving error.

    can u help me how to use httphandler with jquery

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s