DEV Community: mesCode

ASP.NET Core mesCode

mesCode — Thu, 16 Jul 2026 06:03:18 +0000

In this backend development guide, we are setting up a secure RESTful API endpoint using ASP.NET Core Web API.

1. Database Configuration (appsettings.json)

First, configure your SQL Server connection details inside the application environment variables. You can either use Windows Integrated Security or standard SQL Server Authentication.

Option A: Integrated Security (Windows Auth)

"AllowedHosts": "*", "ConnectionStrings": { "DefaultConnection": "Server=nameofserver;Database=nameofDB;Integrated Security=True;MultipleActiveResultSets=True;TrustServerCertificate=True;" } }

Option B: SQL Server Authentication

"AllowedHosts": "*", "ConnectionStrings": { "DefaultConnection": "Server=nameofserver;Database=nameofDB;User Id=your_username;Password=your_password;MultipleActiveResultSets=True;TrustServerCertificate=True;" } }

Defining the Service Contract (IService.cs) To maintain loose coupling, we define an asynchronous interface containing standard CRUD contracts for our data mutations.

Task<IEnumerable<Student>> GetAllStudentsAsync(); Task<Student> GetStudentByIDAsync(int id); Task<int> AddStudentAsync(Student student); Task<int> UpdateStudentAsync(Student student); Task<int> DeleteStudentAsync(int id);

Core Architecture: Async Stored Procedure Execution (StudentService.cs) Here is the underlying service layer that handles optimal stream reading with native asynchronous ADO.NET extensions.

` public class StudentService(IConfiguration config) : IStudentService
{
private string connectionString = config.GetConnectionString("DefaultConnection")!;

 public async Task<IEnumerable<Student>> GetAllStudentsAsync()
 {
     try
     {
         var students = new List<Student>();
         using var connection = new SqlConnection(connectionString);
         using var command = new SqlCommand("[GetAllStudent]", connection)
         {
             CommandType = System.Data.CommandType.StoredProcedure,
         };
         await connection.OpenAsync();
         using var reader = await command.ExecuteReaderAsync();
         while (reader.Read())
         {
             Student student = new Student();
             {
                 student.StudentID = reader.GetInt32(reader.GetOrdinal("StudentID"));
                 student.StudentName = reader.GetString(reader.GetOrdinal("StudentName"));
                 student.Email = reader.GetString(reader.GetOrdinal("Email"));
                 student.Phone = reader.GetString(reader.GetOrdinal("Phone"));
                 student.Gender = reader.GetString(reader.GetOrdinal("Gender"));
                 student.Address = reader.GetString(reader.GetOrdinal("Address"));
                 student.Rank = reader.GetDecimal(reader.GetOrdinal("Rank"));
                 student.DOB = reader.GetDateTime(reader.GetOrdinal("DOB"));
                 student.CourseID = reader.GetInt32(reader.GetOrdinal("CourseID"));
                 student.CourseName = reader.GetString(reader.GetOrdinal("CourseName"));

             }
             ;
             students.Add(student);
         }
         return students;
     }
     catch (Exception ex)
     { 
         throw new Exception($"error retrirving Student: {ex.Message}", ex);
     }

 }
 public async Task<Student> GetStudentByIDAsync(int id)
 {
     try
     {

         using var connection = new SqlConnection(connectionString);
         using var command = new SqlCommand("[GetstudentbyID]", connection)
         {
             CommandType = System.Data.CommandType.StoredProcedure
         };
         command.Parameters.AddWithValue("@StudentID", id);
         await connection.OpenAsync();
         using var reader = await command.ExecuteReaderAsync();
         Student std = new Student();
         while (await reader.ReadAsync())
         {
             Student student = new Student();
             {
                 student.StudentID = reader.GetInt32(reader.GetOrdinal("StudentID"));
                 student.StudentName = reader.GetString(reader.GetOrdinal("StudentName"));
                 student.Email = reader.GetString(reader.GetOrdinal("Email"));
                 student.Phone = reader.GetString(reader.GetOrdinal("Phone"));
                 student.Gender = reader.GetString(reader.GetOrdinal("Gender"));
                 student.Address = reader.GetString(reader.GetOrdinal("Address"));
                 student.Rank = reader.GetDecimal(reader.GetOrdinal("Rank"));
                 student.DOB = reader.GetDateTime(reader.GetOrdinal("DOB"));
                 student.CourseID = reader.GetInt32(reader.GetOrdinal("CourseID"));
                 student.CourseName = reader.GetString(reader.GetOrdinal("CourseName"));
             }
             ;
             std = student;
         }
         return std;
     }
     catch (Exception ex)
     {
         throw new Exception($"Error Get student: {ex.Message}", ex);
     }
 }

 public async Task<int> AddStudentAsync(Student student)
 {
     try
     {
         using var connection = new SqlConnection(connectionString);
         using var command = new SqlCommand("[SaveStudent]", connection)
         {
             CommandType = System.Data.CommandType.StoredProcedure
         };

         command.Parameters.AddWithValue("@StudentID", student.StudentID);
         command.Parameters.AddWithValue("@StudentName", student.StudentName);
         command.Parameters.AddWithValue("@Email", student.Email);
         command.Parameters.AddWithValue("@Phone", student.Phone);
         command.Parameters.AddWithValue("@Gender", student.Gender);
         command.Parameters.AddWithValue("@Address", student.Address);
         command.Parameters.AddWithValue("@Rank", student.Rank);
         command.Parameters.AddWithValue("@DOB", student.DOB);
         command.Parameters.AddWithValue("@CourseID", student.CourseID);
         await connection.OpenAsync();
         var result = await command.ExecuteNonQueryAsync();
         return result;

     }
     catch (Exception ex)
     {
         throw new Exception($"Erro Add Student: {ex.Message}", ex);
     }

 }`

RESTful API Presentation Layer (Controller.cs) Expose the endpoints using attributes routing so that front-end modern frameworks can interact safely via HTTP request methods.

` public class StudentController(IStudentService _studentService) : ControllerBase
{
[HttpGet("student")]
public async Task GetAllStudents()
{
try
{
var students = await _studentService.GetAllStudentsAsync();
return Ok(students);

     }
     catch (Exception ex)
     {
         return BadRequest(ex.Message);
     }

 }

 [HttpGet("{id:int}")]
 public async Task<IActionResult> GetStudentbyID(int id)
 {
     var student = await _studentService.GetStudentByIDAsync(id);
     if (student == null)
     {
         return NotFound($"Student With Id {id} not found");
     }
     return Ok(student);
 }

 [HttpPost]
 public async Task<IActionResult> AddStudent([FromBody] Student student)
 {
     var result = await _studentService.AddStudentAsync(student);
     return Ok(result);

 }
 [HttpPut("{id}")]
 public async Task<IActionResult> UpdateStudent(int id, [FromBody] Student student)
 {
     var result = await _studentService.UpdateStudentAsync(student);
     return NoContent();
 }

 [HttpDelete("{id:int}")]

 public async Task <IActionResult> DeleteStudent(int id)
 {
     var result = await _studentService.DeleteStudentAsync(id);
     return NoContent();
 }`

Dependency Injection & Service Registration (Program.cs) Register the custom domain services and open global Cross-Origin Resource Sharing (CORS) rules to enable decoupling integrations.

// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle builder.Services.AddEndpointsApiExplorer(); builder.Services.AddSwaggerGen(); _builder.Services.AddScoped<IStudentService,StudentService>();_

`// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
app.UseSwagger();
app.UseSwaggerUI();
}

app.UseCors(builder =>
builder.AllowAnyOrigin()
.AllowAnyMethod()
.AllowAnyHeader());
`

How to setup React fetching and Context API with Axios mesCode

mesCode — Thu, 16 Jul 2026 05:03:52 +0000

In this guide, we are configuring the basic React flow.

You need Node.js installed on your system. node -v (Check if you have it by running) If it is not installed, download it from the Official Node.js

2.Run the initialization command to create
*npm create vite@latest my-react-app -- --template react
*(Replace my-react-app with your preferred project name)

3.Move into your new project directory and install the required packages
cd my-react-app npm install

Launch your local live-reload development server npm run dev
place and see this example `import { useState, useEffect } from 'react'; import './App.css';

const API_BASE_URL = "https://localhost:7278/api/Student";

function App() {
const [students, setStudents] = useState([]);
const [courses, setCourses] = useState([]);

const [studentID, setStudentID] = useState(0);
const [studentName, setStudentName] = useState("");
const [email, setEmail] = useState("");
const [phone, setPhone] = useState("");
const [gender, setGender] = useState("Male");
const [address, setAddress] = useState("");
const [rank, setRank] = useState(0);
const [dob, setDob] = useState("");
const [courseID, setCourseID] = useState("");

const [isEditing, setIsEditing] = useState(false);

useEffect(() => {
fetchStudents();
fetchCourses();
}, []);

async function fetchStudents() {
try {
const response = await fetch(${API_BASE_URL}/student);
if (response.ok) {
const data = await response.json();
setStudents(data);
}
} catch (error) {
console.error("Error fetching students:", error);
}
}

async function fetchCourses() {
try {
const response = await fetch(${API_BASE_URL}/course);
if (response.ok) {
const data = await response.json();
setCourses(data);
if (data.length > 0 && !courseID) {
setCourseID(data[0].courseID);
}
}
} catch (error) {
console.error("Error fetching courses:", error);
}
}

async function handleSubmit(e) {
debugger;
e.preventDefault();

if (!studentName || !email || !courseID) {
  alert("Please Fill the Requred Fields (Name, Email, Course)!!");
  return;
}

const studentPayload = {
  studentID: isEditing ? studentID : 0,
  studentName: studentName,
  email: email,
  phone: phone,
  gender: gender,
  address: address,
  rank: parseFloat(rank),
  dob: dob ? new Date(dob).toISOString() : new Date().toISOString(),
  courseID: parseInt(courseID)
};

try {
  let response;
  if (isEditing) {
    response = await fetch(`${API_BASE_URL}/${studentID}`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(studentPayload)
    });
  } else {
    response = await fetch(API_BASE_URL, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(studentPayload)
    });
  }

  if (response.ok) {
    fetchStudents(); 
    clearForm();
  } else {
    const errMsg = await response.text();
    alert("Error: " + errMsg);
  }
} catch (error) {
  console.error("Submit error:", error);
}

}

function handleEdit(student) {
setIsEditing(true);
setStudentID(student.studentID);
setStudentName(student.studentName);
setEmail(student.email);
setPhone(student.phone);
setGender(student.gender);
setAddress(student.address);
setRank(student.rank);
setDob(student.dob ? student.dob.split('T')[0] : "");
setCourseID(student.courseID);
}

async function handleDelete(id) {
if (window.confirm("Are You Sure??")) {
try {
const response = await fetch(${API_BASE_URL}/${id}, {
method: 'DELETE'
});
if (response.ok) {
fetchStudents();
}
} catch (error) {
console.error("Delete error:", error);
}
}
}

function clearForm() {
setIsEditing(false);
setStudentID(0);
setStudentName("");
setEmail("");
setPhone("");
setGender("Male");
setAddress("");
setRank(0);
setDob("");
if (courses.length > 0) setCourseID(courses[0].courseID);
}

return (

Student Management System (CRUD)

  {/* --- FORM SECTION --- */}
  <form onSubmit={handleSubmit} style={{ border: '1px solid #ccc', padding: '20px', borderRadius: '8px', marginBottom: '30px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '15px' }}>
    <h3 style={{ gridColumn: 'span 2', margin: '0 0 10px 0' }}>{isEditing ? "✏️ Edit Student Details" : "➕ Register New Student"}</h3>

    <div>
      <label>Student Name *</label>
      <input type="text" value={studentName} onChange={(e) => setStudentName(e.target.value)} style={{ width: '100%', padding: '8px', marginTop: '5px' }} />
    </div>

    <div>
      <label>Email Address *</label>
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} style={{ width: '100%', padding: '8px', marginTop: '5px' }} />
    </div>

    <div>
      <label>Phone Number</label>
      <input type="text" value={phone} onChange={(e) => setPhone(e.target.value)} style={{ width: '100%', padding: '8px', marginTop: '5px' }} />
    </div>

    <div>
      <label>Gender</label>
      <select value={gender} onChange={(e) => setGender(e.target.value)} style={{ width: '100%', padding: '8px', marginTop: '5px' }}>
        <option value="Male">Male</option>
        <option value="Female">Female</option>
      </select>
    </div>

    <div>
      <label>Date of Birth</label>
      <input type="date" value={dob} onChange={(e) => setDob(e.target.value)} style={{ width: '100%', padding: '8px', marginTop: '5px' }} />
    </div>

    <div>
      <label>Rank / Marks</label>
      <input type="number" step="0.01" value={rank} onChange={(e) => setRank(e.target.value)} style={{ width: '100%', padding: '8px', marginTop: '5px' }} />
    </div>

    <div>
      <label>Select Course *</label>
      <select 
        value={courseID} 
        onChange={(e) => setCourseID(e.target.value)} 
        style={{ width: '100%', padding: '8px', marginTop: '5px', backgroundColor: '#968206', border: '1px solid rgb(19, 19, 15)' }}
      >
        <option value="">-- Choose Course --</option>
        {courses.map((course) => (
          <option key={course.courseID} value={course.courseID}>
            {course.courseName}
          </option>
        ))}
      </select>
    </div>

    <div style={{ gridColumn: 'span 2' }}>
      <label>Address</label>
      <textarea value={address} onChange={(e) => setAddress(e.target.value)} style={{ width: '100%', padding: '8px', marginTop: '5px', height: '60px' }}></textarea>
    </div>

    <div style={{ gridColumn: 'span 2', marginTop: '10px' }}>
      <button type="submit" style={{ padding: '10px 20px', backgroundColor: '#28a745', color: '#fff', border: 'none', cursor: 'pointer', borderRadius: '4px' }}>
        {isEditing ? "Update Student" : "Register Student"}
      </button>
      {isEditing && (
        <button type="button" onClick={clearForm} style={{ marginLeft: '10px', padding: '10px 20px', backgroundColor: '#6c757d', color: '#fff', border: 'none', cursor: 'pointer', borderRadius: '4px' }}>
          Cancel
        </button>
      )}
    </div>
  </form>

  {/* --- TABLE SECTION --- */}
  <h3>Registered Students</h3>
  <table border="1" cellPadding="10" style={{ width: '100%', borderCollapse: 'collapse', textAlign: 'left' }}>
    <thead>
      <tr style={{ backgroundColor: '#f8f9fa' }}>
        <th>ID</th>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
        <th>Address</th>
        <th>Gender</th>
        <th>Course</th>
        <th>Rank</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      {students.length > 0 ? (
        students.map((student) => (
          <tr key={student.studentID}>
            <td>{student.studentID}</td>
            <td>{student.studentName}</td>
            <td>{student.email}</td>
            <td>{student.phone}</td>
            <td>{student.address}</td>
            <td>{student.gender}</td>
            <td style={{ fontWeight: 'bold', color: '#0056b3' }}>{student.courseName}</td>
            <td>{student.rank}</td>
            <td>
              <button onClick={() => handleEdit(student)} style={{ marginRight: '5px', backgroundColor: '#ffc107', border: 'none', padding: '5px 10px', cursor: 'pointer' }}>Edit</button>
              <button onClick={() => handleDelete(student.studentID)} style={{ backgroundColor: '#dc3545', color: '#fff', border: 'none', padding: '5px 10px', cursor: 'pointer' }}>Delete</button>
            </td>
          </tr>
        ))
      ) : (
        <tr>
          <td colSpan="7" style={{ textAlign: 'center' }}>No students registered yet.</td>
        </tr>
      )}
    </tbody>
  </table>
</div>

);
}

export default App;`