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
– Anonymous Duck, Commented Mar 17, 2016 at 8:12
No i mean this one. <a href='@Url.Action("Create_Business_Info", "Maintenance")'> — Anonymous Duck
– Anonymous Duck, Commented Mar 17, 2016 at 8:16

Community · Accepted Answer · 2017-05-23 12:19:25Z

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, 2017 at 12:19

CommunityBot

11 silver badge

answered Mar 17, 2016 at 8:26

REDEVI_

6948 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Anonymous Duck Over a year ago

what is the difference?

REDEVI_ Over a year ago

this function works as per the source i have mentioned , along with the window.load function

REDEVI_ Over a year ago

.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')

Anonymous Duck Over a year ago

@REDEVI_29 yes got your point, please read the requirement modal should show after clicking the link

REDEVI_ Over a year ago

The script to be placed in the view which contains the modal

|

Kinjal Gohil · Accepted Answer · 2016-05-09 04:18:05Z

1

Try this:

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

answered May 9, 2016 at 4:18

Kinjal Gohil

9689 silver badges15 bronze badges

Comments

Rajshekar Reddy · Accepted Answer · 2016-03-17 08:40:52Z

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 :(
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.

Collectives™ on Stack Overflow

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

3 Answers 3

6 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related