Binding Drop Down in Bootstrap with Database - c#

I'm facing a problem where I'm not able to view the data select from the database into my Drop Down in Bootstrap. See screenshots for detailed information about the problem I'm facing. I used to do that easily with ASP controls by I'm facing a difficulty doing that in bootstrap. Also, I would appreciate if there's a way to dynamically add elements to the drop-down list, I mean programmatic
enter image description hereenter image description here[enter image description here][3]

use runat server tag and populate from datatble from codebehind like this
in aspx file
<ul class="dropdown-menu">
<li runat="server" id="ddl"></li>
</ul>
and in codeBehind File
for(int i=0;i<dt.Rows.Count;i++)
{
ddl.InnerHtml += "" +dt.Rows[i]["Name"] + "";
}

Related

How to pass a full asp.net control or HTML tags from server code in C# to a specific place in HTML design?

I'm not sure if this is even possible,
but I wonder if I can generate a full control that its tags are stored in a text property to HTML page.
let's say that I have an <asp:Image ....... /> or <div><i href=""/></div> as a Text, and it is stored in a property named X in .cs file, and I want this X to be placed in a specific line in the Html page.
is that possible?
in .cs file let's say I have something like this
X = #"<asp:Image ID = ""Image111"" runat = ""server"" ImageUrl = ""img.jpg"" />";
and in the HTML file I want this:
<body>
<form id="form1" runat="server">
.
<!-- X comes here but as a real control -->
.
.
.
</form>
I'm not sure if it is possible but I wish to find a way to do this, any way.
Thanks in advance, best regards.
I would change the way youre thinking about this. Sounds like what you want to do is create a server control then pass some sort of parameter into that control which will then change the output accordingly. If you were using razor you can also have helpers which would handle this sort of thing.
This might be of interest.
Pass data from a ASP.NET page to ASCX user controls loaded dynamically
Hope that helps.

How do the link the navigation menu to the same page with different contents?

I'm setting up a website for my school project and want to link different products of category from database in the same page. How do I link to the same page but get different content when i click different hyperlink on the navigation menu?
If you website and you can create different post then you have link only post or page link in your navigation bar display menu.
you can post here any other website post link.
My you have other option make one post with all your product as category in div attribute make all in css display none
Only one category leave to normal view.
Then create same link with js query function for each your category with different id.
You will get all your product on one page.
<div id="myLinks" style=" display: none;"> Your all details for category will be here</div>
<a href="#" class="active" onclick="myFunction()" >books</a>
<script>
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
Hope you will find it helpful

How To Show ListView Data Source As Images Slider On ASCX?

I am working on a DotNetNuke project where I have to show some images from the SQL server database on the front end as a slider. I have enclosed the slider markup in asp:ListView control on ASCX page and have assigned a dataset as the data source for the asp:ListView in my code behind file.
The code is working fine but I need the images to be shown as a slider. Currently, the 2nd image is shown right at the bottom of the first image and 3rd image after the 2nd one. I want them like a slider which slides from right to left or vice versa with navigation buttons on the left and right side.
Here is my ASCX code:
<asp:ListView ID="lvFeaturedSlider" runat="server" class="full">
<ItemTemplate>
<div class="home-slide">
<a href="#">
<span class="project-title-large">MARRIOT HOTEL LOUNGE</span>
<img src="http://localhost:52829<%# Eval("Image") %>" alt="">
</a>
</div>
</ItemTemplate>
</asp:ListView>
And here is my code behind code:
private void BindSlider()
{
ProjectsController objController = new ProjectsController();
DataSet ds = new DataSet();
ds = objController.GetFeaturedProjectSlider();
if (ds.Tables[0].Rows.Count > 0)
{
lvFeaturedSlider.DataSource = ds.Tables[0].DefaultView;
lvFeaturedSlider.DataBind();
}
else
{
lvFeaturedSlider.DataSource = null;
lvFeaturedSlider.DataBind();
}
}
The navigation buttons on left and right are appearing when I hard code the markup outside ItemTemplate. But upon binding, they are not appearing and images are also not showing like a slider. I have tried enclosing the code inside ItemTemplate in a foreach statement but I can't figure out the exact format of how the items are located on ASCX page.
I know that stackoverflow frowns on answering questions by changing the subject, but ... I think that's appropriate here.
First question: Are you doing this in your theme(skin) file? If you are that's not the normal way of doing this.
Second question: Are you storing images in the DNN database? Generally that's frowned on, mainly for performance issues.
Now the right way to go about this is to install a module in your DNN installation and use it's UI and tools to configure the slider. All of that should be part of the module. There are some very good slider modules, both commercial and open source. Google, or check the DNN Store.
Now to your question. Your repeater creates a series of divs on your page, one for each image. That is why you see all of the images in a vertical layout. If you want to "slide" them, you need to add some functionality to do that. They way that is done is by adding some javascript or jQuery to turn that set of divs into a slider. Google 'jquery slider' for a lot of choices.
If you use a module that's already been developed, all of this stuff will have been done for you. You only need to supply the images, and perhaps other stuff, too.

li with runat server

I have a problem with creating dynamic <li> elements from codebehind. I need to assign runat server to li, but I didnt find a way to assign runat server, so I can't find that li control when I need to change the attributes from code behind. Is there any answer to my problem? I am new to asp.net c#.
Here is my code:
<ul class="nav nav-tabs" runat="server" id="tabList">
//First i got ul control that i assign runat=server in aspx page
</ul>
//then i create li from code behind in Page_Init()
System.Web.UI.HtmlControls.HtmlGenericControl tab = new System.Web.UI.HtmlControls.HtmlGenericControl("li");
tab.ID = "tab" + (i + 1);
tab.Attributes.Add("runat", "server");//this is not working
tab.Controls.Add(new LiteralControl("Penumpang " + (i + 1) + ""));
//then i add the li to my ul controler called tablist
this.tabList.Controls.Add(tab);
My problem is, when the page loads, I can see the li on the page, but I cannot call li from the code behind when i need to do something with it. Is there any way to call the li in code behind? Or change the li attributes when it is assigned dynamically? Sorry for bad English.
Thanks in advance.
The reason why you cannot access the <li> in your code-behind is because it is dynamically generated.
Dynamically generated controls lose their state when they are rendered on the view and for you to access them again in your code-behind when a postback occurs, you need to recreate them before playing with them. So basically, you need to recreate them everytime on your postback to access their properties and values and to manipulate with them.
Also, runat='server' wont work from code-behind. Instead of using <li>, you could also try using some ASP.NET controls such as Listview or other data-binding controls.
Hope this helps.

ASP.Net MVC: How can I easily change the tab color of my navigation menu based on the tab that I'm on?

I want to implement my navigation tabs somewhat like the ones on this site, and I've heard that this was built using ASP.Net MVC. If I'm on stackoverflow.com/users, than the "Users" menu tab is orange and all others stay grey, same if a different tab is selected.
I am pretty good with manipulating the css to change color when it's hovered or selected, etc, and adding/removing/authorizing items in the menu container, but not familiar with how to change the color of the tab based on the tab page that I'm on. Any quick and dirty way to accomplish this?
Assign a unique id to the body element of each page (e.g. <body id="users">). In ASP.NET MVC you could have the body tag in your master page written like:
<body id="<%= ViewData["bodyId"] %>">
And in the Controller methods for each page put something like ViewData["bodyId"] = "users"; to dynamically assign the id for each page.
Then in your nav markup, assign a class with the same name on the <a> tag that links to that page:
<ul>
<li>Users</li>
<li><!-- more links --></li>
</ul>
Then in the css do something like this:
body#users a.users, body#another-page a.another-page {
/* include rules for how you want the current page tab to appear */
}
That will assign your "current page" styles to any link tag with a class that matches the body tag id.
Further to what Bryan mentioned, I usually add a "CssClass" property to my view model in cases like this. It's also useful for the situation where the calculation of the CssClass is a little complex (since it can be tested in a VM).

Categories