I'm trying to use the DataTables js addon from DataTables.net in a project of mine that uses Razor Pages. However, it just doesn't want to work and I can't figure out why. I set it up in VS Code to test it out, and it worked just fine for the test. Here is the code and a screenshot of the output:
<html>
<head>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="http://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function(){
$('#myTable').DataTable();
});
</script>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
</body>
</html>
However, when I try to do the same thing in VS 2019 using Razor Pages, nothing happens, it just prints the unformatted table. Here is the code and a screenshot I have for that.
#page
#model CustomerPageTest.Pages.Customer.ListModel
#{
ViewData["Title"] = "List";
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="http://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
$('#myTable').dataTable();
});
</script>
<table id="myTable">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
As you can see, the two programs are very similar, just a little bit of a different syntax. Does anyone have any ideas on how to fix this?
Here is a snippet from the default _Layout.cshtml file:
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2020 - RazorPages.Test - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#RenderSection("Scripts", required: false)
The view you are editing gets injected into the final HTML file when #RenderBody() is called. However, this is above a handful of scripts at the bottom of the file.
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
The first script in the list is another instance of JQuery. This means that in the resulting HTML file, you are loading JQuery two different times. When the second instance of JQuery gets loaded, it is clearing out the additional functions that the DataTables -script adds onto the JQuery object, which is why the table is not loading as expected.
To fix this issue, you can load your scripts in the view in a Razor section.
#section Scripts
{
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
$('#myTable').DataTable();
});
</script>
}
Or, you can leave the view as is and remove JQuery from _Layout.cshtml.
Related
I have a problem in loading scripts on first time load of view in ASP.NET MVC, the scripts are present on Partial View but these scripts are not called when page is being loaded first time.
But when I append the same partial view second time using Ajax call, the scripts load perfect on the view and components present earlier on the view appended by the partial view also work perfect.
Here I little further discuss my problem in detail that when same scripts I call via _Layout view, then these scripts does not work on partial view, and When I put the same scripts on Partial view also then the problem arises of scripts called two times and my functions are called twice.Actually I am using SignalR scripts and due to 2 times referencing of scripts one time on _layout View and 2nd on Partial view my SignalR functions are called twice and my all code logic ruins.
This is my Home view code:
#model IEnumerable<SmartKids.Lib.Core.ViewModels.FileMediaAlbumsVM>
#{
ViewBag.Title = "Home";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="profile-body">
#*#Html.Partial("ModalMessages")*#
<div class="row">
#Html.Partial("_Messages")
</div>
<div class="row infinite-scroll">
<input type="hidden" value="" name="clientScreenWidth" id="clientScreenWidth" />
#Html.Partial("_AlbumRow", Model)
</div>
<div id="loading" class="text-center">
<i class="fa fa-spinner fa-2x fa-spin"></i>
</div>
</div>
#section scripts{
<script src="~/Scripts/infiniteScroll.js"></script>
<script type="text/javascript">
var moreRowsUrl = "/Album/Home"; //the URL to your ActionMethod
$(window).scroll(scrollHandler);
</script>
}
and This is my Main _Layout code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - Smart Kids</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel='stylesheet' type='text/css' href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600&subset=cyrillic,latin'>
<!-- CSS Global Compulsory -->
<link href="~/Content/plugins/bootstrap/css/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" href="~/Content/css/headers/header-default.css" />
<!-- CSS Customization -->
<link rel="stylesheet" href="~/Content/css/custom.css" />
<style type="text/css">
.fancybox-custom .fancybox-skin {
box-shadow: 0 0 50px #122;
}
</style>
#RenderSection("metaTags", false)
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="wrapper">
<!--=== End Header ===-->
<div class="container" id="main">
<div class="row">
<div class="col-md-12">
#RenderBody()
</div>
</div>
</div>
</div>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script>
<script src="~/signalr/hubs"></script>
<script src="~/Scripts/albumSignalR.js"></script>
#RenderSection("scripts", required: false)
</body>
</html>
Now I have no scripts in Partial view and this is my Partial View code:
<div class="widget-extra margin-bottom-15">
<div class="timeline">
<ul class="timeline-list">
<li>
<a href="#Url.Action("HomeAlbum", "Album", new { aId = item.AlbumId })">
<picture class="thumbnail img-responsive">
<source media="(min-width: 480px)" srcset="#Url.Content(filepath_mobile), #Url.Content(filepath_mobile) 2x">
<source srcset="#Url.Content(filepath_small), #Url.Content(filepath_small) 2x">
<img src="#Url.Content(filepath_mobile)" alt="#item.Title">
</picture>
</a>
</li>
</ul>
</div>
</div>
Kindly suggest me some solution to this, what I am doing wrong or what needs to be fixed.
why dont you move the closing script
tag within the closing }
#section scripts{
<script src="~/Scripts/infiniteScroll.js"></script>
<script type="text/javascript">
//$(function () {
// $("div#loading").hide();
//});
var moreRowsUrl = "/Album/Home"; //the URL to your ActionMethod
$(window).scroll(scrollHandler);
</script>
}
I am trying to jQuery tabs in C#. Here is the script sources and stylesheet which I included:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="Styles/jquery-ui.css" />
<script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#reportTabs").tabs();
});
</script>
And here is where I set up my jQuery tabs:
<div id="reportTabs">
<ul>
<li>By Region</li>
<li>Execution Status Report</li>
<li>Due in 30 Days</li>
<li>Due in 30-90 Days</li>
<li>By Service Area</li>
</ul>
<div id="statusDiv" runat="server">
</div>
<div id="exeDiv" runat="server">
</div>
<div id="dueDiv" runat="server">
</div>
</div>
But somehow when I try to run the page, it tells me an error message which is: mismatching fragment identifier. I wonder which part went wrong?
Thanks in advance.
Change the HTML and try, hopefully it should work, I guess mainContent_ in href is playing culprit
<div id="reportTabs">
<ul>
<li>By Region</li>
<li>Execution Status Report</li>
<li>Due in 30 Days</li>
<li>Due in 30-90 Days</li>
<li>By Service Area</li>
</ul>
<div id="statusDiv" runat="server">
1
</div>
<div id="exeDiv" runat="server">
2
</div>
<div id="dueDiv" runat="server">
3
</div>
<div id="rangeDiv" runat="server">
4
</div>
<div id="areaDiv" runat="server">
5
</div>
</div>
Demo: http://jsfiddle.net/TLB79/
Please check external resources for JS and CSS URL
I have a below html code in my aspx page. I want to set the table width to 100% and it doesn't seems to work. Am I doing wrong anywhere?
<table style="width:100%">
<tr>
<td height="15">
<div id="menu">
<ul>
//page menus are being placed here
</ul>
</div>
</td>
</tr>
</table>
Also I have a grid below this table. The gridview stretches to right, but this table doesn't equally come with the gridview.
Make sure you have a proper html document:
<!doctype html>
<html>
<head>
<title>Test</title>
<style>
*{margin:0;padding:0;}//clear default browser margin & padding from all elements
html,body{width:100%;position:relative;}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<td height="15">
<div id="menu">
<ul>
//page menus are being placed here
</ul>
</div>
</td>
</tr>
</table>
</body>
</html>
EDIT:
The tag does not have any CSS rules automatically applied to it. But the tag has default margins on all browsers, so all you need to do is shave them off by using the following CSS:
body {
margin: 0px;
}
Click the Run code snippet button below to check it.
body {
margin: 0px;
}
<table style="width:100%; border:1px solid black;">
<tr>
<td height="15">
<div id="menu">
<ul>
//page menus are being placed here
</ul>
</div>
</td>
</tr>
</table>
I have a default _siteLayout.cshtml file with a call to #RenderBody() in the centre of it, in between some markup and Razor code.
I have a complex .aspx page which has some markup that I wish to render where this call to #RenderBody() is made.
Essentially, I would like to make a call like this inside of a new file :
#{
Layout = "/Shared/_SiteLayout.cshtml";
#RenderPage(Default.aspx);
}
However, it is not possible to make a call to a .aspx page in this case.
Is there any simple solution to this ?
Default.aspx :
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="fullcalendar/fullcalendar.css" rel="stylesheet" type="text/css" />
<link href="Styles/dark-hive/jquery.ui.all.css" rel="stylesheet" type="text/css" >
<link href="Styles/jquery-ui-1.7.3.custom.css" rel="stylesheet" type="text/css" />
<link rel='stylesheet' type='text/css' href='fullcalendar/fullcalendar.print.css' media='print' />
<script src="jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery/jquery-ui-1.7.3.custom.min.js" type="text/javascript"></script>
<script src="jquery/jquery.qtip-1.0.0-rc3.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
<div id="updatedialog" style="font: 70% 'Trebuchet MS', sans-serif; margin: 50px;"
title="Update or Delete Event">
<table cellpadding="0" class="style1">
<tr>
<td class="alignRight">
Name:</td>
<td class="alignLeft">
<input id="eventName" type="text" /><br /></td>
</tr>
<tr>
<td class="alignRight">
Description:</td>
<td class="alignLeft">
<textarea id="eventDesc" cols="30" rows="3" ></textarea></td>
</tr>
<tr>
<td class="alignRight">
Start Time:</td>
<td class="alignLeft">
<span id="eventStart"></span></td>
</tr>
<tr>
<td class="alignRight">
End Time: </td>
<td class="alignLeft">
<span id="eventEnd"></span><input type="hidden" id="eventId" /></td>
</tr>
</table>
</div>
<div id="addDialog" style="font: 70% 'Trebuchet MS', sans-serif; margin: 50px;" title="Add Event">
<table cellpadding="0" class="style1">
<tr>
<td class="alignRight">
Name:</td>
<td class="alignLeft">
<input id="addEventName" type="text" size="50" /><br /></td>
</tr>
<tr>
<td class="alignRight">
Description:</td>
<td class="alignLeft">
<textarea id="addEventDesc" cols="30" rows="3" ></textarea></td>
</tr>
<tr>
<td class="alignRight">
Start Time:</td>
<td class="alignLeft">
<span id="addEventStartDate" ></span></td>
</tr>
<tr>
<td class="alignRight">
End Time:</td>
<td class="alignLeft">
<span id="addEventEndDate" ></span></td>
</tr>
</table>
</div>
<div runat="server" id="jsonDiv" />
<input type="hidden" id="hdClient" runat="server" />
</form>
</body>
</html>
You could externalize the sections that you want to reuse from this .aspx page into .ascx partials and then render them:
#{
Layout = "/Shared/_SiteLayout.cshtml";
}
<div>
#Html.Partial("foo.ascx")
</div>
some other contents
And if you want to use a WebForms view with a Razor Layout, I am afraid that it's not possible. The contrary though is possible: using a Razor view with a WebForms masterpage.
The simplest solution - render that page in an iFrame from within a partial view. Its an option but in general, bad practice in cases like this (see: Are iframes considered 'bad practice'?)
The right way to handle this is to break up that aspx into modules you can use - as Darin responded with.
I'm trying to integrate my error handling with facebox to show my errors in a cleaner way. The problem that is occurring is that when I try to call jQuery.facebox, it is telling me that it is not a function. But I am able to use facebox's rel on links throughout my application.
Head:
<script language="javascript" src="http://code.jquery.com/jquery-latest.js" type="text/javascript" />
<script language="javascript" src="/Resources/js/jquery.min.js" type="text/javascript"></script>
<script language="javascript" src="/Resources/js/jquery-1.2.2.pack.js" type="text/javascript"></script>
<link href="/Resources/css/facebox.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="/Resources/js/facebox.js" type="text/javascript" />
Then from my codebehind on the masterpage Im calling facebox like this:
ScriptManager.RegisterStartupScript(Page, typeof(string), "ErrorMessage", "jQuery.facebox({ div: '#error' });", true);
And the error div is down towards the end of the masterpage:
<div id="error" style="display:none;">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" style="background-color:#5F92CB; color:#fff; padding:6px; font-weight:bold;" align="left">Error Occurred while processing request</td>
</tr>
<tr>
<td style="padding:4px;" class="boldText"><asp:Label ID="lblErrorMessage" runat="server" /></td>
</tr>
</table>
</div>
Any help would be greatly appreciated. thanks
If you really need to use multiple versions of jquery on the same page, which is doable but not always preferable (may give headaches), you will have to use jQuery's noconflict mode. Check for more info and implementation details the following urls: link 1, link 2
It's important to know which plugins use which version of jQuery. This is because you will have to load them in the right order. You will need to load the older version plugins before the new jQuery version.
That said it's beter to run scripts when the DOM is loaded, just like Brian said, use the following snippet to accomplish that:
$(document).ready(function() { jQuery.facebox({ div: '#error' }); })
Try wrapping it in document.ready as in:
ScriptManager.RegisterStartupScript(Page, typeof(string), "ErrorMessage", "$(document).ready(function() { jQuery.facebox({ div: '#error' }); });", true);
The reason it's failing is because it's running before the facebox plugin is ready most likely.