Question

在我的MVC 5应用程序中，我需要能够动态构建一个完全限定的外部URL超链接列表，单独使用一些额外的数据，这些数据将来自传入的模型。我想 - 我将需要构建我的锚点标记这样的东西：

<a href="{{fullUrlName}}" class="list-group-item" target="_blank">{{linkDisplayName}}</a>

使用AngularJS这很自然，但是，我不知道在MVC中如何做到这一点。

是否有可用于此的模板库？

Answer 1

1）创建一个模型来保持链接

public class LinkObject
{
    public string Link { get; set; }
    public string Description { get; set; }
}

2）在您的Action中，您可以使用ViewBag，ViewData，或者甚至通过您Model内的列表。我将向您展示如何使用ViewBag

public ActionResult MyDynamicView()
{
    //Other stuff and code here

    ViewBag.LinkList = new List<LinkObject>()
    {
        new LinkObject{ Link ="http://mylink1.com", Description = "Link 1"},
        new LinkObject{ Link ="http://mylink2.com", Description = "Link 2"},
        new LinkObject{ Link ="http://mylink3.com", Description = "Link 3"}
    };

    return View(/*pass the model if you have one*/);
}

3）在视图中，只需使用循环：

@foreach (var item in (List<LinkObject>)ViewBag.LinkList)
{
    <a href="@item.Link" class="list-group-item" target="_blank">@item.Description</a> 
}

Answer 2

只需为此创建一个手动，无需从模板中执行此操作。例如，在javascript中

function groupAnchor(url,display){
 var a = document.createElement("a");
 a.href = url;
 a.className = "list-group-item";
 a.target = "_blank";
 a.innerHTML = display;
 return a;
}

然后使用该函数修改你的html结构

<div id="anchors"></div>
<script>
 document.getElementById("anchors").appendChild(groupAnchor("http://google.com","Google"));
</script>

您的修改方法很可能比这更先进，但它证明了这一概念。如果你需要这些值来自服务器端，那么你总是可以使用@foreach()迭代一个集合并在那里发出整个html或脚本调用 - 或，从中传递集合服务器在json中，然后在设置用于管理锚列表的函数中使用它。

为了扩展这一点，重要的是避免从剃刀迭代中向视图发送html。原因是由razor构造的html会增加页面加载的大小，如果在列表中完成，则可能会显着增加。

在您的操作中，构建链接列表，然后对其进行序列化，以便将它们传递给视图

public ActionResult ViewWithLinks()
{
 var vm = new ViewModel();
 vm.Links = Json(LinkSource.ToList()).Data;
 //or for a very simple test for proof of concept
 var Numbers = Json(Enumerable.Range(0,100).ToList()).Data;
 ViewData["numbers"] = Numbers ;
 return View(vm);
}

您需要的只是一个在视图模型中保存链接的对象

public class ViewModel
{
 public ICollection<Link> Links { get; set; }
}

public class Link
{
 public string text { get; set; }
 public string href { get; set; }
}

然后在你的视图中你可以使用这个json对象

 var allLinks = @Html.Raw(Json.Encode(Model.Links));
 var numbersList = @Html.Raw(Json.Encode(ViewData["linkTest"]));//simple example

现在您可以返回上面的函数，以便通过使用链接对象数组将其放在页面上。

var $holder = $("<div>");
for(var i = 0; i < allLinks.length; i++){
 $holder.append(groupAnchor(allLinks[i].href,allLinks[i].text));
}
$("#linkArea").append($holder);

好处是可以为您的页面缓存所有这些javascript。它加载一次，能够处理大量链接，而不必担心向客户端发送过多的HTML。

什么模板库可以与Asp .NET MVC一起使用？

2 个答案: