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

Posted one month ago

Hi mahesh213,

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

Here i am passing DataTable as model to the view.

Controller

public class HomeController : Controller
{
    // GET: /Home/
    public ActionResult Index()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("Id");
        dt.Columns.Add("ControllerName");
        dt.Columns.Add("Url");
        dt.Rows.Add(1, "Report", "/report/Index/");
        dt.Rows.Add(2, "Report1", "/report1/Index1/");

        return View(dt);
    }
}

View

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<System.Data.DataTable>" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Index</title>
</head>
<body>
    <h4>An Unordered List:</h4>
    <ul>
        <%foreach (System.Data.DataRow dr in Model.Rows) {%>
            <li>
                <a href='<%=dr["Url"] %>'><%=dr["ControllerName"]%></a>
            </li>
        <%} %>
    </ul>
</body>
</html>

Screenshot


Posted one month ago

Thanks for your's reply

Could you please provide me solution without using razor view engine(@)

I need code only using jquery/javascript and MVC

 


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