jquery模板不呈現單個項目

Question

我想嘗試jQuery模板插件。

我定義爲這樣一個模板：

<script id="referentTemplate" type="text/x-jquery-tmpl"> 
<form id="referent-form" method="post" action="#"> 
<div class="fields"> 
    <input type="hidden" name="referentID" value="${ReferentID}" /> 
    <table> 
     <tr><td><label for="firstName">First Name</label><br /> 
       <input type="text" name="firstName" value="${FirstName}" /></td> 
      <td><label for="lastName">Last Name</label><br /> 
       <input type="text" name="lastName" value="${LastName}" /></td></tr> 
     <tr><td><label for="fullName">Full Name</label><br /> 
       <input disabled="disabled" type="text" name="fullName" value="${FirstName} ${LastName}" /></td></tr> 
     <tr><td><label for="phoneNumber">Telephone</label><br /> 
       <input type="text" name="phoneNumber" value="${PhoneNumber}" /></td> 
      <td><label for="email">EMail</label><br /> 
       <input type="text" name="email" value="${Email}" /></td></tr> 
    </table> 
</div> 
<div id="validation-message"></div> 
<div style="text-align:right; padding: 8px 0px 0px 0px;"> 
    <input type="submit" id="btnSave" class="button" value="Save" /> 
    <input type="button" id="btnCancel" class="button" value="Cancel" /> 
</div> 
</form> 
</script> 

我想dinamically使用下面的代碼加載這個模板

$("#new-referent").click(function() { 
    $.ajax({ 
     type: "get", 
     url: baseUrl + 'MyService.asmx/New', 
     data: JSON.stringify({}), 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (msg) { 
      // Get the referent item from the webservice 
      var referent = msg.d; 
      // Render the template with the Referent data 
      var referentTemplate = $("#referentTemplate").tmpl(referent); 
      //Show the Dialog 
      $("#referent-dialog").empty().html(referentTemplate).dialog('open'); 
     } 
    }); 
}); 

一切正常，除了一個事實，即形式很不錯輸入不包含從服務器返回的數據。我檢查了與提琴手回來的數據，它包含正確的值這樣的

{"d":"{\"ReferentID\":-1,\"LastName\":\"Abbot\",\"FirstName\":\"John\",\"FullName\":null,\"PhoneNumber\":null,\"Email\":null}"} 

我在哪裏做錯了？

感謝您的幫助！

Answer 1

很明顯，您的網站會返回一個只包含一個密鑰d的JSON對象，其中包含一個JSON字符串。

所以你需要使用var referent = JSON.parse(msg.d);或（這會更好）返回適當的JSON。

Answer 2

您可以將[ScriptService]屬性放在您的類上，然後直接從您的WebMethod返回對象，而不是嘗試自己執行序列化。

一些參考： http://msdn.microsoft.com/en-us/library/system.web.script.services.scriptserviceattribute.aspx

http://www.joe-stevens.com/2010/01/04/using-jquery-to-make-ajax-calls-to-an-asmx-web-service-using-asp-net/

Answer 3

的[的WebMethod]應正確返回你的JSON。你可能想試試這個：

 $("#new-referent").click(function() { 
      $.ajax({ type: "POST", 
       url: baseUrl + 'MyService.asmx/New', 
       data: JSON.stringify({}), 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       beforeSend: function (xhr) { xhr.setRequestHeader("Content-type", "application/json; charset=utf-8"); }, 
       success: function (msg) { 
        $('#referent-dialog').html(''); 
        $('#referentTemplate').tmpl(msg.d).appendTo('#referent-dialog'); 
        $('#referent-dialog').dialog('open'); 
       } 
      }); 
     });