1

私は以前、htmlファイルで機能するこの質問をここで尋ねました。今、ASP.NET Webフォームに同じものを入れようとしていますが、うまくいかないようです。

ページが最初にロードされたときに何が起こるか ajax 呼び出しが発生しますが、これはカーソルがテキストボックスから離れた場合を除いて望ましくありません

Blur には、ajax 呼び出しから返されたデータを表示するポップアップ ウィンドウがあります。データもバインドしません。ここで何が間違っていますか。

私のJavascript：

<script type="text/javascript">
 var self = this;
 function showPopUp() {
   var cvr = document.getElementById("cover")
   var dlg = document.getElementById("dialog")
   var SName = document.getElementById("<%=txtSurname.ClientID%>").value
   document.getElementById("txtSurnameSearch").value = SName

   cvr.style.display = "block"
   dlg.style.display = "block"
   if (document.body.style.overflow = "hidden") {
   cvr.style.width = "1024"
   cvr.style.height = "100;"
   }
  this.SurnameViewModel(SName)  //<= here I pass the surname to the ViewModel

 }

 function closePopUp(el) {
   var cvr = document.getElementById("cover")
   var dlg = document.getElementById(el)
   cvr.style.display = "none"
   dlg.style.display = "none"
   document.body.style.overflowY = "scroll"
 }


function SurnameViewModel(Surname) {
  var self = this;
  self.Surnames = ko.observableArray();
  $.ajax({
    crossDomain: true,
    type: 'POST',
    url: "http://localhost/GetSurnames/Name/ChurchID",
    dataType: 'json',
    data: { "Name":Surname, "ChurchID": "17" },
    processdata: true,
    success: function (result) {
        alert(result.data);
        ko.mapping.fromJSON(result.data, {}, self.Surnames);

    },
    error: function (xhr, ajaxOptions, thrownError) {
        alert("Failure!");
        alert(xhr.status);
        alert(thrownError);
    }
  });
}

  $(document).ready(function () {
    ko.applyBindings(new SurnameViewModel());
 });
</script>

私のHTML

<!-- Grey Background -->
<div id="cover"></div>
<!-- Surname Popup -->
<div id="dialog" style="display:none">
My Dialog Content
<br /><input ID="txtSurnameSearch" type="text" />
<br /><input type="button" value="Submit" />
<br /><a href="#" onclick="closePopUp('dialog');">[Close]</a>

    <pre data-bind="text: ko.toJSON($data, null, 2)"></pre>  //<= just shows the header

    <table>
    <thead>
    <tr>
        <th>ID</th>
        <th>Family Name</th>
        <th></th>
    </tr>
    </thead>

    <tbody data-bind="foreach: Surnames">
    <tr>
       <td data-bind="value: id"></td>
       <td data-bind="value: homename"></td>
    </tr>    
    </tbody>
    </table>
</div>

onBlur が呼び出される TextBox:

<asp:TextBox ID="txtSurname" MaxLength="50" runat="server" Width="127px" class="txtboxes" placeholder="Last Name" onblur="showPopUp();" />

ajax 呼び出しによって返される JSON データ

{"data":"[{\"id\":3,\"homename\":\"D\\u0027Costa\"}]"}

編集1：

ajax呼び出しで値をハードコーディングすると、バインドされているように見えますが、ページの読み込み時に起動します

data: { "Name":"d", "ChurchID": "17" },
4

1 に答える 1

1

ビューモデルでは、Ajax呼び出しはメソッド内ではなくインラインであるため、構築されたAJAXのインスタンスとして起動されます。このコードを参照してください。モデルのインスタンスを保持するグローバル変数を作成し、AJAX 呼び出しを JS の on 関数 (メソッド) にラップします。次に、ポップアップ コードで必要なときに、インスタンスでメソッドを呼び出すだけです。

var self = this;
var model = new SurnameViewModel();

 function showPopUp() {
   var cvr = document.getElementById("cover")
   var dlg = document.getElementById("dialog")
   var SName = document.getElementById("<%=txtSurname.ClientID%>").value
   document.getElementById("txtSurnameSearch").value = SName

   cvr.style.display = "block"
   dlg.style.display = "block"
   if (document.body.style.overflow = "hidden") {
   cvr.style.width = "1024"
   cvr.style.height = "100;"
   }
  model.GetSurname(SName)  //<= here I pass the surname to the ViewModel

 }

 function closePopUp(el) {
   var cvr = document.getElementById("cover")
   var dlg = document.getElementById(el)
   cvr.style.display = "none"
   dlg.style.display = "none"
   document.body.style.overflowY = "scroll"
 }


function SurnameViewModel() {
  var self = this;
  self.Surnames = ko.observableArray();
  self.GetSurname = function(Surname){

      $.ajax({
        crossDomain: true,
        type: 'POST',
        url: "http://localhost/GetSurnames/Name/ChurchID",
        dataType: 'json',
        data: { "Name":Surname, "ChurchID": "17" },
        processdata: true,
        success: function (result) {
            alert(result.data);
            ko.mapping.fromJSON(result.data, {}, self.Surnames);

        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert("Failure!");
            alert(xhr.status);
            alert(thrownError);
        }
      });
  }
}

  $(document).ready(function () {
    ko.applyBindings(model);
 });
</script>
于 2013-08-08T16:59:27.627 に答える