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

  • Social distancing? Try a better way to work remotely on your online files. Dokkio, a new product from PBworks, can help your team find, organize, and collaborate on your Drive, Gmail, Dropbox, Box, and Slack files. Sign up for free.

View
 

Menu Case Study Part 6 - Serializing Data

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

Menu Case Study 6 - Serializing Data

 

Prerequisites

 

Part of the Case Study - Menu Example

 

Menu Case Study Part 5 - Ajax Calls 

 

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

 

 

Comments (0)

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