CODEWITHSUNDEEP
c#jqueryasp.netbootstrap-modal
Azeem Hafeez
Azeem Hafeez

Reputation: 250

Adding content to div in Bootstrap modal from server side in asp.net

I have input form in Bootstrap model popup. I want to show error message in div when submit button for saving. My model popup is in update panel. I am trying to do and its not working.

<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>

Below is the server side method to show content.

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

How can I show error content to div?

Upvotes: 1

Views: 2596

Answers (1)

Sagar Upadhyay
Sagar Upadhyay

Reputation: 819

To open error model popup from Server side. You need to update your Server side function ShowError to this.

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

for this you have to put the div with id myModal, into update panel.

This will trigger jQuery function on Client side after server side execution complete and the model open manually.

Other way to do this

If you don't want to put model div into update panel then follow this way.

Update your Model div like below

<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>

Add JavaScript function as below into aspx file.

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

And call the JavaScript function from server side like this

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

Here, you can explore more about ScriptManager.RegisterStartupScript Method

Upvotes: 2

Related Questions