Question

我之前曾问过这个问题here，该问题在html文件中有效。现在我试图将相同的内容放在ASP.NET webform中，但似乎不起作用。

这是第一次页面加载ajax调用时发生的事情，除非光标移出文本框时不需要，否则

On 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" },

Answer 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>

Knockout observables没有绑定和applyBindings触发两次

1 个答案: