C# Online Compiler | .NET Fiddle

<no name> by Anonymous

namespace MvcApplication.Models
{
    public class Note
    {
        public int Id { get; set; }
        public string Content { get; set; }
    }
}

Model

​x
 
namespace MvcApplication.Models
{
    public class Note
    {
        public int Id { get; set; }
        public string Content { get; set; }
    }
}
​

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Notes App</title>
    <!-- Bootstrap CSS -->
    <link 
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" 
        rel="stylesheet">
</head>
<body>
    <div class="container my-4">
        <h1 class="text-center">Notes Application</h1>

        <!-- Form for Adding/Editing Notes -->
        <div id="noteForm" class="card p-3 mb-4">
            <h2 id="formTitle">Add Note</h2>
            <form>
                <div class="mb-3">
                    <label for="noteContent" class="form-label">Content:</label>
                    <textarea id="noteContent" class="form-control" rows="3" placeholder="Enter content"></textarea>
                </div>
                <div class="mb-3">
                    <label for="noteCategory" class="form-label">Category:</label>
                    <select id="noteCategory" class="form-select">
                        <option value="Work">Work</option>
                        <option value="Personal">Personal</option>
                        <option value="Study">Study</option>
                    </select>
                </div>
                <button type="button" onclick="saveNote()" class="btn btn-primary me-2">Save</button>
                <button type="button" onclick="resetForm()" class="btn btn-secondary">Cancel</button>
            </form>
        </div>

        <!-- Table to Display Notes -->
        <h2>All Notes</h2>
        <table class="table table-striped table-hover">
            <thead>
                <tr>
                    <th>Content</th>
                    <th>Category</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody id="notesTable">
                <tr>
                    <td colspan="4" class="text-center">No notes available.</td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        let notes = [];
        let editIndex = null;

        function renderNotes() {
            const table = document.getElementById('notesTable');
            table.innerHTML = '';

            if (notes.length === 0) {
                table.innerHTML = '<tr><td colspan="4" class="text-center">No notes available.</td></tr>';
                return;
            }

            notes.forEach((note, index) => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    
                    <td>${note.content}</td>
                    <td>${note.category}</td>
                    <td>
                        <button class="btn btn-sm btn-warning" onclick="editNote(${index})">Edit</button>
                        <button class="btn btn-sm btn-danger" onclick="deleteNote(${index})">Delete</button>
                    </td>
                `;
                table.appendChild(row);
            });
        }

        function saveNote() {
            const content = document.getElementById('noteContent').value.trim();
            const category = document.getElementById('noteCategory').value;

            if (!content) {
                alert('Content is required.');
                return;
            }

            if (editIndex !== null) {
                notes[editIndex] = { content, category };
                editIndex = null;
                document.getElementById('formTitle').innerText = 'Add Note';
            } else {
                notes.push({ content, category });
            }

            resetForm();
            renderNotes();
        }

        function editNote(index) {
            const note = notes[index];
           
            document.getElementById('noteContent').value = note.content;
            document.getElementById('noteCategory').value = note.category;
            editIndex = index;
            document.getElementById('formTitle').innerText = 'Edit Note';
        }

        function deleteNote(index) {
            notes.splice(index, 1);
            renderNotes();
        }

        function resetForm() {
            document.getElementById('noteContent').value = '';
            document.getElementById('noteCategory').value = 'Work';
            editIndex = null;
            document.getElementById('formTitle').innerText = 'Add Note';
        }

        // Initialize table on page load
        renderNotes();
    </script>
</body>
</html>

View

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Notes App</title>
    <!-- Bootstrap CSS -->
    <link 
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" 
        rel="stylesheet">
</head>
<body>
    <div class="container my-4">
        <h1 class="text-center">Notes Application</h1>
​
        <!-- Form for Adding/Editing Notes -->
        <div id="noteForm" class="card p-3 mb-4">
            <h2 id="formTitle">Add Note</h2>
            <form>
                <div class="mb-3">
                    <label for="noteContent" class="form-label">Content:</label>
                    <textarea id="noteContent" class="form-control" rows="3" placeholder="Enter content"></textarea>
                </div>
                <div class="mb-3">
                    <label for="noteCategory" class="form-label">Category:</label>
                    <select id="noteCategory" class="form-select">
                        <option value="Work">Work</option>
                        <option value="Personal">Personal</option>
                        <option value="Study">Study</option>
                    </select>
                </div>
                <button type="button" onclick="saveNote()" class="btn btn-primary me-2">Save</button>
                <button type="button" onclick="resetForm()" class="btn btn-secondary">Cancel</button>
            </form>
        </div>
​
        <!-- Table to Display Notes -->
        <h2>All Notes</h2>
        <table class="table table-striped table-hover">
            <thead>
                <tr>
                    <th>Content</th>
                    <th>Category</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody id="notesTable">
                <tr>
                    <td colspan="4" class="text-center">No notes available.</td>
                </tr>
            </tbody>
        </table>
    </div>
​
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        let notes = [];
        let editIndex = null;
​
        function renderNotes() {
            const table = document.getElementById('notesTable');
            table.innerHTML = '';
​
            if (notes.length === 0) {
                table.innerHTML = '<tr><td colspan="4" class="text-center">No notes available.</td></tr>';
                return;
            }
​
            notes.forEach((note, index) => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    
                    <td>${note.content}</td>
                    <td>${note.category}</td>
                    <td>
                        <button class="btn btn-sm btn-warning" onclick="editNote(${index})">Edit</button>
                        <button class="btn btn-sm btn-danger" onclick="deleteNote(${index})">Delete</button>
                    </td>
                `;
                table.appendChild(row);
            });
        }
​
        function saveNote() {
            const content = document.getElementById('noteContent').value.trim();
            const category = document.getElementById('noteCategory').value;
​
            if (!content) {
                alert('Content is required.');
                return;
            }
​
            if (editIndex !== null) {
                notes[editIndex] = { content, category };
                editIndex = null;
                document.getElementById('formTitle').innerText = 'Add Note';
            } else {
                notes.push({ content, category });
            }
​
            resetForm();
            renderNotes();
        }
​
        function editNote(index) {
            const note = notes[index];
           
            document.getElementById('noteContent').value = note.content;
            document.getElementById('noteCategory').value = note.category;
            editIndex = index;
            document.getElementById('formTitle').innerText = 'Edit Note';
        }
​
        function deleteNote(index) {
            notes.splice(index, 1);
            renderNotes();
        }
​
        function resetForm() {
            document.getElementById('noteContent').value = '';
            document.getElementById('noteCategory').value = 'Work';
            editIndex = null;
            document.getElementById('formTitle').innerText = 'Add Note';
        }
​
        // Initialize table on page load
        renderNotes();
    </script>
</body>
</html>
​

using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
using MvcApplication.Models;

namespace MvcApplication.Controllers
{
    public class NotesController : Controller
    {
        private static List<Note> Notes = new List<Note>();
        private static int nextId = 1;

        // GET: Notes
        public ActionResult Index()
        {
            return View(Notes);
        }

        // GET: Notes/Create
        public ActionResult Create()
        {
            return View();
        }

        // POST: Notes/Create
        [HttpPost]
        public ActionResult Create(Note note)
        {
            if (ModelState.IsValid)
            {
                note.Id = nextId++;
                Notes.Add(note);
                return RedirectToAction("Index");
            }
            return View(note);
        }

        // GET: Notes/Edit/5
        public ActionResult Edit(int id)
        {
            var note = Notes.FirstOrDefault(n => n.Id == id);
            if (note == null)
            {
                return HttpNotFound();
            }
            return View(note);
        }

        // POST: Notes/Edit/5
        [HttpPost]
        public ActionResult Edit(Note note)
        {
            if (ModelState.IsValid)
            {
                var existingNote = Notes.FirstOrDefault(n => n.Id == note.Id);
                if (existingNote != null)
                {

                    existingNote.Content = note.Content;
                }
                return RedirectToAction("Index");
            }
            return View(note);
        }

        // GET: Notes/Delete/5
        public ActionResult Delete(int id)
        {
            var note = Notes.FirstOrDefault(n => n.Id == id);
            if (note == null)
            {
                return HttpNotFound();
            }
            return View(note);
        }

        // POST: Notes/Delete/5
        [HttpPost, ActionName("Delete")]
        public ActionResult DeleteConfirmed(int id)
        {
            var note = Notes.FirstOrDefault(n => n.Id == id);
            if (note != null)
            {
                Notes.Remove(note);
            }
            return RedirectToAction("Index");
        }
    }
}

Controller

 
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
using MvcApplication.Models;
​
namespace MvcApplication.Controllers
{
    public class NotesController : Controller
    {
        private static List<Note> Notes = new List<Note>();
        private static int nextId = 1;
​
        // GET: Notes
        public ActionResult Index()
        {
            return View(Notes);
        }
​
        // GET: Notes/Create
        public ActionResult Create()
        {
            return View();
        }
​
        // POST: Notes/Create
        [HttpPost]
        public ActionResult Create(Note note)
        {
            if (ModelState.IsValid)
            {
                note.Id = nextId++;
                Notes.Add(note);
                return RedirectToAction("Index");
            }
            return View(note);
        }
​
        // GET: Notes/Edit/5
        public ActionResult Edit(int id)
        {
            var note = Notes.FirstOrDefault(n => n.Id == id);
            if (note == null)
            {
                return HttpNotFound();
            }
            return View(note);
        }
​
        // POST: Notes/Edit/5
        [HttpPost]
        public ActionResult Edit(Note note)
        {
            if (ModelState.IsValid)
            {
                var existingNote = Notes.FirstOrDefault(n => n.Id == note.Id);
                if (existingNote != null)
                {
​
                    existingNote.Content = note.Content;
                }
                return RedirectToAction("Index");
            }
            return View(note);
        }
​
        // GET: Notes/Delete/5
        public ActionResult Delete(int id)
        {
            var note = Notes.FirstOrDefault(n => n.Id == id);
            if (note == null)
            {
                return HttpNotFound();
            }
            return View(note);
        }
​
        // POST: Notes/Delete/5
        [HttpPost, ActionName("Delete")]
        public ActionResult DeleteConfirmed(int id)
        {
            var note = Notes.FirstOrDefault(n => n.Id == id);
            if (note != null)
            {
                Notes.Remove(note);
            }
            return RedirectToAction("Index");
        }
    }
}
​

View in Full Screen

System.Collections.Generic.List`1[System.Int32]
1
2
3

Last Run:	5:47:52 am
Compile:	0.007s
Execute:	0.05s
Memory:	3.84Mb
CPU:	0.057s

View IL Code