Changamoto: Data Driven Web App UI Design

Intro
Tunatengeneza web application kwaajili ya ku track huduma ya tuition katika mkoa wa Arusha, n.k
Tunatumia ASP.NET, Razor, MVC, EntityFramework, jQuery n.k

Database Design




Database hii ni kwaajili ya ku record tuition centers, wamiliki na walimu wanaohusika katika kufundisha tuition hizo, n.k

Task
Tunahitaji mchango(UI Design) wa jinsi ya ku implement Admin Page ya kuingiza details katika order nzuri kwa kila table/entity iliyopo hapo kwenye mchoro.

Done?
Tume create composite view model inayobeba model class mbalimbali kama ifuatavyo:-
>View model:
public class TuitionCompositeVM{
public Owner owner {get;set;}
public Center center {get;set;}
public Teacher teacher {get;set;}
public Course course {get;set;}
}
> Hii viewmodel inakuwa passed kwenye view constructor ndani ya create action method
i.e.
public ActionResult Create(){
var model = new TuitionCompositeVM();
return View(model);
}

UI design:
> Tumetumia Tabs control ili ku accomodate hizo table nne hapo juu kwenye TuitionCompositeVM model.

Logic
> Kwenye web page i.e. Create.cshtml tume disable other tabs except Owner tab ambayo ndiyo kama parent table ya table zote.
> user akiingiza data kwenye owner tab, na ku submit, tunabadilisha state ya tabs nyinginezo kwa kuruhusu content/input controls zake ziwe visible
> baada ya hapo mtumiaji atachagua tab nyingine na kuanza kujaza data zinazotakiwa.
> Data zote katika tabs nyinginezo zitakuwa posted kwenda kwenye controller kwa kutumia Ajax method call.

Challenge
Approach ya kuwa na composite view model hatujaipenda sana kwani inahitaji alot of work(imagine una 10 classes?).

Pia hatudhani kama ni approach nzuri katika soffware development.

Tungependa kusikia kutoka kwako juu ya njia na appoach nzuri zaidi katika kutatua changamoto hizi.

Tupe experience na wisdom zako katika ku design UI na flow ya data.

Pamoja