Total Pageviews

Tuesday, 18 June 2013

Creating html dropdown menu with labels

        function to create menue in controller:

        ViewBag.Menu = CreateMenu();
        public string CreateMenu()
        {
            List<string> Heading = new List<string>();
            Heading.Add("Heading1");
            Heading.Add("Heading2");
            Heading.Add("Heading3");

            string sourceList = "";
            if (Heading != null)
            {
                foreach (string h in Heading)
                {
                    sourceList = sourceList + " <optgroup label= ' " + h + " ' id= '" + h + "'>";
                    if (h == "Heading1")
                    {
                        sourceList = sourceList + "<option value='label11'>" + "label11" + "</option>";
                        sourceList = sourceList + "<option value='label12'>" + "label12" + "</option>";
                        sourceList = sourceList + "<option value='label13'>" + "label13" + "</option>";
                        sourceList = sourceList + "</optgroup>";
                    }
                    else if (h == "Heading2")
                    {
                        sourceList = sourceList + "<option value='label21'>" + "label21" + "</option>";
                        sourceList = sourceList + "<option value='label22'>" + "label22" + "</option>";
                        sourceList = sourceList + "<option value='label23'>" + "label23" + "</option>";
                        sourceList = sourceList + "</optgroup>";
                    }
                    if (h == "Heading3")
                    {
                        sourceList = sourceList + "<option value='label31'>" + "label31" + "</option>";
                        sourceList = sourceList + "<option value='label32'>" + "label32" + "</option>";
                        sourceList = sourceList + "<option value='label33'>" + "label33" + "</option>";
                        sourceList = sourceList + "</optgroup>";
                    }
                }
            }

            return sourceList;
        }

        Code to be write in View page :
<script type="text/javascript">
    $(document).ready(function () {
        if ("@Html.Raw(ViewBag.Menu)" != "") {
            $('#Menu').empty();
            var select = $('#Menu');
            /* select.append('<option value="0" > Select State </option>');*/
            select.append("@Html.Raw(ViewBag.Menu)");
        }
    });
</script>
add this row to dispaly the dropdown menu
<tr>
    <td>
        <label>
            Menu Name
        </label>
    </td>
    <td>
        <select id="Menu" name="Menu">
            <option value="0">--- Select ---</option>
        </select>
    </td>
</tr>

No comments:

Post a Comment