Hot File

How to create Search a Website Using ASP.NET 3.5 - screencast

View: 398    Dowload: 0   Comment: 0   Post by: hanhga  
Author: none   Category: ASP.NET Framework   Fields: Other

8 point/3 review File has been tested

In this screencast, I will assume that you have some knowledge of the framework. So, though I will explain everything to the best of my ability, I will expect you to know a few things.

Introduction

In this screencast, I will assume that you have some knowledge of the framework. So, though I will explain everything to the best of my ability, I will expect you to know a few things.

 If you are a complete novice, leave a comment and we'll work on getting a "From Scratch" article published sometime in the near future.

I'll be creating a "Blog" database. For the sake of simplicity, I'll only add a few columns: "BlogId", "BlogTitle", "BlogContents". In a real world situation, you should add things like "BlogAuthor", "BlogFeaturedImage", "CommentsId", etc. After filling these columns with some gibberish content, we're ready to build our webform.

database image

The wonderful thing about the listview control is that it allows you to maintain 100% control over your mark up. Instead of having to deal with tables, I can specify anything that I like.

<asp:ListView runat="server" ID="lv">
         
        <LayoutTemplate>
            <asp:PlaceHolder runat="server" ID="itemPlaceholder" />
        </LayoutTemplate>
         
        <ItemTemplate>
        <asp:HyperLink runat="server" ID="link"
                        Text='<%#Eval("BlogTitle") %>' 
                        NavigateUrl='<%#Eval("BlogId", "entry.aspx?BlogId={0}") %>' /> <br />           
        </ItemTemplate>
         
</asp:ListView>
  • LayoutTemplate: This template serves as the wrap for each item. For instance, if each item was inside of an "li" tag, you could add a "ul" tag in your layout template as a "wrap".
  • ItemTemplate: This will describe the layout for each item in the database. If, for example, we have 10 blog entries in the database, there will subsequently be 10 items.

Within the item template, I've specified that the listview control should only display a hyperlink. This hyperlink will have its text attribute equal to whatever the value is in the database for the associated row. I'm also going to set the NavigateUrl property (the href) to a new page. This entry.aspx page will serve to be the template for each entry. We'll specify which entry should be displayed via the querystring. (More on this in the screencast.)

LINQ is a programming model that allows you to access many different forms of data using the same syntax. With LINQ to SQL, it allows for a strongly typed way of communicating with your relational database. Imagine being able to use the same query to access XML, Objects, Relational Databases, APIs, etc. It's an incredible model and is easily my favorite new feature in ASP.NET 3.5.

Rather than embedding SQL code directly into your code behind files, you can now treat each column in your database tables like any other object. This is accomplished by creating a LINQ to SQL Class. This class automatically creates the database objects for you.

LINQ
Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSubmit.Click
 
    Dim db As New BlogDBDataContext()
 
    Dim q = From b In db.Blogs _
            Where b.BlogContents.Contains(txtSearch.Text.Trim()) Or _
                  b.BlogTitle.Contains(txtSearch.Text.Trim()) _
            Select b
 
    lv.DataSource = q
    lv.DataBind()
 
End Sub

When the user clicks on the "Search" button, this code will retrieve only the entries from the database that contain the value that was entered into the search textbox. Those values will be returned and stored in the variable "q". We then set the datasource of our listview control to "q" - and databind it.

UI

In this simple demonstration, it won't truly make a difference whether the entire page posts back or not. However in a mid to large sized site, performing an entire post back can be a pain. We're going to wrap the contents of our listview control within an update panel in order to only refresh this specific information.

<asp:UpdatePanel runat="server" ID="up">
  <Triggers>
  <asp:AsyncPostBackTrigger ControlID="btnSubmit" />
  </Triggers>
      <ContentTemplate>
       
      <asp:ListView runat="server" ID="lv">
       
      <LayoutTemplate>
          <asp:PlaceHolder runat="server" ID="itemPlaceholder" />
      </LayoutTemplate>
       
      <ItemTemplate>
      <asp:HyperLink runat="server" ID="link"
                      Text='<%#Eval("BlogTitle") %>' 
                      NavigateUrl='<%#Eval("BlogId", "entry.aspx?BlogId={0}") %>' /> <br />
                       
      </ItemTemplate>
       
      </asp:ListView>
       
      </ContentTemplate>
  </asp:UpdatePanel>

Note the "Triggers" tag. If our button was nested inside of the update panel, the update panel would automatically refresh when the button was clicked. However, in this case, our button is outside of the update panel. In such instances, we need to add an "ASyncPostBackTrigger" that points to the button that will trigger the update panel's post back.

When implementing partial page refreshes, the user can sometimes become perplexed. It may seem to him that the page is simply not responding. To compensate, we'll add the ubiquitous "loading icon" to the page. This will supply the user with some feedback to let him know that the page is in fact processing. We can use the "Update Progress" control to accomplish this task.

<asp:UpdateProgress runat="server" ID="uProgress">
    <ProgressTemplate>
        <img src="img/ajax-loader.gif" alt="Please Wait" />
    </ProgressTemplate>
</asp:UpdateProgress>

Within the Progress Template, I've added an image tag that contains my loading icon. So, while the update panel is refreshing, this loading icon will display. When the post back has completed, the icon will disappear.

How to create Search a Website Using ASP.NET 3.5 - screencast

How to create Search a Website Using ASP.NET 3.5 - screencast Posted on 11-01-2016  In this screencast, I will assume that you have some knowledge of the framework. So, though I will explain everything to the best of my ability, I will expect you to know a few things. 2.6666666666667/10 398

Comment:

To comment you must be logged in members.

Files with category

 
Newsletter Email

File suggestion for you

File top downloads

logo codetitle
Codetitle.com - library source code to share, download the file to the community
Copyright © 2015. All rights reserved. codetitle.com Develope by Vinagon .Ltd