我有一个函数可以进行 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;
}
}
}
}