The problem is that you are returning a PortfolioResponse object, but setting the value of its XmlPortfolioResponse property to be equal to the XmlDocument itself, rather than it's output. This makes the default C# output when you bind to the screen occur - which is to simply call PortfolioResponse.XmlPortfolioResponse.ToString() - which will, unless overloaded, return the name of the Object's class. Hense - you are getting System.Xml.XmlDocument output to your HTML.
What you need to do, first and foremost, is bind @Model.XmlPortfolioResponse.OuterXml to your view page, rather than @Model.XmlPortfolioResponse. You will also most likely have to wrap this value in a @Html.Raw() call in order to get it to actually render appropriately.
Your new binding in the View page might look something like this:
<div class='XmlTest'></div>
<div class='XmlPortfolioResponse'>
@Html.Raw(Model.XmlPortfolioResponse.OuterXml.ToString())
</div>
For your JQuery, then, to parse it, you would do something like:
var $title = $('.XmlPortfolioResponse').find('portfolioSummary').text();
$('.XmlTest').text($title);
However, you might consider a more elegant approach than binding raw XML into your page, then parsing it / reformatting it / re-displaying it - which leads to DOM bloat and a lot of extra work in processing. I would suggest one of 2 approaches:
1) Output XML and style the XML directly. CSS is more than capable of styling the XML you're outputting and making it appear as you wish - assuming you aren't making major changes to format. An example might look like:
<div class='XmlPortfolioResponse'>
<portfolioSummary>
<value>123456.78</value>
<assets>
<asset>
<ticker>XYZ</ticker>
<quantity>50</quantity>
<value>456.78</value>
</asset>
</assets>
</portfolioSummary>
</div>
If you have this kind of XML - low on attributes, but well normalized - you could write a stylesheet like:
portfolioSummary {
display: block;
border: 1px solid #eee;
background: #fff;
position: relative;
margin-top: 25px;
width: 100%;
height: 100%;
/* Whatever other styles you want for layout */
}
portfolioSummary value {
float: right;
font-weight: bold;
position: absolute;
top: 5px; right: 5px;
}
portfolioSummary asset {
display: block;
}
/* Etc. */
In other words - directly style the XML.
2) If, however, you have XML like the following:
<div class='XmlPortfolioResponse'>
<portfolioSummary value='123456.78'>
<asset value='456.78' ticker='XYZ'>
</asset>
</portfolioSummary>
</div>
In other words, heavy on attributes which don't lend themselves to styling... Consider loading the data via AJAX. Your JQuery would then change to something like:
$.ajax({
url: '/Portfolio/Load/12345',
type: 'POST',
async: true,
success: function (data) {
if (!data) // do validation
alert('failed!');
else {
var $xml = $(data);
var $title = $xml.find('portfolioSummary').text();
$('.XmlTest').text($title);
}
},
error: function (error) {
alert('failed!');
}
});
In order to use the $.ajax() method at the bottom, you need a controller method which is something like the following:
[HttpGet] // Original Method - allows GET
public ActionResult PortfolioList {
return View(GetPortfolios()); // Or however you load them...
}
[HttpPost] // Allows this method to be accessed via POST calls
[ActionName("PortfolioList")]
public JsonResult PortfolioList_Async {
return Json(GetPortfolios()); // You may need to resolve serialization here,
// but usually it works well out of the box.
}
