A simple .NET Core MVC web application for collecting and displaying personal identity information through a responsive web form.
- Responsive Design: Bootstrap-based layout that works on desktop and mobile devices
- Comprehensive Form Fields: Collects essential personal information including:
- Full Name
- Father's Name
- Gender (Dropdown selection)
- Country of Stay
- Age (with validation: 0-150)
- Identity Number (13 characters required)
- Date of Birth
- Marital Status (Radio buttons)
- Server-side Processing: Form data is processed and displayed upon submission
- Input Validation: Built-in HTML5 and ASP.NET Core validation
- .NET Core 3.1 or later
- Visual Studio 2019/2022 or Visual Studio Code
- Basic knowledge of ASP.NET Core MVC
PracticeApplication/
├── Controllers/
│ └── HomeController.cs
├── Models/
│ └── PersonModel.cs
├── Views/
│ └── Home/
│ └── Index.cshtml
└── README.md
-
Clone or Download the project to your local machine
-
Open the project in Visual Studio or Visual Studio Code
-
Restore NuGet packages (if needed):
dotnet restore
-
Build the project:
dotnet build
-
Run the application:
dotnet run
-
Navigate to
https://localhost:5001
orhttp://localhost:5000
in your browser
The PersonModel
class should include the following properties:
public class PersonModel
{
public string Name { get; set; }
public string FatherName { get; set; }
public Gender Gender { get; set; }
public string CountryOfStay { get; set; }
public int Age { get; set; }
public string IdentityNumber { get; set; }
public DateTime Dob { get; set; }
public bool IsMarried { get; set; }
}
public enum Gender
{
Male,
Female,
Other
}
- Displays the identity form
- Returns the main view with an empty model
- Processes the submitted form data
- Returns a formatted string containing all submitted information
- Input parameter:
PersonModel
object with form data
The form includes several validation features:
- Age: Minimum 0, Maximum 150
- Identity Number: Exactly 13 characters required
- Required Fields: All fields are expected to be filled
- Date Format: Standard date picker for Date of Birth
- Radio Buttons: Ensures single selection for marital status
- Fill out all the form fields with your personal information
- Select your gender from the dropdown menu
- Choose your marital status using the radio buttons
- Click the "Submit" button
- View your submitted information displayed on the result page
- The form uses Bootstrap classes for responsive design
- Modify the CSS classes in the view to change the appearance
- The form is centered using Bootstrap's grid system (
col-sm-4
offset)
- Add data annotations to the
PersonModel
properties for server-side validation - Implement client-side validation using jQuery Validation
- Customize error messages and validation rules as needed
- Currently returns a simple string format
- Can be modified to return JSON, redirect to a success page, or save to database
- .NET Core MVC: Web framework
- Bootstrap: CSS framework for responsive design
- HTML5: Form structure and basic validation
- Razor Pages: Server-side rendering