I'm using bootstrap-table in my application to achieve pagination, global search, etc. It is a single-page application that uses Blazor framework(.net 5). The problem is when I run the app, it immediately shows a bootstrap table with pagination, search but then it disappears and turns to a regular bootstrap table.
What I tried:
My Index.razor
#page "/"
#inherits IndexBase
<div class="container mt-3 mb-3">
<table class="table table-hover" id="tblCustomers"
data-toggle="table"
data-pagination="true"
data-search="true"
data-search-align="left"
data-show-refersh="true"
data-detail-view="true"
data-detail-formatter="detailFormatter">
<thead>
<tr>
<th data-field="Id" data-width="18" data-align="center" data-sortable="true">Cust Id</th>
<th data-field="Name" data-width="18" data-align="center" data-sortable="true">Cust Name</th>
<th data-field="GId" data-width="18" data-align="center" data-sortable="true">G Id</th>
<th data-field="AccNo" data-width="18" data-align="center" data-sortable="true">Acc No</th>
<th data-field="Active" data-width="18" data-align="center" data-sortable="true">Active</th>
<th data-field="Key" data-width="18" data-align="center" data-sortable="true">Key</th>
<th data-field="action" data-align="center">Action</th>
</tr>
</thead>
<tbody>
#if (Customers == null)
{
<tr rowspan="10">
<td colspan="8" style="text-align:center"> <div class="spinner">
<img src="/images/loader.gif" height="60" width="40"/>
</div>
</td>
</tr>
}
else
#foreach (var cust in Customers)
{
<tr>
<td>#cust.CustomerId</td>
<td>#cust.CustomerName</td>
<td>#cust.GId</td>
<td>#cust.AccNo</td>
<td>#cust.IsActive</td>
<td>Not available</td>
<td>
</i>
</i>
</td>
</tr>
}
</tbody>
</table>
</div>
_host.cshtml
#page "/"
#namespace MyBlazorApp.Pages
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MyBlazorApp</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
<link href="MyBlazorApp.styles.css" rel="stylesheet" />
<link rel="stylesheet" href="~/css/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="~/js/bootstrap-table/bootstrap-table.min.css" />
<link rel="stylesheet" href="~/css/custom/main.css" />
<link rel="stylesheet" href="~/css/custom/header.css" />
<link rel="stylesheet" href="~/css/custom/index.css" />
<link rel="stylesheet" href="~/css/custom/customer.css" />
<style type="text/css">
/* width */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar:horizontal {
width: 8px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 5px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #555;
border-radius: 5px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
</style>
</head>
<body>
<component type="typeof(App)" render-mode="ServerPrerendered" />
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
Reload
<a class="dismiss">đŸ—™</a>
</div>
<script src="_framework/blazor.server.js"></script>
<script src="~/js/jquery/jquery-3.6.0.min.js"></script>
<script src="~/js/popper/popper.min.js"></script>
<script src="~/js/bootstrap/bootstrap.min.js"></script>
<script src="~/js/bootstrap-table/bootstrap-table.min.js"></script>
<script src="~/js/jquery-resizable/dist/jquery.resizableColumns.min.js"></script>
<script src="~/js/bootstrap-table/extensions/resizable/bootstrap-table-resizable.js"></script>
<script>
$(function () {
$(".search").append('<span><i class="fa fa-search fa-search-custom" aria-hidden="true"></i></span>');
/* add the span inside search div with append box*/
})
function detailFormatter(index, row) {
//debugger;
var html = [];
$.each(row, function (key, value) {
if (key == 'Id' || key == 'Name' || key == 'AccNo' || key == 'Active') {
html.push('<p class="row" style="width:50%;float:right"><b col="col-md-2">' + key + '</b><span class="col-md-10">: ' + value + '</span></p>');
}
});
return html.join('');
}
</script>
</body>
</html>
What am I missing? Any help would be much appreciated.
I had the same problem with bootstrap-table in a Blazor app. I think I got a solution.
For some reason, Blazor loads js scripts at the beginning and it seems bootstrap-table is loading correctly. But after loading, the table you want to apply bootstrap, stays in a raw style and state. I don't really know why, I guess it's a kind of Blazor behavior. (I think we should learn exactly how blazor works to know the real reason).
Anyway, few weeks ago I applied a pdf viewer tool and I follow the installing instructions. It was the same that other tools, call some js and css files... But as I was following the Blazor installing steps, I noticed that they do a kind of JS running function after render, not just importing files.
So, after this explanation I could make bootstrap-table work doing the following.
Import css and js files as usual into _Host.cshtml file (Or the file you're using as main file). I installed bootstrap-table files into my project but I think it could work with CDN. Of course, JS files just before close the body tag.
///CSS FILES
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="bootstrap-icons/font/bootstrap-icons.css" />
<link rel="stylesheet" href="bootstrap-table/bootstrap-table.min.css" />
///JS FILES
<script src="jquery/jquery.min.js"></script>
<script src="bootstrap-table/bootstrap-table.min.js"></script>
Create a js custom file (This is going to contain the code to initialize the bootstrap-table once page is rendered). And add it after bootstrap-table.min.js reference.
<script src="js/bootstrapTableScript.js"></script>
Write next code inside that file. (bootstrapTableScript.js file)
window.bootstrapTableFunction = {
initBootstrapTable: function () {
$('[data-toggle="table"]').bootstrapTable();
}
};
Go to the file you want to insert the table and inject IJSRuntime interface, so you could call JS functions in Runtime
#inject IJSRuntime JSRuntime
In the same razor file, insert the html table code. I used the bootstrap page sample table
<table data-toggle="table" data-search="true">
<thead>
<tr>
<th>Item ID</th>
<th>Item Name</th>
<th>Item Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Item 1</td>
<td>$1</td>
</tr>
<tr>
<td>2</td>
<td>Item 2</td>
<td>$2</td>
</tr>
</tbody>
</table>
Write this code in the same razor file (where the table is) but inside code section.
protected override async void OnAfterRender(bool firstRender)
{
if (firstRender)
{
await JSRuntime.InvokeAsync<object>("bootstrapTableFunction.initBootstrapTable");
}
}
Try it! It should work
This is how you should see
So, this is how it works... That OnAfterRender event is going to be ran when the razor page is already rendered. At that time, we are going to call an object called bootstrapTableFunction (the one is in your bootstrapTableScript file... Step 2 and 3). That object has a function called initBootstrapTable that is going to initialize the code that transform a simple table into a bootstrap-table. And that's it! You have your bootstrap-table.
This table example has the search function applied. So, if you want other functions like sort or so, you have to add data-sort and that kind of suff in html table, or inside bootstrapTableScript.js if you want it by javascript. Just like the official bootstrap-table documentation says.
Hope this be useful!
I'm trying to get the id of the second iframe which is iframe2 in the codebehind to add some css styling. This is my html:
<body>
<form id="Form1" method="post" runat="server">
<table id="Table1">
<tr>
<td>
<iframe id="iframe1">
</iframe>
<uc1 id="uc1"></uc1>
</td>
</tr>
<tr>
<td>
<asp:Panel id="Panel">
</asp:Panel>
<uc1 id="uc2">
</uc1>
</td>
<td>
<iframe id="iframe2">
</iframe>
</td>
</tr>
</table>
</form>
</body>
For some reason I'm not able to get the iframe id in C#. How can I do that please?
Accessing the Iframe
Ensure that you add the runat="server" attribute to the <iframe>:
<iframe id="iframe2" runat="server"></iframe>
This will enable to to access it in your code-behind via the FindControl() method:
// Access your iframe
var iframe = FindControl("iframe2");
iframe.Style.Add("border", "2px solid red");
Or directly by using its assigned id:
iframe2.Style.Add("border", "2px solid red");
Regarding Styling
You mention that you are explicitly trying to style this element. If that is the case, you should likely be using CSS as opposed to setting inline styles on the <iframe> element itself.
For instance, you could apply styles as such to target that element:
<style type='text/css'>
#iframe {
/* Place your styles here (i.e. border: 4px solid red, etc.) */
}
</style>
It's worth noting that actually styling an <iframe> is going to only style the element itself, as the content that is rendered within it is essentially "sandboxed" within the element and won't be affected by some of the assigned styles.
Change the IFrame to have runat="server" you can then get to it on the server side.
<iframe ID="MyIframe" src="" runat="server"></iframe>
You can set set items in C#.
MyIframe.Attributes["src"] = Page.ResolveClientUrl("~/ThisOtherPage.aspx");
MyIframe.Attributes.Add("style", "cursor:pointer;");
<div class="reporting-graph-zone">
<input id="ctl00_m_g_a3080099_ed02_44e3_afe2_e6b89d1a2cee_ctl00_hiCulture" name="ctl00$m$g_a3080099_ed02_44e3_afe2_e6b89d1a2cee$ctl00$hiCulture" value="culture=en-US" type="hidden">
<iframe src="/PL/__LI_Partners/FederationMetadata/WIF.axd?ReturnUrl=%2frdPage.aspx%3frdReport%3dSingleDashboard%26culture%3den-US" style="">
<!DOCTYPE html>
<html id="yui_3_1_1487760521746_220" class="yui3-js-enabled" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:rdxslextension="urn:rdXslExtension" style="cursor: auto;">
<head>
<body id="yui_3_1_1487760521746_219" onload="rdBodyLoad()">
<div id="yui_3_1_1487760521746_369" class="yui3-widget rdquicktip yui3-widget-positioned rdquicktip-hidden" style="left: 0px; top: 0px;">
<form id="yui_3_1_1487760521746_218" name="rdForm" method="POST">
<table id="rdRows-1" class="rdDashboardPanelContainer" style="width:100%;" cellspacing="0">
<tbody id="yui_3_1_1487760521746_215">,
<tr id="rdDashboardMenu">
I am unable to find element "rdDashboardMenu" when html document is inside an iframe.
Could anyone help me out?
You should first select frame using below code:
driver.switchTo().frame(0);
After switching frame select element
while hitting ESC key twice when on a page containing an update panel with a any control inside, say textbox or listbox im getting a System.ArgumentException: Invalid postback or callback argument. I have checked in remaining browsers its working fine but in Internet Explorer 8 its creating above said problem.
the possible solution i found, is making EnableEventValidation="false" either at page level or webconfig or disabling escape key. i dont want to go with 2 former solutions as either my site security will compromise and i dont want my escape key to disable.
Any Suggestions/Ideas appreciated.
Code :
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"
EnablePageMethods="true">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanelHeader" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="Search">
<table style="empty-cells: hide;" width="100%" cellpadding="0" cellspacing="0" class="controlsTable">
<tr>
<td class="td4Caption">
Some Text
</td>
<td class="tdpadding">
<asp:TextBox ID="txtbox" ClientIDMode="Static" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:ImageButton SkinID="Export" AlternateText="Generate Report" ToolTip="Generate Report"
ID="ibtnGenerateReport" ValidationGroup="Generate" runat="server" OnClick="ibtnGenerateReport_Click" />
</td>
</tr>
</table>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
•Another thing you can try is: EnablePartialRendering="false" to asp:ScriptManager
Make sure your site is rendering with the proper compatibility by using "edge":
< meta http-equiv="X-UA-Compatible" content="edge" />
If nothing above works, please try controlling the exception handler like this:
http://encosia.com/how-to-improve-aspnet-ajax-error-handling/
I am trying to create a simple user control that is a slider. When I add a AjaxToolkit SliderExtender to the user control I get this (*&$#()## error:
Server Error in '/' Application. The Controls collection cannot be modified because the control contains code blocks (i.e. `<% ... %>`). Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.
Exception Details: System.Web.HttpException: The Controls collection cannot be modified because the control contains code blocks (i.e. `<% ... %>`).
Source Error:
An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.
Stack Trace:
[HttpException (0x80004005): The Controls collection cannot be modified because the control contains code blocks (i.e. `<% ... %>`).] System.Web.UI.ControlCollection.Add(Control child) +8677431 AjaxControlToolkit.ScriptObjectBuilder.RegisterCssReferences(Control control) in d:\E\AjaxTk-AjaxControlToolkit\Release\AjaxControlToolkit\ExtenderBase\ScriptObjectBuilder.cs:293 AjaxControlToolkit.ExtenderControlBase.OnLoad(EventArgs e) in d:\E\AjaxTk-AjaxControlToolkit\Release\AjaxControlToolkit\ExtenderBase\ExtenderControlBase.cs:306 System.Web.UI.Control.LoadRecursive()
+50 System.Web.UI.Control.LoadRecursive()
+141 System.Web.UI.Control.LoadRecursive()
+141 System.Web.UI.Control.LoadRecursive()
+141 System.Web.UI.Control.LoadRecursive()
+141 System.Web.UI.Control.LoadRecursive()
+141 System.Web.UI.Control.LoadRecursive()
+141 System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +627
Version Information: Microsoft .NET Framework Version:2.0.50727.3074; ASP.NET Version:2.0.50727.3074
I have tried putting a placeholder in the user control and adding the textbox and slider extender to the placeholder programmatically and I still get the error.
Here is the simple code:
<table cellpadding="0" cellspacing="0" style="width:100%">
<tbody>
<tr>
<td></td>
<td>
<asp:Label ID="lblMaxValue" runat="server" Text="Maximum" CssClass="float_right" />
<asp:Label ID="lblMinValue" runat="server" Text="Minimum" />
</td>
</tr>
<tr>
<td style="width:60%;">
<asp:CheckBox ID="chkOn" runat="server" />
<asp:Label ID="lblPrefix" runat="server" />:
<asp:Label ID="lblSliderValue" runat="server" />
<asp:Label ID="lblSuffix" runat="server" />
</td>
<td style="text-align:right;width:40%;">
<asp:TextBox ID="txtSlider" runat="server" Text="50" style="display:none;" />
<ajaxToolkit:SliderExtender ID="seSlider" runat="server"
BehaviorID="seSlider"
TargetControlID="txtSlider"
BoundControlID="lblSliderValue"
Orientation="Horizontal"
EnableHandleAnimation="true"
Length="200"
Minimum="0"
Maximum="100"
Steps="1" />
</td>
</tr>
</tbody>
</table>
What is the problem?
First, start the code block with <%# instead of <%= :
<head id="head1" runat="server">
<title>My Page</title>
<link href="css/common.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%# ResolveUrl("~/javascript/leesUtils.js") %>"></script>
</head>
This changes the code block from a Response.Write code block to a databinding expression.
Since <%# ... %> databinding expressions aren't code blocks, the CLR won't complain. Then in the code for the master page, you'd add the following:
protected void Page_Load(object sender, EventArgs e)
{
Page.Header.DataBind();
}
I just ran into this problem as well but found another solution.
I found that wrapping the code blocks with a asp:PlaceHolder-tag solves the problem.
<asp:PlaceHolder runat="server">
<meta name="ROBOTS" content="<%= this.ViewData["RobotsMeta"] %>" />
</asp:PlaceHolder>
(The CMS I'm using is inserting into the head-section from some code behind which restricted me from adding custom control blocks with various information like meta-tags etc so this is the only way it works for me.)
I can confirm that moving the javascript with <% %> tags from the head to the form tag fixes this error
http://italez.wordpress.com/2010/06/22/ajaxcontroltoolkit-calendarextender-e-strana-eccezione/
Place the JavaScript under a div tag.
<div runat="server"> //div tag must have runat server
//Your JavaScript code goes here....
</div>
It'll work!!
you can do the same functionality if you are using script manager in your page.
you have to just register the script like this
<asp:ScriptManager ID="ScriptManager1" runat="server" LoadScriptsBeforeUI="true" EnablePageMethods="true">
<Scripts>
<asp:ScriptReference Path="~/Styles/javascript/jquery.min.js" />
</Scripts>
</asp:ScriptManager>
I tried using <%# %> with no success. Then I changed Page.Header.DataBind(); in my code behind to this.Header.DataBind(); and it worked fine.
I had same issue in the user control. My page that was hosting the control had comments in the head tag, I removed those comments, everything worked afterwards. Some posts also suggest removing scripts from head and placing them in the body.
In my case, I have replaced <%= %> with <%# %>, and it worked!
Keep the java script code inside the body tag
<body>
<script type="text/javascript">
</script>
</body>
The "<%#" databinding technique will not directly work inside <link> tags in the <head> tag:
<head runat="server">
<link rel="stylesheet" type="text/css"
href="css/style.css?v=<%# My.Constants.CSS_VERSION %>" />
</head>
The above code will evaluate to
<head>
<link rel="stylesheet" type="text/css"
href="css/style.css?v=<%# My.Constants.CSS_VERSION %>" />
</head>
Instead, you should do the following (note the two double quotes inside):
<head runat="server">
<link rel="stylesheet" type="text/css"
href="css/style.css?v=<%# "" + My.Constants.CSS_VERSION %>" />
</head>
And you will get the desired result:
<head>
<link rel="stylesheet" type="text/css" href="css/style.css?v=1.5" />
</head>
I had this problem, but not via the Header. My placeholder was in the body. So I replaced all the <%= with <%# and did
protected void Page_Load(object sender, EventArgs e)
{
Page.Header.DataBind();
}
and it worked.
An alternative way is to have another .aspx page act as the page you want to link to.
This is what the header of the Masterpage looks like:
<head runat="server">
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<link href="CSS/AccordionStyles.aspx" rel="stylesheet" type="text/css" />
</head>
The referenced .aspx form contains your content:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="AccordionStyles.aspx.cs" Inherits="IntranetConnectCMS.CSS.AccordionStyles" %>
.AccordionHeader
{
cursor: pointer;
background-image: url(<%=ResolveUrl("~/Images/Backgrounds/AccordionPaneHeaderClosed.png") %>);
background-repeat: no-repeat;
}
.AccordionHeaderSelected
{
cursor: pointer;
background-image: url(<%=ResolveUrl("~/Images/Backgrounds/AccordionPaneHeaderOpen.png") %>);
background-repeat: no-repeat;
}
.AccordionContent
{
background-image: url(<%=ResolveUrl("~/Images/Backgrounds/AccordionPaneContent.png") %>);
background-repeat: no-repeat;
}
Finally, you need the .aspx page to tell the browser you're sending CSS content:
protected void Page_Load(object sender, EventArgs e)
{
Response.ContentType = "text/css";
}
I also faced the same issue. I found the solutions like following.
Solution 1:
I kept my script tag in the body.
<body>
<form> . . . . </form>
<script type="text/javascript" src="<%= My.Working.Common.Util.GetSiteLocation()%>Scripts/Common.js"></script> </body>
Now conflicts regarding the tags will resolve.
Solution 2:
We can also solve this one of the above solutions like Replace the code block with <%# instead of <%= But the problem is it will give only relative path. If you want really absolute path it won't work.
Solution 1 works for me. Next is your choice.
I had the same problem, but it didn't have anything to do with JavaScript. Consider this code:
<input id="hdnTest" type="hidden" value='<%= hdnValue %>' />
<asp:PlaceHolder ID="phWrapper" runat="server"></asp:PlaceHolder>
<asp:PlaceHolder ID="phContent" runat="server" Visible="false">
<b>test content</b>
</asp:PlaceHolder>
In this situation you'll get the same error even though PlaceHolders don't have any harmful code blocks, it happens because of the non-server control hdnTest uses code blocks.
Just add runat=server to the hdnTest and the problem is solved.
I solved an error similar to this by putting the <script> inside a contentplaceholder inside the <head> instead of putting the <script> outside the said contentplaceholder inside the <head>
I had the same issue with different circumstances.
I had simple element inside the body tag.
The solution was:
<asp:PlaceHolder ID="container" runat="server">
<a id="child" href="<%# variable %>">Change me</a>
</asp:PlaceHolder>
protected new void Page_Load(object sender, EventArgs e)
{
Page.Form.DataBind(); // I neded to Call DataBind on Form not on Header
container.InnerHtml = "Simple text";
}
I had the same issue with my system, I removed the JavaScript code from the of my page and put it at body just before closing body tag
For some cases ResolveUrl and ResolveClientUrl works but not all times especially in case of js script files. What happens is it works for some pages but when you navigate to some other pages it might not work due to relative path of that particular page.
So finally my suggestion is always do a complete recheck of your site pages for whether all your javascript references are fine or not.
Open your site in Google Chrome -> right click on the page -> click view source page -> HTML appears -> now click your JS hyperlinks; if its working fine it should open the js file in another browser window, otherwise it will not open.
Try writing your java script code outside the head tag it will definitely work.Its resolved when i copy and paste my Java Script code to the bottom of page. In the previous its placed in HEAD tag now just before closing the form tag.
</div>
<script>
function validate() {
try {
var username = document.getElementById("<%=txtUserName.ClientID%>").value;
var password = document.getElementById("<%=txtPWD.ClientID%>").value;
if (username == "" && password == "")
alert("Enter Username and Passowrd");
else {
if (username == "")
alert("Enter Username");
else if (password == "")
alert("Enter Password");
}
}
catch (err) {
}
}
</script>
</form>
Remove the part which has server tags and place it somewhere else if you want to add dynamic controls from code behind
I removed my JavaScript from the head section of page and added it to the body of the page and got it working
In my case I got this error because I was wrongly setting InnerText to a div with html inside it.
Example:
SuccessMessagesContainer.InnerText = "";
<div class="SuccessMessages ui-state-success" style="height: 25px; display: none;" id="SuccessMessagesContainer" runat="server">
<table>
<tr>
<td style="width: 80px; vertical-align: middle; height: 18px; text-align: center;">
<img src="<%=Image_success_icn %>" style="margin: 0 auto; height: 18px;
width: 18px;" />
</td>
<td id="SuccessMessage" style="vertical-align: middle;" class="SuccessMessage" runat="server" >
</td>
</tr>
</table>
</div>
Tags <%= %> not works into a tag with runat="server". Move your code with <%= %> into runat="server" to an other tag (body, head, ...), or remove runat="server" from container.