初期データを取得してビューモデルに保存するために ajax 呼び出しを行う関数があります。次に、返されたビューモデル (データの文字列化) を別の関数に渡し、別の ajax 呼び出しなどを行います。各関数は onclick ボタン イベントにバインドされています。document.ready に配置したときにのみ、初期ビュー モデルを他の関数に渡すことができました。各関数から取得したデータは 100% 正しいです。ただし、ビューモデルをバインドするたびに、以前のバインディングがオーバーライドされ、値が保持されません。以下はコードです：
JavaScript
<
script type="text/javascript" language='javascript'>
var MyProject = {};
var viewModel;
MyProject.viewModel = "";
var invoiceModel;
$(document).ready(function InitializeInvoice() {
$.ajax({
type: "Post",
url: "Default.aspx/InitializeModel",
data: {},
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: initializesinvoice
});
function initializesinvoice(msg) {
var defaultdata = msg.d.Data;
invoiceModel = defaultdata;
MyProject.viewModel = ko.mapping.fromJS(invoiceModel);
ko.applyBindings(MyProject.viewModel)
};
})
function GetVendorInvoiceDefaults() {
MyProject.viewModel = JSON.stringify(invoiceModel);
var data = '{invoice:' + MyProject.viewModel + '}';
$.ajax({
type: "Post",
url: "Default.aspx/GetVendorInvoiceDefaults",
data: data,
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: GetVendorInvoiceDefaultsSuccess
});
}
function GetVendorInvoiceDefaultsSuccess(msg) {
var defaultdata = msg.d.Data;
invoiceModel = defaultdata;
MyProject.viewModel = ko.mapping.fromJS(invoiceModel);
ko.applyBindings(MyProject.viewModel)
};
function GetVendorCode() {
var vendormodel = JSON.stringify(invoiceModel);
var data = '{invoice:' + vendormodel + '}';
$.ajax({
type: "Post",
url: "Default.aspx/GetVendorCode",
data: '{invoice:' + vendormodel + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: GetVendorCodeSucess
});
}
function GetVendorCodeSucess(msg) {
var defaultdata = msg.d.Data;
MyProject.viewModel = ko.mapping.fromJS(defaultdata);
ko.applyBindings(MyProject.viewModel)
};
#HTML#
<p> Invoice Description <asp:TextBox ID="txtdesc" runat="server" data-bind="value:InvoiceDescription"> </asp:TextBox></p>
<p> Distribution Code <asp:TextBox ID="txtdistcode" runat="server" data-bind="value:DistributionCode"></asp:TextBox></p>
<p> Vendor Code <asp:TextBox ID="txtvendor" runat="server" data-bind="value:VendorCode" ></asp:TextBox></p>
<p> <button onclick="InitializeInvoice()">InitializeInvoice</button></p>
<p><button id="btndefaults" onclick="GetVendorInvoiceDefaults()">GetVendorInvoiceDefaults</button></p>
<p><button id="btnvendor" onclick="GetVendorCode()">GetVendorCode</button><p>
</pre>
#ASPX file#
namespace WebApplication9
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected override void OnLoad(EventArgs e)
{
if (IsPostBack)
{
clientSideIsPostBack.Value = "Y";
}
else
clientSideIsPostBack.Value = "N";
base.OnLoad(e);
}
[WebMethod]
public static JsonResult InitializeModel()
{
var Invoice = new Invoice() { InvoiceNumber = "1235", InvoiceDescription = "Hello World", DistributionCode = "" };
JsonResult r = new JsonResult();
r.Data = Invoice;
return r; //serializer.Deserialize(Invoice, typeof(Invoice)) as JsonResult;
}
[WebMethod]
public static JsonResult GetVendorInvoiceDefaults(Invoice invoice)
{
JavaScriptSerializer serializer = new JavaScriptSerializer();
invoice.DistributionCode = "HELLO WORLD";
JsonResult r = new JsonResult();
r.Data = invoice;
return r;
//return new JsonResult() { Data = invoice };
}
[WebMethod]
public static JsonResult GetVendorCode(Invoice invoice)
{
JavaScriptSerializer serializer = new JavaScriptSerializer();
invoice.VendorCode = "AHM";
JsonResult r = new JsonResult();
r.Data = invoice;
return r;
}
}
public class Invoice
{
private string distributionCode;
private string vendorcode;
public string InvoiceNumber { get; set; }
public string InvoiceDescription { get; set; }
public string DistributionCode
{
get
{
return distributionCode ?? string.Empty;
}
set
{
distributionCode = value;
}
}
public string VendorCode
{
get
{
return vendorcode ?? string.Empty;
}
set
{
vendorcode = value;
}
}
}
}