ASP.NET 4.0 Hosting & ASP.NET 4.5 Hosting BLOG

BLOG about ASP.NET 4.5 Hosting, ASP.NET 4.0 Hosting and .NET 4.5 Framework and its Capabilities

ASP.NET 4.0 Hosting :: ASP.NET GridView UI Tips and Tricks by using jQuery

clock September 27, 2010 14:52 by author Administrator

This article demonstrates how to create simple UI effects in an ASP.NET GridView control using jQuery. These tips have been tested in IE 7 and Firefox 3.

Set up an ASP.NET GridView as you usually do, binding it to a datasource. For demonstration purposes, here’s some sample markup where we are using the Northwind database and a GridView bound to the SQLDataSource to pull data from the database.

<form id="form1" runat="server">

<div>

    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"

        SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName], [Address], [City] FROM [Customers]">

    </asp:SqlDataSource>   

    <br />          

    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="CustomerID"

        DataSourceID="SqlDataSource1" AllowPaging="False" AllowSorting="True" >

        <Columns>                          

            <asp:BoundField DataField="CustomerID" HeaderText="CustomerID" ReadOnly="True" SortExpression="CustomerID" />

            <asp:BoundField DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName" />

            <asp:BoundField DataField="ContactName" HeaderText="ContactName" SortExpression="ContactName" />

            <asp:BoundField DataField="Address" HeaderText="Address" SortExpression="Address" />

            <asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />

        </Columns>

    </asp:GridView>

</div>

</form>

The <connectionStrings> element in the web.config will look similar to the following:

      <connectionStrings>

            <add name="NorthwindConnectionString" connectionString="Data Source=(local);Initial Catalog=Northwind;Integrated Security=True" providerName="System.Data.SqlClient"/>

      </connectionStrings>

Note: In most of the tips shown here, we are using a complex jQuery row ‘filter’ suggested by Karl Swedberg to a user in a jQuery forum. This filter is required due to the fact that a GridView does not render (accessibility tags) a <thead> and a <tfoot> by default. For the header, the GridView generates <th>’s inside <tr>. Similarly for the footer, the GridView generates a <table> inside a <tr> and so on. Hence it is required to use additional filters to exclude header and footer rows while adding UI effects on the GridView. These tips have been tried out on a GridView where paging is not enabled. When the paging is enabled, the pager however gets highlighted. We are still working on a solution to prevent the UI effects from being applied on the pager. We will update this article, once we find a solution. If you have a solution that works cross browser, please share it with us.

The link to download the code for all these samples can be found at the end of this article. Let’s see some tips.


1. Highlight an ASP.NET GridView row by clicking on it     

This tip lets you highlight a row when you click anywhere on the row. Clicking back on a highlighted row, removes the highlight.

<head id="Head1" runat="server">

<title>Highlight Row on Click</title>

<script src="Scripts/jquery-1.3.min.js" type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready(function() {

        $("tr").filter(function() {

            return $('td', this).length && !$('table', this).length

        }).click(function() {

            $(this).toggleClass('currRow');

        });

    });

</script>

<style type="text/css">

    .currRow

    {

        background-color:Gray;

        cursor:pointer;

    }   

</style>

</head>

After applying the filter on the rows (to prevent the user from highlighting the Header and Footer row), we use the toggleClass to highlight/remove highlight on the row.

Output:

2. Remove/Hide the Highlighted rows of an ASP.NET GridView

If you want to remove/hide the highlighted rows from the GridView, then here’s how to do so. We have added a HTML button control (Button1) to the form

<input id="Button1" type="button" value="Remove Rows" />

The jQuery is as shown below:

<head id="Head1" runat="server">

    <title>Hide Highlighted Rows>/title>

    <script src="Scripts/jquery-1.3.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            $("tr").filter(function() {

                return $('td', this).length && !$('table', this).length

            }).click(function() {

                $(this).toggleClass('currRow');

            });

            $("#Button1").click(function() {               

                var hideRows = $("tr").hasClass("currRow");

                if (hideRows == true) {                   

                    $("tr.currRow").remove();

                }

            });

        });

    </script>

    <style type="text/css">

        .currRow

        {

            background-color:Gray;

            cursor:pointer;

        }   

    </style>

</head>

Here the user first highlights the rows and then clicks on the ‘Remove Rows’ button to remove the highlighted rows

3. Remove/Hide ASP.NET GridView Rows on Mouse Click     

In our previous sample, we were following a two step process of first highlighting multiple rows and then removing them. Let’s say if we want to remove the rows as the user clicks on them, then follow this approach:

    <script type="text/javascript">

        $(document).ready(function() {

                $("tr").filter(function() {

                    return $('td', this).length && !$('table', this).length

                }).click(function() {

                    $(this).remove();

                });

        });       

    </script>

4. Highlight an ASP.NET GridView row on Mouse Hover     

In case you do not want to define a separate style for the row and want to highlight a row on mouse over (instead of the click), follow this tip:

<head id="Head1" runat="server">

    <title>Highlight Row on Hover</title>

    <script src="Scripts/jquery-1.3.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            $("tr").filter(function() {

                return $('td', this).length && !$('table', this).length

            }).css({ background: "ffffff" }).hover(

                function() { $(this).css({ background: "#C1DAD7" }); },

                function() { $(this).css({ background: "#ffffff" }); }

                );

        });

    </script>

</head>

Output:

5. Drag and Drop Rows of an ASP.NET GridView

 

 

 

 

This tip comes very handy when you are presenting a set of data in a GridView and want to rearrange rows at runtime. We are using the Table Drag and Drop Plugin for this example and it’s as simple as calling tableDnD() on the table. This plugin enables drag/drop on a table.

<head runat="server">

    <title>Drag Drop Rows</title>

    <script src="Scripts/jquery-1.3.min.js" type="text/javascript"></script>

    <script src="Scripts/jquery.tablednd_0_5.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            $("#GridView1").tableDnD();

        });

</script>

</head>

Output:

Before Drag

After Drop - dragging row with Customer ID ‘ANATR’ below ‘BLONP’

That’s it for now. We saw some UI tips that can be applied to an ASP.NET GridView using jQuery. Stay tuned to see some more in the forthcoming articles. We are also planning to write an article to store these UI changes when the user paginates through the Grid or a postback occurs

 

 

 

 



ASP.NET MVC Hosting :: ASP.NET MVC Model Binder for Repositories

clock September 21, 2010 08:11 by author Administrator

How do you take the values posted by an HTML form and turn them into a populated domain entity? One popular technique is to bind the POST values to a view-model and then map the view-model values to an entity. Since your action method’s argument is the view-model, it allows you to decide in the controller code if the view-model is a new entity or an existing one that should be retrieved from the database. If the view-model represents a new entity you can directly create the entity from the view-model values and then call your repository in order to save it.  In the update case, you can directly call your repository to get a specific entity and then update the entity from the values in the view-model

However, this method is somewhat tedious for simple cases. Is a view-model always necessary? Wouldn’t it be simpler to have a model binder that simply created the entity for you directly? Here’s our attempt at such a binder:

public class EntityModelBinder : DefaultModelBinder, IAcceptsAttribute
{   
readonly IRepositoryResolver repositoryResolver;
    EntityBindAttribute declaringAttribute;

    public EntityModelBinder(IRepositoryResolver repositoryResolver)
    {
        this.repositoryResolver = repositoryResolver;
    }

    protected override object CreateModel(
        ControllerContext controllerContext,
        ModelBindingContext bindingContext,
        Type modelType)
    {
        if (modelType.IsEntity() && FetchFromRepository)
        {
            var id = GetIdFromValueProvider(bindingContext.ValueProvider, modelType);
            if (id != 0)
            {
                var repository = repositoryResolver.GetRepository(modelType);
                object entity;
                try
                {
                    entity = repository.GetById(id);
                }
                finally
                {
                    repositoryResolver.Release(repository);
                }
                return entity;
            }
        }

        // Fall back to default model creation if the target is not an existing entity
        return base.CreateModel(controllerContext, bindingContext,
odelType);
    }

    private static int GetIdFromValueProvider(IValueProvider valueProvider, Type modelType)
    {
        var result = valueProvider.GetValue(modelType.GetPrimaryKey().Name);
        return (result == null) ? 0 : (int)result.ConvertTo(typeof(Int32));
    }

    public override object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
    {
        var model = base.BindModel(controllerContext, bindingContext);
        ValidateEntity(bindingContext, controllerContext, model);
        return model;
    }

    protected virtual void ValidateEntity(
        ModelBindingContext bindingContext,
        ControllerContext controllerContext,
        object entity)
    {
        // override to provide additional validation.
    }

    private bool FetchFromRepository
    {
        get
        {
            // by default we always fetch any model that implements IEntity
            return declaringAttribute == null ? true :
declaringAttribute.Fetch;
        }
    }

    public virtual void Accept(Attribute attribute)
    {
        declaringAttribute = (EntityBindAttribute)attribute;   
    }

    // For unit tests

    public void SetModelBinderDictionary(ModelBinderDictionary modelBinderDictionary)
    {
        Binders = modelBinderDictionary;
    }
}


We have simply inherited ASP.NET MVC’s DefaultModelBinder and overriden the CreateModel method. This allows us to check if the type being bound is one of our entities and then grabs its repository and gets it from the database if it is.

Now, We are most definitely not doing correct Domain Driven Development here despite our use of terms like ‘entity’ and ‘repository’. It’s generally frowned on to have table-row like settable properties and generic repositories. If you want to do DDD, you are much better off only binding view-models to your views

 



ASP.NET 4.0 & ASP.NET 4.5 Hosting

 

ASPHostCentral is a premier web hosting company where you will find low cost and reliable web hosting. We have supported the latest ASP.NET 4.5 hosting and ASP.NET MVC 4 hosting. We have supported the latest SQL Server 2012 Hosting and Windows Server 2012 Hosting too!

 

Calendar

<<  March 2024  >>
MoTuWeThFrSaSu
26272829123
45678910
11121314151617
18192021222324
25262728293031
1234567

View posts in large calendar

Sign in