1

我之前在这里问过这个在 html 文件中工作的问题。现在我试图在 ASP.NET 网络表单中添加相同的内容，但似乎不起作用。

页面第一次加载 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 回答