Menu Case Study 6 – Serializing Data

Prerequisites

Part of the Case Study – Menu Example

Summary

In this video we will serialize the data to be passed via the AJAX call to the server to JSON, pass it back to the client page, and display it in the client browser. This demonstrates a full trip of passing and using data via an AJAX call. 

Video 

Reference Materials

A good article on serialization with challenges for different serialization is here – http://www.dotnetexpertguide.com/2013/06/aspnet-mvc-view-model-entity-framework-json-serialization.html 

Newtonsoft is the library that we will use when doing json based serialization – http://www.newtonsoft.com/json 

Function GetMenuGroup from MenuGroupsController.cs file (requires using Newtonsoft.Json; )

[HttpPost]
        public String GetMenuGroup(string id)
        {
            MenuGroup menuGroup = db.MenuGroups.Find(Convert.ToInt32(id));
            try {
                return JsonConvert.SerializeObject(
                    menuGroup,
                    Newtonsoft.Json.Formatting.None,
                    new JsonSerializerSettings()
                    {
                        ReferenceLoopHandling = ReferenceLoopHandling.Ignore
                    });
            }
            catch(Exception ex)
            {
                return ex.InnerException.Message;
            }
        }

MenuGroup.cs

using System;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
namespace MenuDatabaseCOP4709.Models
{
    [Serializable]
    public class MenuGroup
    {
        [Key]
        public int MenuGroupID { get; set; }
        [ForeignKey("Menu")]
        public int MenuID { get; set; }
        public virtual Menu Menu { get; set; }
        [Required(ErrorMessage = "A title is required for the menu group")]
        [Display(Name = "Title")]
        public string MenuGroupTitle { get; set; }
        [Display(Name = "Description")]
        public string MenuGroupDescription { get; set; }
    }
}

FullDetails.cshtml

@model MenuDatabaseCOP4709.Models.Menu
@{
    ViewBag.Title = "FullDetails";
}
<script type="text/javascript">
    function selectMenuGroup() {
       var dd = document.getElementById("MenuGroup");
        var index = dd.selectedIndex;
        var value = dd.options[index].value;
        var text = dd.options[index].text;
      $.ajax({
            url: '/MenuGroups/GetMenuGroup',
           type: 'POST',
            datatype: 'text',
            data: { id: value },
            success: function (data) {
                $("#menugroup").html(data);
            },
            error: function (data) {
                alert("Call was unsuccessful " + data)
            }
        });
    }
</script>
<h2>FullDetails</h2>
<div>
    <h4>Menu</h4>
    <hr />
    <dl class="dl-horizontal">
        <dt>
            @Html.DisplayNameFor(model => model.MenuTitle)
        </dt>
       <dd>
            @Html.DisplayFor(model => model.MenuTitle)
        </dd>
       <dt>
            @Html.DisplayNameFor(model => model.MenuDescription)
        </dt>
        <dd>
           @Html.DisplayFor(model => model.MenuDescription)
        </dd>
       <dt>
            Select a Menu Group
        </dt>
        <dd>
            @Html.DropDownList("MenuGroup", new SelectList(Model.MenuGroups,
                "MenuGroupId", "MenuGroupTitle"),
                new { onchange = "selectMenuGroup()" })
        </dd>
    </dl>
</div>
<p id="menugroup"></p>
<p>
    @Html.ActionLink("Edit", "Edit", new { id = Model.MenuID }) |
    @Html.ActionLink("Back to List", "Index")
</p>

Additional Information

COP 4834 Lectures Page