在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功能，并手动打开模型。

其他方式来做到这一点

如果您不想将模型div放入更新面板，请按照这种方式进行操作。

像下面一样更新您的Model 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>

将以下JavaScript函数添加到aspx文件中。

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的信息