• If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • Stop wasting time looking for files and revisions. Connect your Gmail, DriveDropbox, and Slack accounts and in less than 2 minutes, Dokkio will automatically organize all your file attachments. Learn more and claim your free account.


Menu Case Study Part 6 - Serializing Data

Page history last edited by Dr. Ron Eaglin 4 years, 8 months ago

Menu Case Study 6 - Serializing Data




Part of the Case Study - Menu Example


Menu Case Study Part 5 - Ajax Calls 




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. 





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; )


        public String GetMenuGroup(string id)


            MenuGroup menuGroup = db.MenuGroups.Find(Convert.ToInt32(id));

            try {


                return JsonConvert.SerializeObject(



                    new JsonSerializerSettings()


                        ReferenceLoopHandling = ReferenceLoopHandling.Ignore



            catch(Exception ex)


                return ex.InnerException.Message;







using System;

using System.ComponentModel.DataAnnotations;

using System.ComponentModel.DataAnnotations.Schema;


namespace MenuDatabaseCOP4709.Models



    public class MenuGroup



        public int MenuGroupID { get; set; }



        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; }






@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;



            url: '/MenuGroups/GetMenuGroup',

            type: 'POST',

            datatype: 'text',

            data: { id: value },

            success: function (data) {



            error: function (data) {

                alert("Call was unsuccessful " + data)












    <hr />

    <dl class="dl-horizontal">


            @Html.DisplayNameFor(model => model.MenuTitle)




            @Html.DisplayFor(model => model.MenuTitle)




            @Html.DisplayNameFor(model => model.MenuDescription)




            @Html.DisplayFor(model => model.MenuDescription)




            Select a Menu Group




            @Html.DropDownList("MenuGroup", new SelectList(Model.MenuGroups,

                "MenuGroupId", "MenuGroupTitle"),

                new { onchange = "selectMenuGroup()" })






<p id="menugroup"></p>


    @Html.ActionLink("Edit", "Edit", new { id = Model.MenuID }) |

    @Html.ActionLink("Back to List", "Index")









Additional Information



COP 4834 Lectures Page



Comments (0)

You don't have permission to comment on this page.