MVC UI Template - ASP.NET Core Customer Management System

A production-ready ASP.NET Core MVC template demonstrating enterprise-grade CRUD operations with advanced features including sorting, searching, pagination, and responsive Bootstrap UI.

---

🚀 Features

• ✅ Complete CRUD Operations - Create, Read, Update, Delete customer records
• 🔍 Advanced Search - Multi-field search across customer attributes
• 🔃 Dynamic Sorting - Click-to-sort on all table columns (ascending/descending)
• 📄 Pagination - Efficient data loading with configurable page size
• 📱 Responsive Design - Bootstrap 5 mobile-first interface
• 🗄️ Database Seeding - Automatic initialization with sample data
• 🔗 Entity Framework Core - Code-first approach with SQL Server
• ✔️ Form Validation - Client and server-side validation
• 💬 Success Notifications - User feedback with TempData alerts

📸 Screenshots

Customer List View

Comprehensive data table with multi-column search, sortable headers, and pagination controls.

Create New Customer

Clean, responsive form with Bootstrap 5 styling and validated input fields.

Edit Customer

Edit form pre-populated with existing customer data, maintaining consistent UI.

Customer Details

Read-only view displaying complete customer information with action buttons.

Delete Confirmation

Safety confirmation dialog to prevent accidental data loss.

📋 Prerequisites

• .NET 6.0 SDK or higher
• SQL Server (Express/Developer/Standard)
• Visual Studio 2022 or VS Code
• Basic knowledge of C# and ASP.NET Core MVC

🛠️ Technology Stack

Category	Technologies
Framework	ASP.NET Core MVC 6.0
Language	C# 10
ORM	Entity Framework Core 6.0
Database	Microsoft SQL Server
Frontend	Bootstrap 5.3, jQuery 3.6
Validation	jQuery Validation & Unobtrusive
Architecture	MVC Pattern

⚙️ Installation & Setup

1. Clone the Repository

git clone https://github.com/RashedulHaqueRonjon/mvc-ui-template.git
cd mvc-ui-template

2. Configure Database Connection

Update appsettings.json with your SQL Server connection string:

{
  "ConnectionStrings": {
    "DefaultConnection": "Server=YOUR_SERVER;Database=MVCUITemplateDB;Trusted_Connection=True;TrustServerCertificate=True"
  }
}

3. Restore Dependencies

dotnet restore

4. Run the Application

dotnet run

The application will automatically:

• Create the database if it doesn't exist
• Seed initial customer data
• Launch at https://localhost:5001

📁 Project Structure

MVCUITemplate/
├── Controllers/
│   └── CustomerController.cs      # Main CRUD logic with sorting/filtering
├── Data/
│   ├── AppDbContext.cs            # EF Core DbContext
│   └── DbInitializer.cs           # Database seeding logic
├── Models/
│   └── Customer.cs                # Customer entity model
├── Views/
│   ├── Customer/
│   │   ├── Index.cshtml           # List view with search/sort/pagination
│   │   ├── Create.cshtml          # Create form
│   │   ├── Edit.cshtml            # Edit form
│   │   ├── Details.cshtml         # Details view
│   │   └── Delete.cshtml          # Delete confirmation
│   └── Shared/
│       ├── _Layout.cshtml         # Master layout
│       ├── _Navbar.cshtml         # Navigation partial
│       ├── _Pagination.cshtml     # Pagination partial
│       └── _SortableColumn.cshtml # Sortable column partial
├── wwwroot/
│   ├── css/
│   └── js/
├── .editorconfig                  # Code style configuration
├── .gitignore
├── CONTRIBUTING.md                # Contribution guidelines
├── LICENSE                        # MIT License
├── README.md
├── appsettings.json
└── Program.cs                     # Application entry point

🎯 Key Implementation Highlights

Pagination Logic

int totalRecords = await customers.CountAsync();
int totalPages = (int)Math.Ceiling(totalRecords / (double)PageSize);

var paginatedList = await customers
    .Skip((pageNumber - 1) * PageSize)
    .Take(PageSize)
    .ToListAsync();

Multi-Column Search

customers = customers.Where(c =>
    (c.FirstName != null && c.FirstName.ToLower().Contains(lowerSearch)) ||
    (c.LastName != null && c.LastName.ToLower().Contains(lowerSearch)) ||
    (c.EmailAddress != null && c.EmailAddress.ToLower().Contains(lowerSearch)) ||
    (c.CompanyName != null && c.CompanyName.ToLower().Contains(lowerSearch))
);

Dynamic Sorting

customers = sortOrder switch
{
    "FirstName" => customers.OrderBy(c => c.FirstName),
    "FirstName_desc" => customers.OrderByDescending(c => c.FirstName),
    "LastName" => customers.OrderBy(c => c.LastName),
    // ... additional sort options
    _ => customers.OrderBy(c => c.FirstName)
};

🔧 Customization

Change Page Size

In CustomerController.cs:

private const int PageSize = 5; // Modify this value

Add New Fields

1. Update Customer.cs model
2. Create migration: dotnet ef migrations add AddNewField
3. Update database: dotnet ef database update
4. Update views to display new fields

Change Database Provider

Replace SQL Server with PostgreSQL, MySQL, or SQLite by updating:

• NuGet packages
• Connection string in appsettings.json
• UseSqlServer() in Program.cs

🧪 Testing

Manual Testing Checklist

• Create new customer record
• Edit existing customer
• Delete customer with confirmation
• Search by name, email, company
• Sort by each column (asc/desc)
• Navigate through pagination
• Validate form inputs
• Test responsive layout on mobile

📚 Learning Outcomes

This project demonstrates proficiency in:

• ASP.NET Core MVC architecture
• Entity Framework Core ORM
• LINQ query optimization
• Asynchronous programming (async/await)
• Bootstrap responsive design
• Client-side and server-side validation
• Partial views and view components
• TempData for cross-request messaging
• Database initialization and seeding

🤝 Contributing

Contributions are welcome! Please read our Contributing Guidelines before submitting a Pull Request.

📄 License

This project is open source and available under the MIT License.

👤 Author

Rashedul Haque Ronjon

---

🌟 If you find this project helpful, please consider giving it a star!

📞 Need custom development? Feel free to reach out!

If you need a similar system customized for your business needs or have questions about implementation, feel free to reach out: 📧 Email: rashedul.haque.ronjon@outlook.com 💼 LinkedIn: Connect with me I specialize in: • Custom business application development • ERP system customization and optimization • Database design and optimization • Process automation solutions • Full-stack web development

🙏 Acknowledgments

• Bootstrap - For the excellent CSS framework
• Microsoft - For ASP.NET Core and Entity Framework Core
• The open-source community for continuous inspiration

---

Made with ❤️ by Rashedul Haque Ronjon