# 12.0: Add Star Option

## Add `isStarred` Property to Database

Let's add an option to star a note. This is an example of how to make changes after you've completed the first version of something. It's a good idea to branch off and do this on a separate branch.

First, we need to update our database to have a property of wether or not a note is starred.

1. Go to **ElevenNote.Data -> Note.cs**
2.  Add the following property between the `Content` and `CreatedUtc` properties

    ```csharp
         [DefaultValue(false)]
         public bool IsStarred { get; set; }
    ```
3. `CTRL .` to bring in the using statement
4.  In order for the database to be updated with this new column, we need to:

    [**RUN MIGRATIONS**](https://github.com/ElevenfiftyAcademy/DotNet-201-ElevenNote/tree/ac22620ac75290e5fe3d56cc472a23307988680c/docs/3-DatabaseSetup/3.0b-Migrations.md)

## Update the `NoteListItem` Model

We'll want a clickable star on the page that shows all of our notes. The model for that view is `NoteListItem`

1.  Go to **ElevenNote.Models -> NoteListItem.cs** and add the `IsStarred` property between the `Title` and `CreatedUtc`

    ```csharp
         [UIHint("Starred")]
         public bool IsStarred { get; set; }
    ```
2. The `UIHint` will link up to a view we make later

## Update `NoteService.cs`

We'll need the service to know about the star as well???

1.  Add the `IsStarred` option in  `IEnumerable<NoteListItem>`.

    ```csharp
         new NoteListItem
     {
         NoteId = e.NoteId,
         Title = e.Title,
         IsStarred = e.IsStarred,
         CreatedUtc = e.CreatedUtc
     }
    ```

## Add Star to Index View

We need to add a column and column name for the `isStarred` property in our table that displays the list of notes.

1. Open **ElevenNote.Web -> Views -> Note -> Index.cshtml**
2.  Add the `DisplayNameFor` for `IsStarred`

    ```markup
         <th>
             @Html.DisplayNameFor(model => model.Title)
         </th>
         <th>
             @Html.DisplayNameFor(model => model.IsStarred)
         </th>
         <th>
             @Html.DisplayNameFor(model => model.CreatedUtc)
         </th>
         <th></th>
     </tr>
    ```
3.  Add the `DisplayFor` for `IsStarred`

    ```markup
         <td>
             @Html.DisplayFor(modelItem => item.Title)
         </td>
         <td>
             @Html.DisplayFor(modelItem => item.IsStarred, new { Id = item.NoteId })
         </td>
         <td>
             @Html.DisplayFor(modelItem => item.CreatedUtc)
         </td>
         <td>
             @Html.ActionLink("Edit", "Edit", new { id = item.NoteId }) |
             @Html.ActionLink("Details", "Details", new { id = item.NoteId }) |
             @Html.ActionLink("Delete", "Delete", new { id = item.NoteId })
         </td>
     </tr>
    ```
4. Now, we need some JavaScript to make the star functionality work
5.  Add this code to the very end of `Index.cshtml`, after `</table>`:

    ```markup
     @section scripts {
     <script language="javascript" type="text/javascript">
         $(document).ready(function () {
             $("i[data-toggle='star']")
                 .css({ "cursor": "pointer" })
                 .click(function (e) {
                     var target = $(e.target);
                     var noteId = target.attr("data-id");
                     var starSet = target.hasClass("glyphicon-star");

                     $.ajax({
                         method: starSet ? "DELETE" : "PUT",
                         url: "/api/note/" + noteId + "/star",
                         data: null
                     })
                     .done(function (r) {
                         target.removeClass();
                         target.addClass("glyphicon " + (starSet ? "glyphicon-star-empty" : "glyphicon-star"));
                     })
                     .fail(function (r) {
                         alert("Failed to change star status");
                     });
                 });
         });
     </script>
    }
    ```

## Add the Starred Display Template

Similar to the DateTime display changes we made, we'll make a view specifically for the star. Notice that the name of this view, `Starred`, is the same as the `UIHint` from the `NoteListItem` model.

1. Right click on the **ElevenNote.Web -> Views -> Shared -> Display Templates** folder and select **Add -> View**
2.  Name it `Starred` and fill it out like this:

    ![Starred View](https://3258533034-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfMZK4G04fkoGGv%2F-LAxkhSkWauvrwb505Dy%2F-LAxkjgixf2iialWxxym%2F12.0-A.png?generation=1524675838537671\&alt=media)
3.  Add this code:

    ```markup
     @model bool

     <span>
         <i class="glyphicon @(Model ? "glyphicon-star" : "glyphicon-star-empty")"
            data-toggle="star"
            data-id="@ViewBag.Id"></i>
     </span>
    ```
4. ![Git](https://3258533034-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfMZK4G04fkoGGv%2F-LAwyv0-ttugakHO6zeV%2F-LAwyxUd0dcYSLXYb-5s%2Fdevicons_github_badge.png?generation=1524662787257488\&alt=media)

[Next,](12.1-starsetup) we'll do more setup to get the star function working.
