How do I convert the enum int value to string value in ajax json response

Question

I have a home controller which has a list of objects and an index action method that returns a view which lists all the objects in a table.

Todo.cs

        [Display(Name ="Item Id")]
        [Required]
        public int ItemId { get; set; }

        [Display(Name ="Description")]
        [Required(ErrorMessage ="Description is required")]
        [StringLength(100,MinimumLength =10)]
        [Remote("CheckForDescription","Home",ErrorMessage ="Description already exists")]
        public string Description { get; set; }

        [Display(Name = "Start Date")]
        [Required(ErrorMessage ="Start date is required")]
        public DateTime StartDate { get; set; }

        [Display(Name = "End Date")]
        [Required(ErrorMessage ="End date is required")]
        public DateTime EndDate { get; set; }

        [Display(Name = "Status of completion")]
        public  Status StatusOfCompletion { get; set; }
      

HomeController.cs

 public static List<Todo> ListOfTodos = new List<Todo>()
        {
            new Todo()
            {
                ItemId=101,
                Description="Plan the module",
                StartDate=DateTime.Now,
                EndDate=DateTime.Now.AddDays(4),
                StatusOfCompletion=Status.YetToStart},
            new Todo()
            {
                ItemId=102,
                Description="Dry run the plan",
                StartDate=DateTime.Now.AddDays(3),
                EndDate=DateTime.Now.AddDays(5),
                StatusOfCompletion=Status.YetToStart
            }
        };
        public ActionResult Index()
        {
            return View();
        }
        public JsonResult DisplayList()
        {
            return Json(ListOfTodos, JsonRequestBehavior.AllowGet);
        }

Index.cshtml

@*@model IEnumerable<Todo_Application.Models.Todo>*@

@{
    ViewBag.Title = "Index";
    int count = 0;
}

<h2>List of todo items</h2>
<a href="/home/add" class="btn btn-primary">Add New Item</a>
<table class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>Serial No</th>
            <th>Item Id</th>
            <th>Description</th>
            <th>Start Date</th>
            <th>End Date</th>
            <th>Completion Status</th>
        </tr>
    </thead>
    <tbody id="itemstable">
       
    </tbody>
</table>

@section ajax{
    <script>
        $(document).ready(function () {
            function convertToJavaScriptDate(value) {
                var pattern = /Date\(([^)]+)\)/;
                var results = pattern.exec(value);
                var dt = new Date(parseFloat(results[1]));
                return (dt.getMonth() + 1) + "/" + dt.getDate() + "/" + dt.getFullYear();
            }
            $.ajax({
                url: '@Url.Action("DisplayList","Home")',
                success: function (data,status,req) {
                    for (i = 0; i < data.length; i++) {
                        alert(data[i].StatusOfCompletion);
                        str = "<tr><td>" + (i + 1) + "</td><td>" + data[i].ItemId + "</td><td>" + data[i].Description +
                            "</td><td>" + convertToJavaScriptDate(data[i].StartDate) + "</td><td>" + convertToJavaScriptDate(data[i].EndDate) +
                            "</td><td>" + data[i].StatusOfCompletion + "</td><td><a href=/home/edit/" + data[i].ItemId + ">Edit</a></td>";
                        $("#itemstable").append(str);
                    }
                }
            })
        });
    </script>
}

I am using ajax to send a request to populate the table. Now, the problem is, the StatusOfCompletion is of enum so when I send a request to DisplayList action, it return the json data. But, in the table enum value is displayed as integer. I want it to be displayed as string value. How can I do that?

Answer 1

Add this to your "Todo.cs":

[JsonIgnore]
public int StatusOfCompletionInt 
{
    get { return (int)this.StatusOfCompletion; }
}