Jquery template does not render a single item
I am trying to experiment with the jquery template plugin.
I have a single template defined as this:
<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">开发者_JS百科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>
I would like to load this template dinamically using the following code
$("#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');
}
});
});
Everything works very nice except for the fact that the form inputs does not contains the data that is returned from the server. I have checked the data coming back with fiddler and it contains right values like this
{"d":"{\"ReferentID\":-1,\"LastName\":\"Abbot\",\"FirstName\":\"John\",\"FullName\":null,\"PhoneNumber\":null,\"Email\":null}"}
Where I am doing wrong?
Thanks for helping!
Apparently your website returns a JSON object containing only one key d
which contains a JSON string.
So you need to use var referent = JSON.parse(msg.d);
or (which would be better) return proper JSON.
You can place the [ScriptService]
attribute on your class and then just return your object directly from your WebMethod rather than trying to do the serialization yourself.
Some reference: 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/
The [WebMethod] should be returning your JSON correctly. You might want to try this:
$("#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');
}
});
});
精彩评论