Question

当我遇到这个问题时，我正在玩WebMethods。

我想使用WebMethod和javascript创建一个简单的计算器，但它只有在DDL的选项具有＆＃34;选择＆＃34;浏览器中源代码中的属性。如果我删除UpdatePanel这可以正常工作;页面刷新，html源代码将显示＆＃34;选择＆＃34;我在DDL中选择的任何属性。使用UpdatePanel，仅选择第一个选项（默认情况下）。问题是我不希望整个页面刷新。

这是我的代码：

debug

WebMethod：

<input id="TextA" type="text" />
  <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <triggers>
      <asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />
    </triggers>
    <ContentTemplate>
      <asp:DropDownList ID="DropDownList1" runat="server" 
        onselectedindexchanged="DropDownList1_SelectedIndexChanged" AutoPostBack="True">
        <asp:ListItem Value="+">+</asp:ListItem>
        <asp:ListItem Value="-">-</asp:ListItem>
        <asp:ListItem Value="/">/</asp:ListItem>
        <asp:ListItem Value="*">*</asp:ListItem>
      </asp:DropDownList>
    </ContentTemplate>
  </asp:UpdatePanel>
  <input id="TextB" type="text" />

JS：

[WebMethod]
public string Add(double a, double b) 
{
  double Calc = a + b;
  //string StringCalc = Calc.ToString();
  string Complete = "The answer is " + Calc;
  return Complete;
}
[WebMethod]
public string Subtract(double a, double b)
{
  double Calc = a - b;
  string Complete = "The answer is " + Calc;
  return Complete;
}
[WebMethod]
public string Divide(double a, double b)
{
  double Calc = a / b;
  string Complete = "The answer is " + Calc;
  return Complete;
}
[WebMethod]
public string Multiply(double a, double b)
{
  double Calc = a * b;
  string Complete = "The answer is " + Calc;
  return Complete;
}

总而言之，当我在DDL中选择一个选项时，＆＃34;选择＆＃34;如果我使用UpdatePanel，属性不会应用于任何选项（第一个默认选项除外），因此我的代码无法正常工作。我是否误解了UpdatePanel的工作原理？

以下是我的页面源代码部分，您可以看到，尽管我选择＆＃34; /＆＃34;，但它并未被选中＆＃34;。

<script type="text/javascript">
    function Add() {
      var v1 = $get('TextA').value;
      var v2 = $get('TextB').value;
      CalculatorWebService.Add(v1, v2, ResultCallBack);
    }
    function Subtract() {
      var v1 = $get('TextA').value;
      var v2 = $get('TextB').value;
      CalculatorWebService.Subtract(v1, v2, ResultCallBack);
    }
    function Divide() {
      var v1 = $get('TextA').value;
      var v2 = $get('TextB').value;
      CalculatorWebService.Divide(v1, v2, ResultCallBack);
    }
    function Multiply() {
      var v1 = $get('TextA').value;
      var v2 = $get('TextB').value;
      CalculatorWebService.Multiply(v1, v2, ResultCallBack);
    }

    var DropDownSelection = document.getElementById('DropDownList1');

    switch (DropDownSelection.options[DropDownSelection.selectedIndex].value) {
      case "+":
        $addHandler($get('ButtonA'), 'click', Add);
        break;
      case "-":
        $addHandler($get('ButtonA'), 'click', Subtract);
        break;
      case "/":
        $addHandler($get('ButtonA'), 'click', Divide);
        break;
      case "*":
        $addHandler($get('ButtonA'), 'click', Multiply);
        break;
    }
    function ResultCallBack(result) {
      $get('TextA').value = result;
    }
</script>

Answer 1

我发现你甚至不需要UpdatePanel。

更新面板的目的是允许您将信息发布回服务器并从服务器端更改屏幕外观，而无需执行整页刷新。

但如果您的所有服务器功能都通过Web Methods，则根本不需要回发。您可以对Web Methods的回复做出反应，并根据需要更改屏幕，全部通过javascript。

要回答问题的其他部分：您不需要让服务器更改哪个列表项具有selected或HTML DropDownList中的select属性。您可以在javascript。

中执行此操作

但是，如果您的用户选择DropDownList或select中的项目，您甚至不需要这样做：选择项目的行为会导致{{1} }}属性与列表项关联。

但是，如果您使用浏览器的“查看源”功能，则无法看到它，因为它只显示从服务器发出的代码。它没有反映出标记可能如何变化。

如果您想确定列表项具有selected属性，则需要使用浏览器的页面检查和调试工具，可以在IE中使用selected访问它们或Chrome中的F12。

我希望这会有所帮助。

使用UpdatePanel的DropDownList不会更改html＆＃34;已选择＆＃34;属性

1 个答案: