thoughts on coding

January 17, 2009

Extensions to the ASP.NET MVC Contribution project

Filed under: Uncategorized — Frantisek @ 9:04 am

I work on a web project where I use ASP.NET MVC.  I hate the spaghetti code and I’m quite happy that MVCContrib added a new usefull extensions to the core MVC generic like Grid and generic ActionLink.

While using them I found I miss some features which I decided to add there. I explain both extensions  on the complex example.

      this.Html.Grid<Car>(
          this.Model.ListModel.Items,
          new Hash(empty => "There are no data", Class=>"list w99p"),
          columns =>
            {
              columns.For("Children").Do(item =>
                Response.Write(
                  "<td>{0}</td>".FormatWith(Html.ActionLink<CarController>(c => c.Edit(item.ID), "...", new { Class = "none left" })
              )));
                columns.For(item => item.Code, "Code")
                    .Attrs((item, index) => new {style = "color:" + (index%2 == 0 ? "red" : "blue") + ";"})
                    .HeaderAttrs(new {style="color:red;"});
                columns.For(
                  item => Html.ActionLink<CarController>(c => c.Edit(item.ID), item.Name, new { Class="none left" }), "Name").DoNotEncode();
                columns.For(
                  item => Html.ActionLink<CarController>(
                      c => c.Delete(item.ID), "<span class=\"redC\">X</span>",
                      new { Class = "none left", onclick = "Assure(event, 'DoDelete');", title = "Delete" },
                      LinkOptions.PlainContent),
                  "Delete").DoNotEncode().Attrs((d,i) => new { Class = "w30 redC" });
            }
            , sections => sections.RowAttrs((item, index) => new { Class = "Prenatal {0}".FormatWith(index % 2 == 0 ? "odd" : "") }));

GRID  extensions

Formatting the cell, the cell header, the row.

You can find many wishes from the users on the discussion forum of MVC grid regarding formatting the cells, headers, rows. It’s possible with current MVCContrib but using a spaghetti code which I dont like. So I decided to exted MVCContrib  with this missing simple functionality.

              columns.For(item => item.Code, "Code")
                .Attrs((item, index) => new { style = (item.Sale > 0 ? "color:red" : "") + ";" })
                .HeaderAttrs(new { style = "color:red;" });

Using method Attrsit’s possible to specify the cell’s HTML attributes which are calculated per each item! in the model (i.e. if  it’s necessary to change the row background based on the data in the item). In the example I use second argument (index of the item in the list) to set color of the cell.

Using method HeaderAttrs it’s possible to set the HTML attributes of the cell header. In this case there is no reason to calculate the HTML attributes per item as the header is rendered as the first row in the grid. The user can specify the attribute as an annonymous object.

The similla approach is used for the rows, too.

sections => sections.RowAttrs((item, index) => new { Class = "Prenatal {0}".FormatWith(index % 2 == 0 ? "odd" : "") })

Using RowAttrs it is possible to set the HTML attributes of the row (TR tag) which are calculated per item! as mentioned above.

Action Link extensions

There are many posts, hack, complaint about using ActionLink which should have as a content an Image or  any HTML. The default implementation of ActionLink encodes the linkText by default. Using my extention it is possible to specify a LinkOption if I need to encode or not  the link content.

                item => Html.ActionLink<CarController>(
                          c => c.Delete(item.ID), // href
                          "<span class=\"redC\">X</span>", // LINK CONTENT
                          new { Class = "none left", onclick = "Assure(event, 'DoDelete');", title = "Delete" }, // html attributes
                          LinkOptions.PlainContent); // LINK OPTIONS

That’s all for now.  I hope this post can be helpfull for you.

The source code and binaries can be found at here

Create a free website or blog at WordPress.com.