Front-End Code:
<script src= "~/js/jquery-3.3.1.min.js" ></script>
<script src= "~/js/vue.js" ></script>
<body>
<div>
<div id= "Vue_det" >
<ul v-for= "mess in Message" >
<li>{{mess. Code}}</li>
<li>{{mess. Enname}}</li>
<li>{{mess. Name}}</li>
<li>{{mess. Level}}</li>
</ul>
</div>
</div>
<script type= "Text/javascript" >
var vm = new Vue ({
el: ' #vue_det ',
data: {
message: []
}
})
$ (function () {
$.ajax ({
type: "POST",
URL: "/home/xml",
data: "",
Success:function (AAA) {
Console.log (AAA);
vm.message = AAA;
}
})
})
</script>
</body>
Controller code:
private static list<domain> domains;
Public static list<domain> Domains
{
Get
{
if (domains = = NULL | | domains. Count <= 0)
{
domains = new list<domain> ();
XmlDocument doc = new XmlDocument ();
Doc. Load (httpruntime.bindirectory + "/resourse/domains.xml");
foreach (XmlNode node in Doc. Documentelement.childnodes)
{
domain L = new domain ();
L.code = convert.toint64 (node. attributes["Code"]. Value);
l.name = node. attributes["Name"]. Value;
l.enname = node. attributes["Enname"]. Value;
l.level = Convert.ToInt32 (node. Attributes["Level"]. Value);
L.demo = node. The text in the innertext;//child node
domains. ADD (l);
}
}
return domains;
}
}
Public jsonresult XML ()
{
return Json (Domains);
}
Simple Ajax request that returns the contents of the JSON//xml file
MVC pattern Simple XML document parsing plus vue rendering