7.1: Validation Messages

The code in this section adds success/failure messages for validation of note creation.

Update the Create [HttpPost] Method

1. Still in ElevenNote.Web -> Controllers -> NoteController

2. Change the Create [Post] method to match this:

        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create(NoteCreate model)
        {
            if (!ModelState.IsValid) return View(model);
   
            var service = CreateNoteService();
   
            if (service.CreateNote(model))
            {
                return RedirectToAction("Index");
            };
   
            return View(model);
        }

ViewBag vs ValidationSummary

1. Go to ElevenNote.Web -> Views -> Note

2. Open Create.cshtml

3. Notice the ValidationSummary

4. ViewBag is a way that communication could go to the view

5. Instead we will use ValidationSummary

Add Model Error Message

1. Go back to ElevenNote.Web -> Controllers -> NoteController

2. Comment out the following code and add ModelState.AddModelError..., this way you can run the app and see the error message.

        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create(NoteCreate model)
        {
            if (!ModelState.IsValid) return View(model);
   
            //var service = CreateNoteService();
   
            //if (service.CreateNote(model))
            //{
            //    return RedirectToAction("Index");
            //};
   
            ModelState.AddModelError("", "Note could not be created.");
   
            return View(model);
        }

3. Run the app and try to create a note. You should see the error message:

   

4. Let's stop the app so that we can fix this.

Add Success Message

1. Un-comment out the lines from before

2. Inside the NoteController conditional that indicates the save was successful, add ViewBag.SaveResult = "Your note was created.";

3. Your code should look like this:

        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create(NoteCreate model)
        {
            if (!ModelState.IsValid) return View(model);            
   
            var service = CreateNoteService();
   
            if (service.CreateNote(model))
            {
                ViewBag.SaveResult = "Your note was created.";
                return RedirectToAction("Index");
            };
   
            ModelState.AddModelError("", "Note could not be created.");
   
            return View(model);
        }

Add a Bootstrap Error Message in the View

1. Click on the Index() method and type CTRL M G, this should take you to the Index.cshtml file

2. Or, go to ElevenNote.Web -> Views -> Note -> Index.cshtml

3. Add this <div> between the <p> and the <table>

    <p>
        @Html.ActionLink("Create New", "Create")
    </p>
       <div class="alert alert-success fade in" role="alert">
            @ViewBag.SaveResult
            <button type="button" class="close" data-dismiss="alert">
                <span>&times;</span>
            </button>
        </div>

4. This uses a Bootstrap component, click here to look at the docs.

5. The success message does not appear because of the RedirectToAction

6. RedirectToAction create ViewBag.Result to the following:

7. Back in the NoteController.cs file, change ViewBag to TempData

         var service = CreateNoteService();
   
        if (service.CreateNote(model))
        {
            TempData["SaveResult"] = "Your note was created.";
            return RedirectToAction("Index");
        };

8. TempData removes information after it's accessed

9. Go back to the Index.cshtml file

10. wrap your <div class="alert...> in the following conditional:

    <p>
        @Html.ActionLink("Create New", "Create")
    </p>
    
    @if(TempData.ContainsKey("SaveResult"))
    {
        <div class="alert alert-success fade in" role="alert">
    
            <button type="button" class="close" data-dismiss="alert">
                <span>&times;</span>
            </button>
            @TempData["SaveResult"]
        </div>
    }

11. .ContainsKey checks to see if that key is in the dictionary, but will not remove it.

12. Run the app, you should see this message when you create a note:

    

13. 

Next, we'll work on the Note detail.