在Asp.net MVC視圖中，如何使用jQuery來解析剛剛從控制器返回的XML

Question

在我的MVC視圖（使用VS 2012 RC）中，我試圖解析剛從控制器返回的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

投資組合清單

System.Xml.XmlDocument

任何指導將是很大的一個ppreciated。下面是我的控制器代碼的一部分：

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本身，而不是它的輸出。這會使綁定到屏幕時的默認C＃輸出發生 - 只需簡單地調用PortfolioResponse.XmlPortfolioResponse.ToString() - 除非重載，否則將返回Object的類的名稱。 Hense - 你得到System.Xml.XmlDocument輸出到你的HTML。

您需要做的首要任務是將@Model.XmlPortfolioResponse.OuterXml綁定到您的查看頁面，而不是@Model.XmlPortfolioResponse。您也很可能必須將此值包含在@Html.Raw()調用中才能使其實際適當渲染。

您的新的視圖頁面綁定可能是這個樣子：

<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綁定到頁面更優雅的方法，然後對其進行解析/重新格式化/重新顯示它 - 這會導致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()方法在底部，你需要一個控制器方法，它是類似如下：

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

Answer 2

你需要你的XmlDocument轉換爲字符串你把它發送到客戶端之前。最簡單的方法是致電.OuterXml。

Answer 3

在控制器本身中，將xml數據轉換爲需要的對象，比如像portfolioummaries列表，然後使用viewdata或viewbag傳遞該對象來查看。

XmlNodeList elemList =xmlresponse.DocumentElement.GetElementsByTagName("portfoliosummary"); 
      List<string> lstportfoliosummarys= new List<string>(); 
      for (int i = 0; i < elemList.Count; i++) 
      { 
       if (elemList[i].ChildNodes[1].InnerText == "portfoliosummary") 
        lstEmails.Add(elemList[i].ChildNodes[2].InnerText); 
      } 
      ViewBag.contacts = new SelectList(lstportfoliosummarys); 

希望這會幫助你。