0

I have read this post and it fires the modal but not quite.

I just see grayed window but I don;t see modal.

My HTML:

 <div id='gameModal' class='modal hide fade in' data-url='@Url.Action("TermsAndConditions","Base")'>
 <div id='gameContainer'/>
 <button id='showGame'>Show Game Listing</button></div>

In my js:

 $('#showGame').click(function () {
    var url = $('#gameModal').data('url');

    $.get(url, function (data) {
        $('#gameContainer').html(data);

        $('#gameModal').modal('show');
    });
});

And I've created a controller as well with a partialView:

 [HttpGet]
 public ActionResult TermsAndConditions()
  {
     return PartialView();
  }

I found that line in my js file is skipped: $.get(url, function (data) probably because I have additional parameter in my routing config.

Instead of "normal" routing such as "/Base/TermsAndConditions" I have "/en-US/Base/TermsAndConditions" Any hints how to set url without additional parameter without splitting the urls and mambo-jumbo things?

Here is my routing config:

 public class RouteConfig
 {
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        routes.MapRoute(
            name: "Default",
            url: "{language}/{controller}/{action}/{id}",
            defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional, language = "en-US" }
        );
    }
}

Is there any more modern approach for openning modals with partialViews? UPDATE: I've managed to view my modal, but only if I put partial view HTML code beside my button in my for example layout page like this:

<button class="btn btn-primary" data-toggle="modal" data-url='@Url.Action("TaC","Home")' data-target=".bs-example-modal-lg">Large modal</button>
 <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
  <div class="modal-body">
     <div class="modal-content">
       <div class="modal-header">
         <h4 class="modal-title" id="myModalLabel">Modal Heading</h4>
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        </div>
<div class="modal-body">
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. 
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>                        
        </div>
      </div>
    </div>
  </div>
</div>

If I put data-url=@Url.Action("Index","Home") it not goes to the controller.

Stefan0309
  • 1,602
  • 5
  • 23
  • 61
  • what do you mean by grayed out window? please include routing and mention what js script files are being loaded on that page – derloopkat Dec 09 '18 at 16:16
  • @derloopkat I've added Routing config file. this is my main.js file which is ok, I can debug it through it. Just my url $.get(url, function (data) is not good because of routing,and thgerefore it doesnt recognize my request for controller. – Stefan0309 Dec 09 '18 at 17:37
  • The above code with default location for the views (MyProject/Views/Base/TermsAndConditions.cshtml) should work. May be the problem is you have created a structure of folders for the views, including language. If that's the case then consider using Mvc areas. – derloopkat Dec 09 '18 at 18:49

0 Answers0