| 
  • 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! Dokkio, a new product from the PBworks team, integrates and organizes your Drive, Dropbox, Box, Slack and Gmail files. Sign up for free.

View
 

Menu Case Study Part 4 - Generating a Javascript call from a Razor Object

Page history last edited by Dr. Ron Eaglin 3 years, 12 months ago

Generating a Javascript call from a Razor Object

 

 

 

Prerequisites

 

Lecture - Menu Case Study Part 2 - Creating a Custom View

 

Part of Case Study - Menu Example 

 

Next Lecture - Menu Case Study Part 5 - Ajax Calls

 

Summary

 

Demonstrates how to create a drop down list in Razor and then call a javascript function from the generated Razor

 

Video 

 

 

Reference Materials

 

FullDetails.html

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

        alert(index + " : " + value +" : " + text);

    }

 

</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>

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

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

</p>

 

 

 

Add code to MenusController.cs

 public ActionResult FullDetails(int? id)

        {

            if (id == null)

            {

                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);

            }

            Menu menu = db.Menus.Find(id);

            if (menu == null)

            {

                return HttpNotFound();

            }

            return View(menu);

        }

 

 

 

 

 

Additional Information

 

 

COP 4834 Lectures Page

Comments (0)

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