How to call a Bootstrap Modal in ASP.Net MVC?

Question

I created a sample project that whenever i click a button link, it should call a View which contains my Modal Pop Up. I was able to call the View but the modal in it doesn't appear. What can i do to fix it? Can anybody help me please?

This is my code. The link should call the "Create_Business_Info" that contains the modal

@{
    ViewBag.Title = "Business_Info";
}

<div class="container-fluid">

    <a href='@Url.Action("Create_Business_Info", "Maintenance")'>
    Business INFO!
    </a>

    </div>

<script>
    $(document).ready(function () {
        $("#myModal").show();

    });

</script>

This is the code of the Modal that should appear.

<div id="myModal" class="modal fade" data-backdrop="static" data-     keyboard="false">
    <div class="modal-dialog ">
        <div class="modal-content">
            <div class="modal-header modal-header-employee">

            <button type="button" class="close" data-dismiss="modal">&times;    </button>
            <h3 class="modal-title">Business Information</h3>
        </div>
        <br />

        <div class="modal-body">

            <div class="form-group row">
                <label class="col-xs-4 col-sm-offset-1 col-sm-4 control-label">Business Name:</label>
                <div class="col-xs-8 col-sm-6">
                    <input class="form-control" type="text">
                </div>
            </div>

            <div class="form-group row">
                <label class="col-xs-4 col-sm-offset-1 col-sm-4 control-label">Address:</label>
                <div class="col-xs-8 col-sm-6">
                    <textarea class="form-control" rows="5"></textarea>
                </div>
            </div>

            <div class="form-group row">
                <label class="col-xs-4 col-sm-offset-1 col-sm-4 control-label">Contact No:</label>
                <div class="col-xs-8 col-sm-6">
                    <input class="form-control" type="text">
                </div>
            </div>

            <div class="form-group row">
                <label class="col-xs-4 col-sm-offset-1 col-sm-4 control-label">Website:</label>
                <div class="col-xs-8 col-sm-6">
                    <input class="form-control" type="text">
                </div>
            </div>

            <div class="form-group row">
                <label class="col-xs-4 col-sm-offset-1 col-sm-4 control-label">Email Address:</label>
                <div class="col-xs-8 col-sm-6">
                    <input class="form-control" type="text">
                </div>
            </div>
        </div><!--modal body-->
        <div class="modal-footer">
            <button type="button" class="btn btn-primary">Save</button>
            <button type="button" class="btn btn-default">Clear</button>

            </div><!--modal footer-->
        </div><!--modal content-->
    </div><!--modal dialog-->
</div><!--business_info-->



<script>
    $(document).ready(function () {
        $("#myModal").show();

    });



</script>

Someone help me please. Thank you so much.

`Create_Business_Info that contains the modal` is this a partial view? — Anonymous Duck, Mar 17 '16 at 08:12
follow this -> http://stackoverflow.com/questions/11231862/using-bootstrap-modal-window-as-partialview — Anonymous Duck, Mar 17 '16 at 08:19
can you specify the filenames in which this codes are located? im assuming that the link and the modal are in the same page. Its confusing since you are saying that the action link will not call partial view and it contradicts on the description `View which contains my Modal Pop Up` — Anonymous Duck, Mar 17 '16 at 08:26
@JayceeEvangelista have you added the `bootstrap.min.js` file? — Rajshekar Reddy, Mar 17 '16 at 08:29
Im so sorry for the confusion my question brought to you Sir. What i'm saying is that, Business INFO! is located in another page. Once this link is clicked, another page will be called. This page is the Modal. — Jaycee Evangelista, Mar 17 '16 at 08:51

score 2 · Accepted Answer · edited May 23 '17 at 12:19

2

Modify your script to ,

<script type="text/javascript">
    $(window).load(function(){
        $('#myModal').modal('show'); 
    });
</script>

it should be selector.modal('show') instead of selector.show() Source:Launch Bootstrap Modal on page load

edited May 23 '17 at 12:19

Community

1
1

answered Mar 17 '16 at 08:26

REDEVI_

684
8
18

what is the difference? – Anonymous Duck Mar 17 '16 at 08:27
this function works as per the source i have mentioned , along with the window.load function – REDEVI_ Mar 17 '16 at 08:29
.modal('show') Manually opens a modal. Returns to the caller before the modal has actually been shown (i.e. before the shown.bs.modal event occurs). Copy $('#myModal').modal('show') – REDEVI_ Mar 17 '16 at 08:30
@REDEVI_29 yes got your point, please read the requirement modal should show after clicking the link – Anonymous Duck Mar 17 '16 at 08:31
The script to be placed in the view which contains the modal – REDEVI_ Mar 17 '16 at 08:32
I followed your instruction Sir but it's not working. – Jaycee Evangelista Mar 17 '16 at 09:12

score 1 · Answer 2 · answered May 09 '16 at 04:18

1

Try this:

$('#myModal').modal();

answered May 09 '16 at 04:18

Kinjal Gohil

958
9
15

Rajshekar Reddy · Answer 3 · 2016-03-17T08:40:52.397

Main point to note is It should be

$('#myModal').modal('show')

Not

$('#myModal').show();

Here Check the Bootstrap Document

Also place the script in the View which has the modal, So on load of this view with modal the modal is shown.

Also here is a working example below

 $(document).ready(function () {
        $("#myModal").modal('show');
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div id="myModal" class="modal fade" data-backdrop="static" data-     keyboard="false">
    <div class="modal-dialog ">
        <div class="modal-content">
            <div class="modal-header modal-header-employee">

            <button type="button" class="close" data-dismiss="modal">&times;    </button>
            <h3 class="modal-title">Business Information</h3>
        </div>
        <br />

        <div class="modal-body">

            <div class="form-group row">
                <label class="col-xs-4 col-sm-offset-1 col-sm-4 control-label">Business Name:</label>
                <div class="col-xs-8 col-sm-6">
                    <input class="form-control" type="text">
                </div>
            </div>

            <div class="form-group row">
                <label class="col-xs-4 col-sm-offset-1 col-sm-4 control-label">Address:</label>
                <div class="col-xs-8 col-sm-6">
                    <textarea class="form-control" rows="5"></textarea>
                </div>
            </div>

            <div class="form-group row">
                <label class="col-xs-4 col-sm-offset-1 col-sm-4 control-label">Contact No:</label>
                <div class="col-xs-8 col-sm-6">
                    <input class="form-control" type="text">
                </div>
            </div>

            <div class="form-group row">
                <label class="col-xs-4 col-sm-offset-1 col-sm-4 control-label">Website:</label>
                <div class="col-xs-8 col-sm-6">
                    <input class="form-control" type="text">
                </div>
            </div>

            <div class="form-group row">
                <label class="col-xs-4 col-sm-offset-1 col-sm-4 control-label">Email Address:</label>
                <div class="col-xs-8 col-sm-6">
                    <input class="form-control" type="text">
                </div>
            </div>
        </div><!--modal body-->
        <div class="modal-footer">
            <button type="button" class="btn btn-primary">Save</button>
            <button type="button" class="btn btn-default">Clear</button>

            </div><!--modal footer-->
        </div><!--modal content-->
    </div><!--modal dialog-->
</div><!--business_info-->

I copied the code you provide. But still, it's not working :( — Jaycee Evangelista, Mar 17 '16 at 09:02
If its not working then might be you are missing something else in your code, may be something else is wrong in your code which you have not shown us. May be you are loading jquery files twice and this can be any random thing for not to work.. So see your console window and let me know what errors you find. — Rajshekar Reddy, Mar 17 '16 at 09:36

How to call a Bootstrap Modal in ASP.Net MVC?

3 Answers3