Question

我正在使用asp（移动）开发一个Web应用程序。

使用iPhone浏览器在搜索文本框中输入一些搜索文本（<mobile:TextBox ID="txtSearchData" Runat="server" BreakAfter=False></mobile:TextBox>），时，iPhone会启动搜索键盘，当我使用iPhone键盘点击搜索按钮时它会刷新整个页面，但是单击文本框下方的搜索按钮它可以正常工作。

谁能告诉我如何解决这个问题？

到目前为止，这是我的代码：

<body>
  <mobile:Form ID="frmSearch" Runat="server" Font-Name="NotSet" Font-Size="Small">
    <mobile:DeviceSpecific ID="dsSearch" Runat="server">
      <Choice Filter="isHTML32">
        <ScriptTemplate>
          <link href="StyleSheets/Common.css" rel="stylesheet" type="text/css"></link>
          <meta http-equiv="content-type" content="text/html; charset=utf-8" />
          <meta id="Meta1" name="viewport" content="width=device-width; initial-scale=1.0;" />
        </ScriptTemplate>
        <HeaderTemplate>
          <table cellspacing="2" width="100%">
            <tr>
              <td width="100%">
                <uc1:Header ID="ucHeader" runat="server" />
              </td>
            </tr>
          </table>
          <table>
            <tr>
              <td colspan="2"></td>
            </tr>
            <tr>
              <td align="right">
                Find :
              </td>
              <td>
                <mobile:DeviceSpecific>
                  <Choice="isHTML32">
                    <ContentTemplate>
                      <asp:DropDownList ID="lstGroups" runat="server"  OnSelectedIndexChanged="LstGroups_SelectedIndexChanged" AutoPostBack="true">
                      </asp:DropDownList>
                    </ContentTemplate>
                  </Choice>
                </mobile:DeviceSpecific>
              </td>
            </tr>
            <tr>
              <td align="right"> Search by:</td>
              <td>
                <mobile:SelectionList ID="lstSearchPreferences" Runat="server" BreakAfter=False>
                  <Item Selected=True Text="select" />
                </mobile:SelectionList>
              </td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>
                <mobile:SelectionList ID="lstSearchOptions" Runat="server" BreakAfter=False>
                </mobile:SelectionList> 
              </td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>
                <mobile:TextBox ID="txtSearchData" Runat="server" BreakAfter=False>
                </mobile:TextBox>
              </td>
            </tr>
            <tr id="trContractorFilter" runat="server" visible="False">
              <td align="right"> 
                <mobile:Label id="lblContractorFilter" BreakAfter=False Runat="server" Visible="True" >
                  Results:
                </mobile:Label>
              </td>
              <td>
                <mobile:SelectionList ID="lstContractorFilter" Runat="server" BreakAfter="True" Visible ="True" >
                  <Item Selected="True" Text="Active Permits" />
                  <Item Text="All Permits" />
                </mobile:SelectionList>
                (your permits only)
              </td>
            </tr>
            <tr>
              <td colspan="2"></td>
            </tr>
            <tr>
              <td colspan="2"></td>
            </tr>
            <tr>
              <td colspan="2"></td>
            </tr>
            <tr>
              <td colspan="2" align="center">
                &nbsp;&nbsp;&nbsp;
                <mobile:DeviceSpecific>
                  <Choice="isHTML32">
                    <ContentTemplate>
                      <asp:Button ID="btnSearch" runat="server" Text="Search" UseSubmitBehavior=true OnClick="BtnSearch_Click"/>
                    </ContentTemplate>
                  </Choice>
                </mobile:DeviceSpecific>
              </td>
            </tr>
            <tr>
              <td colspan="2" align="center">
                <mobile:Label ID="lblError" Runat="server" Font-Bold="True" ForeColor=Red Visible="false" BreakAfter=False></mobile:Label>
              </td>
            </tr>
          </table>
        </HeaderTemplate>
      </Choice>
    </mobile:DeviceSpecific>
  </mobile:Form>
</body>

Answer 1

结合this question及其使用jQuery的答案，您可以在页面中编写相同的代码，并在触发提交之前进行客户端处理。

此外，您可以使用$.ajax()库函数异步提交表单（在上面讨论的代码块中并且根本不触发form.submit()），这将消除任何页面刷新（无论是否来自表单提交事件被触发的地方。）

<form id="hello-world" action="sayhello">
<input type="submit" value="Hello!">
</form>

您可以附加如下事件处理程序：

$('#hello-world').submit(function(ev) {
    ev.preventDefault(); // to stop the form from submitting
    /* Validations go here */
    //this.submit(); // If all the validations succeeded
    $.ajax({
         url:'your_form_target',
         data:formData,
         success:function(data,textStatus, jqXHR){

         }
     });
});

Answer 2

将Action的{{1}}属性设置为mobile:Form。这应该取消表单的默认回发操作，该操作在键盘上的“搜索”按钮被执行时执行。

Ref

Answer 3

默认情况下，ASP.NET控件会进行整页回发，以便将页面数据发送到服务器。

为了在asp.net上处理AJAX请求，你应该使用ScriptManager和UpdatePanel控件或使用像jQuery AJAX这样的客户端机制。

Answer 4

原因是你的搜索BUTTON实际上没有触发表单提交，它正在触发JS函数：onClick="BtnSearch_Click"

BtnSearch_Click可能会阻止默认操作（提交表单并重新加载页面），这是您需要对表单的默认提交操作执行的操作。

我对ASP并不熟悉，所以我可能会偏离标准，但你应该可以放一个

onSubmit="Btn_Click"

在表单上，iOS上的“搜索”按钮将触发。

使用iPhone浏览器处理搜索按钮？

谁能告诉我如何解决这个问题？

4 个答案: