Semantic UI Modal 获取表单数据失败答案

【问题标题】：Semantic UI Modal failed to get form dataSemantic UI Modal 获取表单数据失败
【发布时间】：2016-04-30 21:04:47
【问题描述】：

将我的 asp.net webforms 项目更改为语义 UI 时遇到问题。以下是我的一张表格；当我单击提交按钮时，它会触发一个事件处理程序服务器端，但我得到一个空字符串，而不是我输入到文本框的内容。

调用模态的链接：

<a href="#" data-modal="recovermodal" class="callmodal">Recover Password</a>

Modal 的 HTML :

   <div class="ui small modal" id="recovermodal">
     <form class="ui large form"  runat="server">
     <i class="close icon"></i>
     <div class="header">
     RECOVER PASSWORD
    </div>

    <div class="content">
  <div class="description">

<div class="field">
    <label>E-MAIL</label><%--
    <input type="text" name="rev-email" placeholder="E-MAIL">--%>
        <input type="text" ID="txtRP_Email" name="rev-email" runat="server" placeholder="E-MAIL" />
    </div>
    <div class="field">
        <label>PHONE NUMBER</label><%-- 
        <input type="text" name="rev-phone" placeholder="PHONE NUMBER">--%>
            <input type="text"  ID="txtRP_MobileNo" name="rev-phone" placeholder="PHONE NUMBER" runat="server" />
        </div>
        <div class="custommodalfooter">
            <div class="ui reset button offmodal">DISCARD</div>
              <asp:LinkButton ID="btnRecoverPassword" runat="server" CssClass="ui green submit right labeled icon button" onclick="dorecover_Click">
                    <%= base.GetLocalText("html_buttonConfirm")%>
                </asp:LinkButton>
            <!-- <button class="ui reset button offmodal">DISCARD</button><button class="ui positive right labeled icon button" type="submit"><i class="right arrow icon"></i>
                CONFIRM
              </button> -->
        </div>
  </div>
</div>

  </form>

</div>

服务器端：这是我将 Email 和 MobileNo 作为空字符串的地方

protected void dorecover_Click(object sender, EventArgs e)
{
    String Email = txtRP_Email.Value.Trim();
    String MobileNo = txtRP_MobileNo.Value.Trim();
}

【问题讨论】：

标签： c# asp.net webforms semantic-ui

【解决方案1】：

请尝试从Request.Form 获取您的值。

protected void dorecover_Click(object sender, EventArgs e)
{
    String Email = Request.Form.Item["txtRP_Email"].Trim(); 
    String MobileNo = Request.Form.Item["txtRP_MobileNo"].Trim();
}

在使用 Trim() 之前，可能需要对字符串类型进行一些转换。我没有机会测试这段代码，但理论上这是你需要的。

【讨论】：

【解决方案2】：

您没有显示所有内容，但未发布（可见：无）字段未发布。单击对话框的“批准”（确定）按钮时，可能会在发布表单之前将对话框的可见性设置为“无”。

如果您处理对话框的 onApprove 回调并返回 false，这可能会解决问题，因为返回 false 会阻止模态框隐藏。

但是，如果在 onApprove 处理程序之前调用回发，您可能需要从 onapprove 处理程序本身调用 dorecover_Click，而不是直接在按钮上调用它。

请参阅此问题以帮助您朝着正确的方向开始： Stack Overflow: Calling an ASP.NET EventHandler from JavaScript

【讨论】：

【解决方案3】：

试试这个：

$('#your-modal-id').modal({ useFlex: false}).modal("show");
$('.ui.dimmer.modals').appendTo('#aspnetForm');
$('.ui.dimmer.modals').css('overflow', 'scroll');
$('#your-modal-id').css('position', 'relative');

【讨论】：