How do I append dynamically generated ul li to div

Question

0.00/5 (No votes)

See more:

Hi All,
I have this dynamically generated ul li from success data :

HTML

"<nav><ul id="menu"><li>@Html.ActionLink("Employee","Employee","GetEmployee")</li><li>@Html.ActionLink("Absenteeism","Absenteeism","GetAbsents")</li><li>@Html.ActionLink("Order","Order","GetOrders")</li><li>@Html.ActionLink("Report","Report","GenerateReport")</li><li>@Html.ActionLink("Evaluation","Evaluation","GenerateEvaluation")</li></ul></nav>"

this is perfectly fine if i use it hardcoded but when i try to generate this dynamic and append with div as:

$("#dynamicNavigationMenu").append(dynamicLink);

it wont work... Please can someone let me know why this is not working. I am using jquery version 1.10.2.js

Thanks in advance

What I have tried:

$("#dynamicNavigationMenu").append(dynamicLink);

Posted 24-May-16 4:15am

BishnuKarki

Updated 24-May-16 5:51am

Add a Solution

Comments

Sergey Alexandrovich Kryukov 24-May-16 10:19am

It's hard to see what you get, because it's not shown what is $("#dynamicNavigationMenu"), what is "dynamicLink".
Aren't you appending li to div's children, instead of appending it to ul children? Or something like that...
—SA

ZurdoDev 24-May-16 10:23am

It won't work because @Html.ActionLink is not valid html. It is a tag that gets executed by the server so it means nothing to the browser itself.

Karthik_Mahalingam 24-May-16 10:29am

i hardcoded the data which you have provided, it is working fine..
I assume you are facing some other issue.. might be jquery is not loaded properly.

ZurdoDev 24-May-16 10:36am

OP said, "this is perfectly fine if i use it hardcoded "

Karthik_Mahalingam 24-May-16 10:39am

oh sorry Ryan, just noticed now.

3 solutions

Solution 3

Rather than constructing html on the server to send to the client you should only send data to the view and let the view decide how that data is shown. That way you keep your concerns separate and your code is more flexible.

Have a Model

C#

namespace Models
{
    public class MenuModel
    {
        public string Name { get; set; }
        public string Url { get; set; }
    }
}

Your controller

C#

[HttpPost]
public ActionResult GetData()
{
    List<MenuModel> menus = new List<MenuModel>();

    menus.Add(new MenuModel { Name = "Employee", Url = Url.Action("GetEmployee", "Employee") });
    menus.Add(new MenuModel { Name = "Order", Url = Url.Action("GetOrders", "Order") });

    return Json(menus);
}

Your View

Razor

@model List<Models.MenuModel>

<div id="menuTarget"></div>

<input type="button" id="buttonGetData" value="Get Data"/>

<script type="text/javascript">
    $(document).ready(function () {
        $("#buttonGetData").click(function (e) {
            e.preventDefault();

            $.ajax({
                url: '@Url.Action("GetData", "Home")',
                data: { },
                type: "POST",
                success: function (data) {
                    var nav = $("<nav></nav>");
                    var ul = $("<ul></ul>").attr("id", "menu");
                    nav.append(ul);
                    $.each(data, function (index, el) {
                        var li = $("<li></li>").append($("<a></a>").attr("href", el.Url).html(el.Name));
                        ul.append(li);
                    });

                    $("#menuTarget").append(nav);
                }
            });
        });
    });
</script>

Posted 24-May-16 5:51am

F-ES Sitecore

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Karthik_Mahalingam · Accepted Answer · 2016-05-24T05:07:00

You should try something like this in the controller

C#

public JsonResult GetdynamicMenu()
         { 

             string dynamicMenu = "<nav><ul id=\"menu\">";
             dynamicMenu += "<li>" +  GetActionLink("Employee","GetEmployee","Employee") + "</li>";
             dynamicMenu += "<li>" +  GetActionLink("Absenteeism","GetAbsents","Absenteeism") + "</li>";
             dynamicMenu += "<li>" + GetActionLink("Order", "GetOrders", "Order") + "</li>";
             dynamicMenu += "<li>" + GetActionLink("Order", "GetOrders", "Order") + "</li>";
             dynamicMenu += "<li>" + GetActionLink("Report", "GenerateReport", "Report") + "</li>";
             dynamicMenu += "<li>" + GetActionLink("Evaluation", "GenerateEvaluation", "Evaluation") + "</li>";
             dynamicMenu += "</ul></nav>"; 

             return Json(dynamicMenu, JsonRequestBehavior.AllowGet);
         }

         private string GetActionLink(string controller, string action, string name)
         {
             string link = Url.Action("GetEmployee", "Employee");
             string actionLink = "<a href='" + link + "'>" + name + "</a>";
             return actionLink;
         }

Since you are hardcoding the ActionLink helper ( @Html.ActionLink("Employee","Employee","GetEmployee") ), during the runtime when building the View, it will will execute the ActionLink Method and generates the anchor link dynamically. so you could able to view the links.
but if you are getting the values as a string in Ajax call, these Links will be considered as raw text only. because MVC wont compile those ActionLink in ajax calls in the View,
So you can use the above code to generate the anchor links from controller itself.

ZurdoDev · Accepted Answer · 2016-05-24T04:42:00

As mentioned in the comments, @Html.ActionLink is not valid html so when you add it via JavaScript it does not get executed. @Html.ActionLink is a server-side piece of code that the server executes and generates html. You'll need to do this a different way, perhaps calling a webservice to get the data from the server or perhaps some other way.

How do I append dynamically generated ul li to div

3 solutions

Solution 2

Solution 1

Solution 3

Add your solution here

Preview 0