Bind Hyperlink (Anchor Tag) from database in ASP.Net MVC

Last Reply one month ago By dharmendr

Posted one month ago

Hi,

I have one table with relevant fields

Id    ControllerName      Url  

1     Report                    /report/Index/

2      Report1                 /report1/Index1/

Currently my requirement is that

i need to fecth values from database and replace li elements(URl and controllername)

My expecyted o/p after fecthing values from data 

<h4>An Unordered List:</h4>
<ul>
    <li><a href="/report/Index/">Report</a></li>
    <li><a href="/report1/Index/">Report1</a></li>
</ul>

This was the my code

<!DOCTYPE html>
<html>
<body>
    <h4>An Unordered List:</h4>
    <ul>
        <li><a href="/report/Index/">Report</a></li>
        <li><a href="/report1/Index/">Report1</a></li>
    </ul>
</body>
</html>

 

        public JsonResult getAll()
        {
            db.Configuration.ProxyCreationEnabled = false;
            using (ReportEntities dataContext = new ReportEntities())
            {
                var employeeList = (from E in dataContext.MenuSelections                                    
                                    orderby E.Id
                                    select new
                                    {
                                        E.Id,
                                        E.ControllerName,
                                        E.Url
                                    }).ToList();
                var JsonResult = Json(employeeList, JsonRequestBehavior.AllowGet);
                JsonResult.MaxJsonLength = int.MaxValue;
                return JsonResult;
            }
        }        

I need o/p using javascript and MVC

Could you please help me

You are viewing reply posted by: dharmendr one month ago.
Posted one month ago

Hi mahesh213,

Check this example. Now please take its reference and correct your code.

Controller

public class HomeController : Controller
{
    // GET: /Home/
    public JsonResult Index()
    {
        List<SelectListItem> lists = new List<SelectListItem>();
        lists.Add(new SelectListItem { Text = "Report", Value = "/report/Index/" });
        lists.Add(new SelectListItem { Text = "Report1", Value = "/report1/Index1/" });
        return Json(lists, JsonRequestBehavior.AllowGet);
    }
}

View

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $.ajax({
            type: "POST",
            url: "/Home/Index",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                var ul = $('#unordered');
                $.each(r, function (i, item) {
                    ul.append("<li><a href='" + item.Value + "'>" + item.Text + "</a></li>");
                });
            }
        });
    });
</script>
<h4>An Unordered List:</h4>
<ul id="unordered"></ul>

Screenshot