jquery - 在 Asp.net MVC View 中，如何使用 jQuery 解析刚刚从 Controller 返回的 XML

Question

在我的 MVC View (使用 VS 2012 RC)中，我尝试解析从 Controller 新返回的 XML。这是我的查看代码:

@model RzMvc.Models.PortfolioResponse
@{
    ViewBag.Title = "PortfolioList";
}              

<script type="text/javascript">

    $(displayXmlResponse);

    function displayXmlResponse(){
        var resp = $("#xmlResp");
        $("#xmlTest").append(resp.children());

        var xml = $("xmlResp").text;      
            xmlDoc = $.parseXML(xml),
            $xml = $(xmlDoc),
            $title = $xml.find("portfolioSummary");            

        $("#xmlTest").append($title.text());      
    }    

</script>

<h2>PortfolioList</h2>

<div>
    <p id="xmlTest"></p>
    <p id="xmlResp" >@Model.XmlPortfolioResponse</p>    
</div>

浏览器输出如下所示:

PortfolioList

Portfolio Listing

System.Xml.XmlDocument

任何指导将不胜感激。这是我的 Controller 代码的一部分:

    public ActionResult PortfolioList()
{
    XmlDocument xmlResponse = new XmlDocument();
    xmlResponse.LoadXml(portfoliosResponse);
    var portf = new PortfolioResponse { XmlPortfolioResponse = xmlResponse };


    return View(portf);
}

模型代码是:

namespace RzMvc.Models
{

    public class PortfolioResponse
    {
        public XmlDocument XmlPortfolioResponse { get; set; }
    }
}

Answer 1

问题是您返回一个 PortfolioResponse 对象，但将其 XmlPortfolioResponse 属性的值设置为等于 XmlDocument 本身，而不是它的输出。这使得绑定(bind)到屏幕时发生默认的 C# 输出 - 即简单地调用 PortfolioResponse.XmlPortfolioResponse.ToString() - 除非重载，否则它将返回 Object< 的名称 的类。 Hense - 您正在将 System.Xml.XmlDocument 输出到 HTML。

首先，您需要做的是将 @Model.XmlPortfolioResponse.OuterXml 绑定(bind)到您的 View 页面，而不是 @Model.XmlPortfolioResponse。您很可能还必须将此值包装在 @Html.Raw() 调用中，以便使其实际正确呈现。

“ View ”页面中的新绑定(bind)可能如下所示:

<div class='XmlTest'></div>
<div class='XmlPortfolioResponse'>
 @Html.Raw(Model.XmlPortfolioResponse.OuterXml.ToString())
</div>

对于您的 JQuery，要解析它，您需要执行以下操作:

var $title = $('.XmlPortfolioResponse').find('portfolioSummary').text();
$('.XmlTest').text($title);

但是，您可能会考虑一种更优雅的方法，而不是将原始 XML 绑定(bind)到页面中，然后解析它/重新格式化它/重新显示它 - 这会导致 DOM 膨胀和处理过程中的大量额外工作。我建议采用两种方法之一:

1) 输出 XML 并直接设置 XML 的样式。 CSS 不仅能够对您输出的 XML 进行样式设置，并使其按照您的意愿显示 - 假设您没有对格式进行重大更改。一个示例可能如下所示:

<div class='XmlPortfolioResponse'>
  <portfolioSummary>
    <value>123456.78</value>
    <assets>
      <asset>
        <ticker>XYZ</ticker>
        <quantity>50</quantity>
        <value>456.78</value>
      </asset>
    </assets>
  </portfolioSummary>
</div>

如果您有这种类型的 XML - 属性较少，但标准化良好 - 您可以编写如下样式表:

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. */

换句话说 - 直接设置 XML 的样式。

2) 但是，如果您有如下所示的 XML:

<div class='XmlPortfolioResponse'>
  <portfolioSummary value='123456.78'>
   <asset value='456.78' ticker='XYZ'>
   </asset>
  </portfolioSummary>
</div>

换句话说，过多的属性不适合样式化...考虑通过 AJAX 加载数据。然后你的 JQuery 将更改为如下内容:

$.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!');
    }
});

为了使用底部的 $.ajax() 方法，您需要一个如下所示的 Controller 方法:

[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.
}