MVC links not working in jquery mobile app environment

Question

I am working on converting my existing MVC website to be Mobile friendly. I am having issues when clicked on links, it is showing empty page. If I remove following links in _Layout.Mobile.cshtml

@System.Web.Optimization.Scripts.Render("~/bundles/jquery")
@System.Web.Optimization.Scripts.Render("~/bundles/jquerymobile")

Then it works fine but I loose all the styling and the text on webpage displays very tiny. I am using Opera Mobile emulator for testing. The links are local and are like "localhost:62234/Articles/10".

Just to give some more background I am converting my Framework 4.5 MVC website to be Mobile friendly. I have added all the libraries needed and main page works fine. I am having issues when links are pressed on main page. Initially clicking on links was doing nothing, then I did some research and discovered that I have to add tag rel="external" to the links to make them work. Now links work but displays empty page. Any help is greatly appreciated.

Answer 1

Here is solution I found which solved my problem finally. Here is how my code looks now..in _Layout.Mobile.cshtml

@System.Web.Optimization.Scripts.Render("~/bundles/jquery")
@System.Web.Optimization.Scripts.Render("~/bundles/jquerymobile")

<script type=”text/javascript” src=”@Url.Content("~/Scripts/jquery-2.0.2.min.js")"></script>
<script type=”text/javascript”>
    $(document).bind("mobileinit", function () {
    $.mobile.ajaxEnabled = false;
    });
</script>
<script type=”text/javascript” src=”@Url.Content("~/Scripts/jquery.mobile-1.3.1.min.js")"></script>

I found some more information with this problem Here. Hope this helps others