Can any one give me an example on how to build a bootstrap navbar within an asp.net website dynamically from database according to the role of the logged user (sth like populating asp menu) and keeping the same style of the navbar.
any help will be very appreciated as i have searched too much and i can't find a solution.
The nav bar in twitter bootstrap is essentially just an unordered list. So make the code as neat or as messy as you prefer, but create a div with an id and a runat="server", and reference that in your code behind. For example, your markup could read:
<div id="myNav" runat="server"/>
In your code behind, read your data items from the database, generate the appropriate HTML, and write it to the DIV. One such example:
Dim sb as New Stringbuilder()
sb.append("<ul>")
sb.append("<li>Item 1</li>")
sb.append("<li>Item 2</li>")
sb.append("</ul>")
myNav.InnerHTML = sb.ToString()
Related
I have a simple WebApp application that reads the data from google sheet and displays in HTML using materialize css( 1.0.0), JS. I am new to this stack of tools. HTML page has 2 containers and bottom one supposed to be populated (using innerHTML assignment)based on the selection on the top container. The bottom container content is simple card contents in table format. I want to put a HTML Select object with List of values to be displayed and created a Appscript function. I am assigning the function output to innerHTML like this.
-- JS
function generateCards(text_card){
document.getElementById("container-id").innerHTML += text_card;
}
function createAuthorCards(authorName) {
document.getElementById("container-id").innerHTML = "";
google.script.run.withSuccessHandler(generateCards).getCardDynamicText(authorName) ;
}
--
If put copy/paste the function output in HTML it works( goes through rendering when refereshing), but if i use InnerHTML, the listbox is disabled, but all else seems ok. needed imageplease see the 2 attachments needed and missing_listbox images.enter image description here Is there any limitations of using innerHTML in webApp?
I was using google Webapp. It looks google doesn't allow the editing of dynamically created items. So I ended up using Modals to make the selections and save it.
I want to create a custom content block in Sitefinity so I can wrap an tag around it and pick up my CSS.
I created a custom widget, but I'm not sure how to make it a content block. I cannot find documentation on this, but I'm sure it is a common occurrence. Basically, I want a drag out content block that does this:
<aside>
[code for content block]
</aside>
I don't know how to generate the [content block] code in .net. I am new to .net development. I am using VB but can use C#.
Any help would be greatly appreciated. Thank you.
Maria
You can create a custom Layout Control which can be used in conjunction with other controls, such as Content Blocks.
To create a Layout control, open your project in Visual Studio and create a new control (.ascx) file in the WebApp project. I normally put mine in a ~/LayoutControls folder which I create. In that control file, enter something like:
<div runat="server" class="sf_cols">
<aside>
<div id="Div1" runat="server" class="sf_colsIn"></div>
</aside>
</div>
You'll notice that besides the markup you want, the aside tag, I have two other divs with some specifics. These are needed so Sitefinity can treat this as a control, and be able to dynamically inject content into it.
A div with class sf_cols is common to all controls and the div with class sf_colsIn (id="Div1") is where control you drop onto the layout control will go. So there is an outer wrapper div, your markup, and an inner div. It's the inner div where your content will go.
Save your file, compile the project, then register the control in Sitefinity.
To do that, login to the backend then navigate to Administration | Settings | Advanced Settings | Toolboxes | Toolboxes | PageLayouts | Sections. I normally add a new section with these properties:
name=Custom,Title=Custom,Description=Custom Layouts,Global resourceClassId=PageResources
Then select your new section, select Tools, then Create New. The Name, Title, Description are whatever makes sense for you control. The Control CLR Type should be Telerik.Sitefinity.Web.UI.LayoutControl, Telerik.Sitefinity and the Layout Template should be the path to your ascx file, i.e. ~/LayoutControls/AsideBlock.ascx. The other properties can have the default values (most are just blank). Then Save.
Now when you are editing a page, click the 'Layout' button in the right hand column and you will see a 'Custom' Section which contains your control. Drag it onto the page, then go back to 'Content' editing (using the button in the right hand column). You will see your layout control and drop a content block onto it.
Add content normally. When the page renders, the content will be wrapped in the aside tag.
the easiest way to do this is with an external template for the content block. The template you want is ContentBlock.ascx and is in the SDK.
Copy this file to your project then add the wrapping tags around the contentHtml literal control (which renders the actual content of the control).
Then open the Advanced settings of the content block widget you want to use this template and specifiy the LayoutTemplatePath. It should have a default value of something like "~/SFRes/Telerik.Sitefinity.Resources.Templates.Backend.GenericContent.ContentBlock.ascx".
Simply change this to the virtual path to the template you created, then save and publish the page.
The content block will render with your template instead of the default one, with any markup you add.
I hope this is helpful!
I'm going to create a more detailed blog post that walks through this process and will link it here when I'm done. thank you for the inspiration!
we have requirement currently as shows in below image.
have googled much but i don't have specific key word so i couldn't find any thing.
we have a requirement to display link in navigation bar so user can select appropriate page without going forth and back ...by directly selecting the required page link.
how could it be possible to do inside asp.net as i have shows in image below.
Thank you so much........
You can have a look at Navigation here http://www.w3schools.com/aspnet/aspnet_navigation.asp and Site Map here http://msdn.microsoft.com/en-us/library/yy2ykkab.aspx
As basic as it can be, you can use a list on the pages where you want to show links.
Let's say you have three pages A, B and C. On each page add a list like below.
So you go about like this
<span>You are here</span>
<ul id="navList" runat="server">
</ul>
On page A's codebehind add the following to your list.
HyperLink nav=new HyperLink();
nav.NavigateUrl="A.aspx";//You can also pass parameters here.
HtmlGenericControl li=new HtmlGenericControl("<li>");
HtmlGenericControl span=new HtmlGenericControl("<span>");
span.InnerText=">>";
li.Controls.Add(span);
li.Controls.Add(nav);
navList.Controls.Add(li);
Similarly for B
HyperLink nav=new HyperLink();
nav.NavigateUrl="A.aspx";//You can also pass parameters here.
HtmlGenericControl li=new HtmlGenericControl("<li>");
HtmlGenericControl span=new HtmlGenericControl("<span>");
span.InnerText=">>";
li.Controls.Add(span);
li.Controls.Add(nav);
navList.Controls.Add(li);
HyperLink nav2=new HyperLink();
nav2.NavigateUrl="B.aspx";//You can also pass parameters here.
HtmlGenericControl li2=new HtmlGenericControl("<li>");
HtmlGenericControl span2=new HtmlGenericControl("<span>");
span2.InnerText=">>";
li2.Controls.Add(span);
li2.Controls.Add(nav);
navList.Controls.Add(li2);
And similarly for C.
I have a table with some data. All data is contained in dropdownboxes and textbox. But it isn't easy to see, what is newly written input and what is data from the database.
So I want to create a (edit) after these boxes, and replace the boxes with a literal where the contained value in the dropdownbox stands. When the edit-button is pushed the literal goes away and the dropdownbox appears instead, so it is possible to edit the data. This is all, the jQuery don't have to save the data to database, I have functionality to that in a save-button.
I don't want to use any extra plugin to jQuery, because it seems to be a fairly simpel task.
Any good ideas?
Thw whole code i cant write here, change as your wish.I didn't clear your question.
try this
when click edit
$(document).ready(function(){
$(".edit").click(){
$(".dropdown").show("slow");
$(".edit").hide("slow");
});
stylesheet.css
.dropdown
{
display:none;
}
after edit just reverse the code;
My requirement is to have database based help system for asp.net website, as shown in the image below. i have searched web but could not find even remotely related solution.
DNN Help System http://img3.imageshack.us/img3/6720/dnnhelpimage20091125.jpg
You could assign each help item a unique ID (perhaps GUID to make it easier to generate by the developer enabling help for that item).
Clicking on the link opens a dialog, tooltip, new window, whatever. Just have the UI load the help text by ID from the database.
To make this easier to implement in the UI, there are a few ways. Perhaps you can create a jQuery client-side behavior.
your HTML would look something like:
<span class="help" id="#{unique-id-here}">Admin</admin>
and you could have jQuery on DOM load:
$(function() {
var help = $(".help");
help.prepend("<img src=\"path/to/images/help.png\" />");
help.click(function() {
//do something with this.id; open a popup, a title bar, whatever.
}
});
We did it on our site by doing the following:
We have a HelpTopics database with a HelpTopicId and HelpTopicText
We create an aspx page that displays the HelpTopicText based on the HelptopicId passed in the querystring.
We set up a css class for the A tag that displays the link to the help with the question mark image.
We created a UserControl named TitleandHelp that contained a link to the page mentioned in step 2 and the style for the link set to step 3 above: The usercontrol has a public rpoperty for the title and one for the topicID (We called it HelpContext).
We add the usercontrol to the aspx page where appropriate
<uc2:titleandhelp ID="titleandhelp1" runat="server" HelpContext="4" PageTitle="Forgot Password" />
it may sound like a lot of work, but really it only takes a half hour or so to do all of the setup. The rest of the work lies in populating the table and dragging the usercontrol onto the pages where appropriate.