Almost every site, in order to facilitate the user's page navigation in the website, you will not use the page navigation control. With the function of page navigation, users can easily perform jump between pages in a complex website. In the previous Web programming, you should write a good page navigation function, not that easy, but also use some tips. In ASP.NET 2.0, in order to facilitate the page navigation, add a page navigation control SiteMapDataSource, which can also be bound to different other page controls, such as TreeView, Menu, etc., very flexible, so that it is very convenient Implement different forms of page navigation, but also provide a programming interface, which can be programmed to dynamically implement page navigation controls. This article will briefly describe how to implement page navigation in ASP.NET 2.0 in ASP.NET 2.0. The structure of the page navigation and the SitemapDataSource control are in ASP.NET 2.0, to implement page navigation, you should first provide the page structure hierarchy of the entire website first in XML. We can write a XML text file called Web.SiteMap, define the structure hierarchy of the entire navigation page.
For example: We can see, where the web.sitemap file must contain root node SiteMap. Moreover, set a parent SiteMapNode node, which indicates the default site home page. Under the parent SiteMapNode node, there can be several sub-SiteMapNode nodes, representing the subsection of the website according to the hierarchy (pay attention to In the example, the included relationship between each sub-node). And in each SiteMapNode node, there are several attributes as follows: 1) URL attribute: This property indicates the address link to the column to navigate, in the definition of the web.sitemap, must be the relative address of each column. 2) Title property: This property indicates the name of each sub-column, displayed in the page. 3) Description attribute: This property is specified, then the user appears on this column when the mouse moves to the column, similar to the tooltips property.
After the SiteMap property is designed, you can build the page navigation function step by step, there are two steps: 1) Add a SiteMapDataSource control to the page. This control will automatically feel the contents of Web.siteMap. 2) Bind the SiteMapDataSource control into controls such as Sitemappath, TreeView, Menu, that is, set their data sources to the SiteMapDataSource control. After knowing the method, we will take TreeView, Menu, Sitemappath as an example, introduce how to use the SitemapDataSource control. First introduce how to use the TreeView control and SiteMapDataSource control. The TreeView tree list control is very suitable for page navigation. In order to specify, we make full use of the masterPage control in ASP.NET, first build a base framework architecture of a website.
In Visual Web Developer 2005 Beta 1, create a website, then add a web.sitemap file on the article, add a page called Navigation master type, the code is as follows: <% @ Master language = "c #"%> < HTML XMLns = "http://www.w3.org/1999/xhtml">
master page </ title> </ head> <body> <form ID = "form1" runat = "server"> <div> <Table Style = "Width: 100%; Height: 100%" border = "1"> <tr> <td style = "width: 10%> < asp: TreeView ID = "TreeView1" Runat = "server" DataSourceID = "SiteMapDataSource1" ExpandDepth = "2" ShowExpandCollapse = "False" NodeIndent = "10"> <LevelStyles> <asp: TreeNodeStyle Font-Bold = "True" Font- Underline = "false" /> <ask: TREENODESTYLE FONT-Italic = "true" font-underline = "false" /> <ask: TREENODESTYLE FONT-size = "x-small" imageurl = "bullet.gif" font-underline = "False" /> </ levelStyles> <NodeStyle ChildNodePadding = "10" /> </ ask: TreeView> </ td> <TD style = "width: 100px"> <asp: contentholder ID = "ContentPlaceHolder1" runat = "Server"> </ ask: ContentPlaceHolder> </ td> </ tr> </ table> <</p>
<p>ASP: SiteMapDataSource ID = "SitemapDataSource1" runat = "server" /> </ div> </ form> </ body> </ html> in the code above, in which the DataSoruce property in the TreeView control is specified. SiteMapDataSource control, and in the TreeView control, different nodes are also defined. After completing the masterpage page, it is equal to the establishment of the home template page that has already been established. Next, you can create a new other sub-page to inherit the MasterPage page, and create the content of your respective pages. For example, a new default.aspx page, as follows: <% @ Page Language = "C #" MasterPageFile = "Navigation.master" Title = "Default Page"%> <asp: Content ContentPlaceHolderID = "ContentPlaceHolder1" ID = "Content1" Runat = "Server"> this is the default page </ ask: Content> You can see that after the template page is established, you can create a new other sub-page, just write different content in the ContentPlaceHolderid. Yes. After running, the effect is as follows: Next, let's show how to use the Menu menu control and the SitemapDataSource control. Among them, we have the following code on the <Table Style = "Width: 100%; Height: 100%" Border = "1"> <tr height = "100px"> < TD colspan = "2" align = "left"> <ask: menu id = "menu1" runat = "server" DatasourceId = "SitemapDataSource1"> </ asp: menu> </ td> </ tr>, we increase A MENU control, which is set to SitemapDataSource1, running it below, of course, we can change the display position of the MENU control, such as changing it into a vertical style display. And for the navigation strip feature that we often see the current path of the page, you can also be easily implemented in ASP.NET 2.0, we can use the SiteMAppath control.</p>
<p>Under the MENU control in the above code, we increase the following code: <tr height = "100px"> <TD colspan = "2" align = "left"> currently selected page is: <ask: sitemappath runat = " Server "ID =" SitemAppath1 "> </ asp: sitemappath> </ td> </ tr> Be noted that just adding the SiteMAppath control because it automatically binds the SiteMapDataSource control. We add a page Member.aspx, and the code is as follows: <% @ page language = "c #" masterpagefile = "navigation.master" title = "members page"%> <ask: Content ContentPlaceHolderid = "ContentPlaceHolder1" ID = "Content1" runat = "server"> this is the members page </ ask: Content> The results are as follows: Finally, let's take a look, how to get related data in page navigation by programming.</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-65385.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>)
</div><div></div></div></div><ul class="postlist list-unstyled">
</ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="65385" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved
</div><div class="col text-right">Processed:
<b>0.085</b>, SQL:
<b>10</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script>
var debug = DEBUG = 0;
var url_rewrite_on = 1;
var url_path = './';
var forumarr = {"1":"Tech"};
var fid = 1;
var uid = 0;
var gid = 0;
xn.options.water_image_url = 'view/img/water-small.png';
</script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script>
var forum_url = 'list-1.html';
var safe_token = '9B_2FIhvrnq5AVm_2BcSGS2mEO1kTpnhjY7EPmo9WWZbDriHeu2RrokJ95kQNSkKUfqJ0LPCEzcU8pn9YF_2FtyKB2yA_3D_3D';
var body = $('body');
body.on('submit', '#form', function() {
var jthis = $(this);
var jsubmit = jthis.find('#submit');
jthis.reset();
jsubmit.button('loading');
var postdata = jthis.serializeObject();
$.xpost(jthis.attr('action'), postdata, function(code, message) {
if(code == 0) {
location.reload();
} else {
$.alert(message);
jsubmit.button('reset');
}
});
return false;
});
function resize_image() {
var jmessagelist = $('div.message');
var first_width = jmessagelist.width();
jmessagelist.each(function() {
var jdiv = $(this);
var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width();
var jmessage_width = Math.min(jdiv.width(), maxwidth);
jdiv.find('img, embed, iframe, video').each(function() {
var jimg = $(this);
var img_width = this.org_width;
var img_height = this.org_height;
if(!img_width) {
var img_width = jimg.attr('width');
var img_height = jimg.attr('height');
this.org_width = img_width;
this.org_height = img_height;
}
if(img_width > jmessage_width) {
if(this.tagName == 'IMG') {
jimg.width(jmessage_width);
jimg.css('height', 'auto');
jimg.css('cursor', 'pointer');
jimg.on('click', function() {
});
} else {
jimg.width(jmessage_width);
var height = (img_height / img_width) * jimg.width();
jimg.height(height);
}
}
});
});
}
function resize_table() {
$('div.message').each(function() {
var jdiv = $(this);
jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>');
});
}
$(function() {
resize_image();
resize_table();
$(window).on('resize', resize_image);
});
var jmessage = $('#message');
jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); });
jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); });
$('#nav li[data-active="fid-1"]').addClass('active');
</script>
