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