ユーザーがページにいる間、ビューモデルをどこに保持するかを理解するのに苦労しています。AJAXリクエストを作成し、ユーザーコントロール内のコントロールにビンジングを適用するユーザーコントロールがいくつかあります。マッピング プラグインを使用してビューモデルにデータを入力しています。ページに 4 ～ 5 個のユーザー コントロールがあります。変更を検出してサーバーに送り返すことができるように、ビューモデルをメモリに保持するのに苦労しています。今のところ、それらをwindow.Model1プロパティに保存していますが、これは良い考えではありません。
変更を検出できるようにビューモデルをメモリに保持する最良の方法を教えてください。それとも、私が完全に間違っているのでしょうか。この種のシナリオを処理するためのより良い方法があります。
これがすべてのコードです。
ユーザーコントロール:
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ucCustomer.ascx.cs" Inherits="WebApplication2.UserControl.ucCustomer" %>
<input data-bind="value: FirstName" /><br />
<span>FirstName: </span><span data-bind="text: FirstName"></span><br />
<input data-bind="value: FirstName" /><br />
<span>FirstName: </span><span data-bind="text: LastName"></span><br />
<script type="text/javascript">
$.ajax({
type: "POST",
url: "ws/GetData.asmx/GetCustomer",
cache: false,
contentType: "application/json; charset=utf-8",
data: "{}",
dataType: "json",
success: handleHtml,
error: ajaxFailed
});
function handleHtml(data, status) {
var myViewModel = ko.mapping.fromJS(data.d);
window.myViewModel = myViewModel;
ko.applyBindings(myViewModel);
}
function ajaxFailed(xmlRequest) {
alert(xmlRequest.status + ' \n\r ' +
xmlRequest.statusText + '\n\r' +
xmlRequest.responseText);
}
</script>
Aspx ページ:
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="WebApplication2._Default" %>
<%@ Register Src="UserControl/ucCustomer.ascx" TagName="ucCustomer" TagPrefix="uc1" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/knockout.debug.js" type="text/javascript"></script>
<script src="Scripts/knockout.mapping-latest.js" type="text/javascript"></script>
<script type="text/javascript">
function SendDataBackToServer() {
var arrayList = new ArrayList();
arraylist[0] = window.myViewModel;
arraylist[1] = window.myViewModel1;
arraylist[2] = window.myViewModel2;
//Make an AJAX call here and send arrayList back to server
return false;
}
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div id="dvCust">
<uc1:ucCustomer ID="ucCustomer1" runat="server" />
</div>
<div>
<button title="Send Data Back" onclick="JavaScript: return SendDataBackToServer();">
Send Data Back To Server</button>
</div>
</asp:Content>
ウェブサービス：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using WebApplication2.DataModel;
namespace WebApplication2.WS
{
/// <summary>
/// Summary description for GetData
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class GetData : System.Web.Services.WebService
{
[WebMethod]
public Customer GetCustomer()
{
return new Customer
{
FirstName = "FName",
LastName = "LName"
};
}
}
}
顧客モデル:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace WebApplication2.DataModel
{
public class Customer
{
public string FirstName { get; set; }
public string LastName { get; set; }
}
}