Search code examples
c#asp.net-coreasp.net-core-mvcbootstrap-modal

ASP.NET Core MVC : bootstrap modal not showing

I have been following a tutorial to use bootstrap modals in a CRUD application but I can't get the modal to show.

This is the button calling the jQuery:

<a onclick="CreateOrganization('@Url.Action("AddOrEdit","Organizations",null,Context.Request.Scheme)','New Organization')" class="btn btn-success text-white"><i class="fas fa-random"></i> New Organization</a>

This is the jQuery function which is at the bottom of the same page as the Create Organization button:

< script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" > < /script> <
  script type = "text/javascript" >
  CreateOrganization = (url, title) => {
    $.ajax({
      type: 'GET',
      url: url,
      data: {
        'id': null
      },
      success: function(res) {
        $("#formModal").find(".modal-body").html(res);
        $("#formModal").find(".modal-title").html(res);
        $("#formModal").modal('show');
      },
      failure: function(response) {
        alert(response.responseText);
      },
      error: function(response) {
        alert("error");
      }
    })
  }; <
/script>

The modal is in the _Layout page:

<div class="modal" tabindex="-1" role="dialog" id="formModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header" id="formModal">
        <h5 class="modal-title"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
             <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body"></div>
    </div>
  </div>
</div>

This is the AddOrEdit Action Method in the Controller:

public async Task <IActionResult> AddOrEdit(int id = 0)
  { 
    if (id == 0) 
      return View(new Organization()); 
    else 
    { 
      var org = await _context.Organizations.FindAsync(id); 
      if (org == null) 
        { 
         return NotFound(); 
        } 
         return View(org); 
    }
   }

When I place an alert() in the jQuery I get the correct url being passed from the button and if I put a break in the AddOrEdit Action method in the controller I does hit the break so the jQuery function appears to be working as expected. If I place an alert inside the success portion of the ajax{} it hits that so even jQuery seems to be happy. However, the modal doesn't show. Can someone please show me where I am going wrong?

Edited Test

Solution

  • Update:

    Could you kindly explain how the two are related. I don't question that your two lines of code will open up a modal as your demo attests but it isn't obvious how I can take what you have written and modify my JQuery Ajax script.

    Well, as per my investigations, I found ample of issues on the code. Rather explaining those issues, I was intented to show you the easiest way. However, based on your comment, I am explaining now.

    Issue:1: Script Reference Incompatible With Your Ecma 5:

    It means when I have ran your code, I encountered following error:

    enter image description here

    Which telling us, jquery/1.8.3/jquery.min.js this version of jQuery unaware of ecma-5 or later. So I have resolved it by replacing version of jQuery/jquery-3.2.1.min.js

    Issue:2: Controller Action:

    In your shared code, you have only shared only one controller. However, to make it workable your sample needs two controller action. Because, One action need for displaying your view. As your are calling a GET operation where you are explecting data from server therefore, that controller should return json data instead of view for instance: return Ok(org); Not return View(org);

            [HttpGet]
        public async Task<IActionResult> AddOrEdit(int id = 0)
        {
            if (id == 0)
                return View(new Users());
            else
            {
                try
                {
                    var org = await _context.Organizations.FindAsync(id);
                    if (org == null)
                    {
                        return NotFound();
                    }
                    return Ok(org); ;
                }
                catch (Exception ex)
                {

                    throw;
                }
               
               
            }
        }

        public IActionResult AddOrEditView()
        {
            return View();
        }

    Issue:3: Incorrect Bindings Or Object Parsing:

    In your GET method on success: function(res) your are binding response directly to html which cannot be displayed as its getting it as object order which is a json data object as you can see below:

    enter image description here

    $("#formModal").find(".modal-body").html(res);
$("#formModal").find(".modal-title").html(res);

    Therefore, you should bind it with explicit declaration as below:

    $("#formModal").find(".modal-body").html(res.skills);
$("#formModal").find(".modal-title").html(res.developerName);

    Note: I am defining it as per my object as res.skills you could replace as per yours.

    Final: Output

    enter image description here

    Code:

    <div class="modal" tabindex="-1" role="dialog" id="formModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header" id="formModal">
                <h5 class="modal-title"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
               
            </div>
            <div class="modal-body"></div>
        </div>
    </div>
</div>
<a onclick="CreateOrganization('@Url.Action("AddOrEdit","Todo",null,Context.Request.Scheme)','New Organization')" class="btn btn-success text-white"><i class="fas fa-random"></i> New Organization</a>
@*
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script>*@
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"> </script>
<script type="text/javascript">

   
    CreateOrganization = (url, title) => {
        $.ajax({
            type: 'GET',
            url: url,
            data: {
                'id': 1
            },
            success: function (res) {
                console.log(res);
                $("#formModal").find(".modal-body").html(res.skills);
                $("#formModal").find(".modal-title").html(res.developerName);
                $("#formModal").modal('show');
            },
            failure: function (response) {
                alert(response.responseText);
            },
            error: function (response) {
                console.log(response);
                alert("error");
            }
        })
    };
</script>

    Previous Sample Example:

    I have checked your code and found issue on your script and modal HTML as well. Please try following code snippet which works as expected.

    Model

    <div class="modal" tabindex="-1" role="dialog" id="formModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header" id="formModal">
                <h5 class="modal-title">Tesing Modal Error</h5>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
             
            </div>
            <div class="modal-body"></div>
        </div>
    </div>
</div>

    Script

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script type="text/javascript" language="javascript">
   
    $(document).ready(function () {
       
        $(function () {
            $('#formModal').modal('show');
        });

    });
   
</script>

    Output

    enter image description here

    Note: I have tried to troubleshoot your modal display issue. So data realted to controller response has not varified or tested.