c# - 从服务器端在 asp.net 中将内容添加到 Bootstrap 模式中的 div

Question

我在 Bootstrap 模型弹出窗口中有输入表单。我想在提交按钮保存时在 div 中显示错误消息。我的模型弹出窗口位于更新面板中。我正在尝试做，但它不起作用。

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">

        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">SMTP Configuration</h4>
            </div>
            <div class="modal-body">

                Here is a input form

                <div id="ErrorDiv" class="required" runat="server">
                    This is a div where i want to show content

                </div>


            </div>
            <div class="modal-footer">
                <button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
                <asp:Button ID="btnEdit" runat="server" Text="Save" OnClick="Save" class="btn btn-success" ValidationGroup="Group1" />

            </div>
        </div>

    </div>
</div>

下面是服务器端显示内容的方法。

public void ShowError(string Message)
{
    ErrorDiv.InnerHtml = Message;
    upModal.Update();
}

如何向div显示错误内容？

Answer 1

从服务器端打开错误模型弹出窗口。 您需要将服务器端函数 ShowError 更新为此。

public void ShowError(string Message)
{
    ErrorDiv.InnerHtml = Message;
    upModal.Update();
    ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "ErrorModel", "$('#myModal').modal('show');", true);
}

为此，您必须将 ID 为 myModal 的 div 放入更新面板。

这将在服务器端执行完成并手动打开模型后在客户端触发 jQuery 函数。

Other way to do this

如果您不想将模型 div 放入更新面板，请按此方式操作。

像下面这样更新你的模型 div

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">

        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">SMTP Configuration</h4>
            </div>
            <div class="modal-body">

                Here is a input form

                <div id="ErrorDiv" class="required">
                    This is a div where i want to show content

                </div>


            </div>
            <div class="modal-footer">
                <button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
            </div>
        </div>

    </div>
</div>

在 aspx 文件中添加如下 JavaScript 函数。

function showError(error){
    $("#ErrorDiv").html(error);
    $('#myModal').modal('show');
}

像这样从服务器端调用 JavaScript 函数

public void ShowError(string Message)
{
    ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "ErrorModel", "ShowError('"+Message+"');", true);
}

在这里，您可以探索更多关于 ScriptManager.RegisterStartupScript Method 的信息