Looking for UI suggestions

[putrtek]

I have been tasked with creating a ASP.NET 2.0 web interface for a database to track Network Outages. I was handed a Excel Spreadsheet with a list of the fields they want to include/track. There are over 75 fields all together.

This is my first time suing asp.NET 2.0, all my previuos eperience is in Classic ASP. So I'm looking for User Interace suggestions from the Guru's.

How do I go about creating a interface were a user can Insert and Edit a record with over 75 fields and make it look half way decent.

Thanks in Advance for your suggestions

-MARK-

Mark Buckley

http://www.swiftriverphotos.com

 

[jmeckley]

with 75 fields you would want to break this up into multiple sections.

in it's simplest form you could have the main screen to search, select, add. you would want a series of controls for searching, a gridview to display your results, a link to add a new record. each row in the grid view should have a link to edit the record.

The second page is the update screen. I would recommend a asp:wiard control. group logical input into seperate Wizard Steps. the final step will display all the information and confirm it is correct. when they click finish persist the data to a db and return the user to the prevous screen.

use asp.net validation controls/summary to display error messages along the way.

there are plenty of 3rd party controls out there. personally I haven't had a need for them other than BasicDatePicker(

http://www.basicdatepicker.com).

it's a calendar control. There is also the MS AJAX server and client controls. these are free from MS. They just added a calendar control to the AJAX Control toolkit. If you want fancy ajax functionality without knowing any JS or XML this is a great tool. even if you do know it it's great.

asp.net has datasource controls for the web forms. this makes connecting to sql, access, odbc, or custom business objects very easy.



Jason Meckley
Programmer
Specialty Bakers, Inc.

 

[putrtek]

Jason,

Thank You very much for your input. The Wizard Control sounds like the way to go but I have a question about it.

Can I use the wizard for both Inserting records AND Editing Records? I've seen examples of the Wizard but all of them show inserting a record only, none show Updating or Editing a record.

Thanks again for your Input.

-MARK-

Mark Buckley

http://www.swiftriverphotos.com

 

[jmeckley]

yes you can use the wizard to edit as well as insert. this is only a presentation control. it's up to you to link the wizard to your business logic.

the simplest way is to pass the unique id from the grid to the wizard page. your edit link would point to [tt]wizard.aspx?id=123[/tt]. your add link would look like [tt]wizard.aspx[/tt].

then in wizard.aspx.cs you could have a private property

private int EventId
{
   get
   {
      int id = 0;
      if(Request.QueryString["id"] != null)
      {
          int.TryParse(Request.QueryString["id"], id);
      }
      return id;
   }
}

then in your PageLoad event

if(!Page.IsPostBack)
{
    if (this.EventId > 0)
    {
       //pass this.EventId to your business logic to retrieve data.
    }
}

Jason Meckley
Programmer
Specialty Bakers, Inc.

 

[putrtek]

So basically your saying I can use the same form for both insert and Edit?

Mark Buckley

http://www.swiftriverphotos.com

 

[ca8msm]

Potentially yes, but in practice it may be easier and more maintainable to split it into two seperate pages.


____________________________________________________________
Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]

Need help finding an answer? Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[putrtek]

just curious if anyone knows of a sample somewhere on the web of how to go about doing this (Using the Wizard Control to UPDATE a Existing record)

Thanks

-MARK-


Mark Buckley

http://www.swiftriverphotos.com

 

[jmeckley]

create the wizard like you would for a new item. if there is an ID:
1. query your db
2. set the values of the gui controls with the db values 3. edit values via gui
4. save values from gui back to db

if there was not an ID the process would be:
1. edit values via gui
2. save values from gui to db


Jason Meckley
Programmer
Specialty Bakers, Inc.

 

[putrtek]

Thanks Jason,

I'll give it a go.

-MARK-

Mark Buckley

http://www.swiftriverphotos.com