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>

我想使用以下代码

以动态方式加载此模板

$("#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');
        }
    });
});

除了表单输入不包含从服务器返回的数据之外，一切都很好用。我已经检查了fiddler返回的数据，它包含正确的值，如此

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

我做错了什么？

感谢您的帮助！

Answer 1

显然，您的网站返回的JSON对象只包含一个包含JSON字符串的密钥d。

所以你需要使用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');
                }
            });
        });

Jquery模板不呈现单个项目

3 个答案: