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

Generating a Javascript call from a Razor Object

Prerequisites

Part of Case Study – Menu Example 

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

Next Lecture – Menu Case Study Part 5 – Ajax Calls

Additional Information

COP 4834 Lectures Page