Cách thêm site mới vào IIS trên Windows 7, 8, 10

Chào các bạn.

Khi các bạn làm lập trình web, đặc biệt là rất nhiều bạn đang lập trình ASP.NET, ASP.NET MVC trên Visual Studio, mỗi lần cần phải chạy website lên để kiểm tra thì mất rất nhiều thời gian. Bạn nhấn F5 và chờ đợi. Tâm trạng cực kỳ ức chế. (Nếu máy tính của bạn cấu hình cao, SSD mới, RAM khủng, Core 7 thế hệ mới nhất thì chúc mừng bạn, bạn không cần quan tâm đến việc phải chờ đợi là mấy).

Và một lợi ích khá hay khi bạn dùng IIS để quản lý website của mình, đó là bạn sẽ biết cách chạy thực tế của một trang web như thế nào, sau này khi deploy sản phẩm bạn không cần phải tìm hiểu quá nhiều về nó nữa.

Khi đi demo sản phẩm cho khách hàng, hay demo đồ án, project với giáo viên, bạn không cần mở Visual Studio lên, vẫn demo ngon lành. Nếu có lỗi phần nào, bạn chỉ cần back lại mà không làm gián đoạn việc trình bày. Nếu bạn F5 bằng Visual, và có lỗi, chắc chắn là ấn tượng không được hay cho lắm. (Ở trường mình học, giáo viên không chấp nhận demo sản phẩm bằng việc F5 trong Visual Studio cho các sản phẩm web ASP.NET, phần mềm thì cũng nên đóng gói khi demo)

Với những lý do trên mà mình rất hay khuyên dùng IIS để chạy trang web của bạn. Nếu bạn đã biết làm thế nào để cài đặt IIS trên Windows của bạn, thì trong bài viết này hướng dẫn bạn cách thêm Site mới vào IIS.

Bài viết liên quan: Hướng dẫn cài đặt IIS trên Windows 7, 8, 10

Đầu tiên đây là dự án của tôi. Bình thường tôi dùng F5 để show kết quả, hoặc R_Click vào file nào đó chọn View in Browser (Ctrl + Shift + W). Bây giờ tôi không muốn thế nữa, nó trông không được chuyên nghiệp cho lắm, trừ khi bạn bắt buộc phải Debug.

add-site-vao-iis-2
[Hình 1 – Dự án website ASP.NET MVC]
Tôi cần xác định xem mình đang lưu code đó ở đâu? Ok, tìm thấy rồi

add-site-vao-iis-3
[Hình 2 – Thư mục chứa code của dự án Website]
Tiếp theo tôi sẽ mở IIS lên. Bạn có thể gõ IIS vào ô search tìm kiếm cho nhanh. Nếu không tìm thấy, hãy thử kiểm tra lại nhé, tôi có link cho bạn đây: http://tuanitpro.com/huong-dan-cai-dat-iis-tren-windows-7-8

add-site-vao-iis-1
[Hình 3 – Giao diện màn hình quản lý IIS]
Tôi đăng ký phiên bản của .NET cho Application Polls. Nếu bạn không tìm thấy dòng .NET CLR Version như bên dưới, hoặc chỉ có version 2.0 thì xem qua bài viết này nhé, http://tuanitpro.com/iis-7-5-error-handler-pagehandlerfactory-integrated

add-site-vao-iis-5
[Hình 4 – Đăng ký Application Polls IIS]
OK rồi. Qua Tab Sites

Chọn Sites -> Add Website, sau đó Nhập tên Website của bạn, nhấn Select chọn Application Poll. Tôi dùng MVC 5 nên chọn .NET 4.5

Trên dòng Physical path: Bạn chọn tới đường dẫn chứa thưa mục Web của bạn, chắc chắn có file Web.config với các ứng dụng web ASP.NET , bạn xem lại hình 2 của tôi nhé.

add-site-vao-iis-6
[Hình 5 – Thêm site mới vào IIS]
Nhấn OK, đây là màn hình quản lý riêng của Site tôi mới thêm vào.

add-site-vao-iis-7
[Hình 6 – Giao diện màn hình quản lý của Site Demo]
Cuối cùng, đây là kết quả của tôi.

add-site-vao-iis-8
[Hình 7 – Tân hưởng kết quả]
Chúc các bạn thành công.

Bài viết liên quan

Cách học lập trình ASP.NET MVC tốt nhất?

Bài viết được dịch từ trang web Danylkoweb

Cách học lập trình ASP.NET MVC tốt nhất là gì?
Cách học lập trình ASP.NET MVC tốt nhất là gì?

Gần đây tôi có tham dự một cuộc hội thảo CONDG hàng tháng và đã gặp một vài người có hứng thú trong việc học cách sử dụng ASP.NET MVC.

Thật trùng hợp, tôi cũng thấy có khá nhiều người trên mạng xã hội Quora hỏi về cách thức tốt nhất để học ASP.NET MVC. Ngoài việc thảo luận về cách tốt nhất để tìm hiểu nó, tôi cũng sẽ đưa ra những cách nhanh nhất để học lập trình ASP.NET MVC.

Học những kiến thức nền tảng trước

Nếu bạn là người chỉ mới bắt đầu làm quen với ASP.NET, thì bạn cần phải học VB.NET hoặc C# trước. Cả hai ngôn ngữ lập trình này là một phần của ASP.NET, do đó bạn cần phải quen thuộc với một (hoặc cả hai) ngôn ngữ.

Khi mới bắt đầu, tôi muốn giới thiệu tới bạn một cuốn sách C# của nhà xuất bản Apress có tên là Beginning C# Object-Oriented Programming của tác giả Dan Clark. Đây là một trong những cuốn sách có nội dung khá dễ hiểu dành cho người mới bắt đầu.

Nếu bạn là một người đã có kinh nghiệm lập trình trong (Java, C, C++, v.v…), thì tôi muốn giới thiệu tới bạn một cuốn sách khác từ Apress tên là Pro C# 5.0 and the .NET 4.5 Framework của tác giả Andrew Troelsen.

Bây giờ bạn biết mọi thứ về C#, lúc này bạn sẽ chuyển sang ASP.NET MVC.

Nếu bạn đang quan tâm đến cách làm thế nào để bắt đầu học Lập trình website với ASP.NET MVC thì tôi đang có Khóa học Lập trình ASP.NET MVC dành cho bạn đấy. Hình thức học linh hoạt, giúp bạn cách tiếp cận hoàn toàn khác biệt sách vở.

Bắt đầu tìm hiểu về ASP.NET MVC

Bạn có biết ASP.NET MVC là một nền tảng mã nguồn mở của Microsoft giúp cho công việc phát triển web của bạn trở nên dễ dàng hơn so với công nghệ trước đó của họ được gọi là WebForms. MVC là cụm từ viết tắt của Model-View-Controller. Đây là một pattern về kiến trúc phần mềm đã được hình thành từ những năm 1970 và 80.

Cách nhanh nhất để tìm hiểu một công nghệ mới là tìm hiểu sâu về cách mọi thứ hoạt động. Một cách để làm điều này đó là bạn hãy tải về và xem xét vòng đời của một ứng dụng web MVC. Đây là một tài liệu rất dễ hiểu và bổ ích. Tất cả mọi thứ được giải thích cho bạn qua những chi tiết cụ thể. Thậm chí tôi đã in nó ra và dán lên tường nơi bàn làm việc của mình.

Nếu bạn đang tìm kiếm một tài liệu để đọc, thì tôi muốn giới thiệu tới bạn cuốn sách có tên là Pro ASP.NET MVC 5 của tác giả Adam Freeman. Tôi đã thu được rất nhiều kiến thức cơ bản về lập trình ASP.NET MVC trong cuốn sách này và vẫn tham khảo lại khi cần.

Những khóa học lập trình trực tuyến

Nếu bạn đang tìm kiếm một khóa học lập trình trực tuyến chất lượng, thì một trong những trang web tôi yêu thích và thường hay lui tới là Pluralsight. Pluralsight có hơn 1.000 khóa học về tất cả mọi thứ từ lập trình web tới di động và ảo hóa. Bạn phải trả $30/tháng và tham gia các khóa học không giới hạn.

Về các khóa học ASP.NET MVC, tôi muốn giới thiệu tới bạn các khóa học Pluralsight sau đây:

  • ASP.NET MVC 5 Fundamentals – Scott Allen
  • Automated ASP.NET MVC Testing: End to End – Jason Roberts
  • Architecting Applications for the Real World in .NET – Cory House

Hầu hết các khóa học này có thời lượng từ 2 đến 3 giờ, bởi vậy bạn hãy dành đủ thời gian để hoàn thành các khóa học chất lượng này nhé!

Tạo ra một sản phẩm thú vị

Cuối cùng, hãy bắt đầu áp dụng kiến thức bạn đã học được bằng cách xây dựng một sản phẩm gì đó. Bạn đã học đến lúc này, tại sao lại không bắt đầu xây dựng một ứng dụng web? Dưới đây là một vài ý tưởng để giúp bạn bắt đầu:

  • Tạo ra một ứng dụng dạng To-do list (danh sách công việc phải làm)
  • Xây dựng một danh sách liên lạc (contact list)
  • Viết một blog nhỏ

Kết luận

Ưu điểm của phương pháp học này là bạn có thể áp dụng kiến thức đã học vào thực tế một cách nhanh chóng. Và bạn cũng có thể áp dụng cách học này cho những ngôn ngữ lập trình khác.

Viết code trong các ngôn ngữ lập trình khác sẽ trở nên ngày càng dễ dàng hơn cùng với kinh nghiệm mà bạn đã tạo ra cho chính mình.

Bạn có cách nào nhanh hơn để tìm hiểu về ASP.NET MVC? Hãy để lại ý kiến của mình trong phần bình luận phía dưới nhé!

Về tác giả bài viết:

hoc-lap-trinh-truc-tuyen-online-aspnet-mvc-tot-nhat-14012016-2Tác giả bài viết là Jonathan Danylko. Anh là người có trên 30 năm kinh nghiệm lập trình và hiện nay Jonathan đang tập trung vào lĩnh vực ASP.NET MVC Best Practices, Code Exorcisms (refactorings)…

 

Nguồn bài dịch: Techmaster.vn

ASP.NET MVC: Route a .html request to an MVC route

For a SPA application I’m building I need to accept requests to .html files although I didn’t use static html files but razor views instead. To get this working inside ASP.NET MVC is a little bit harder than you would expect. So here are the required steps:

  • Add a handler mapping  in your web.config that will point *.html requests to the TransferRequestHandler. Therefore add the following section to the<system.webServer> node:

<modules runAllManagedModulesForAllRequests=”true”>

<handlers>
      <add name="HtmlFileHandler" path="*.html" verb="GET" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0"/>
  </handlers>
  • Add a custom route. Open up App_Start/RouteConfig.cs and it to the RegisterRoutes call:
routes.MapRoute( 
                name: "Durandal App Views", 
                url: "App/features/{viewName}.html", 
                defaults: new { controller = "DurandalView", action = "Get" } 
            );

For MVC 5

 [Route("news/{slug}/{id}.html")]


 

POST & GET trong lập trình web

Trong lập trình web có 2 phương thức rất quan trọng chúng ta thường dùng đó là POST & GET. Nó giống như cốt lỗi khi làm lập trình web. Bởi vì POST và GET cung cấp cho chúng ta cách lấy thông tin đầu vào từ phía client, sau đó gửi lên máy chủ Web Server để xử lý. Không có thông tin chúng ta không thể xử lý gì cả.

Nôm na thì nó như vầy:

POST & GET

GET

Phương thức GET dữ liệu sẽ được hiển thị trên thanh địa chỉ: VD: http://tuanitpro.com/?s=ajax. GET áp dụng khi dữ liệu chỉ đọc, không nên dùng khi ghi xuống CSDL. Bởi vì khi dùng GET thì thông tin quá lộ liễu. Dễ thấy nhất là khi tìm kiếm, lấy mẩu tin theo ID. http://tuanitpro.com/?id=1&categoryid=2&x=3&y=4. Khi dùng GET thì tất cả các field trong form đều hiển thị hết lên thanh địa chỉ.

GET Method

VD chúng ta có form đăng nhập như sau:

<form action="login.php" method="GET"> // Nếu chúng ta không quy định method, mặc định là GET
First name:<br>
<input type="text" name="username" value="tuanitpro">
<br>
Last name:<br>
<input type="password" name="password" value="123">
<br><br>
<input type="submit" value="Submit">
</form>

Khi chúng ta nhấn submit, nó sẽ gửi sang trang login.php như sau:
http://tuanitpro.com/login.php?username=tuanitpro&password=123. Như vậy quá nguy hiểm khi có ai đứng gần bạn.
Cách lấy dữ liệu.

PHP: $_GET["username"]
ASP.NET: Request.QueryString["tuanitpro"]
JAVA: request.getParameter("username");

Và có một điều quan trọng, các hacker rất thích dựa vào GET để khai thác tấn công SQL Injection. Nếu dùng GET các bạn nên mã hóa query string để an toàn hơn.

POST

Khác với GET, phương thức POST cũng gửi dữ liệu lên web server, nhưng nó chạy ngầm bên dưới, hoàn toàn không hiển thị. Các bạn thường thấy khi đăng ký thành viên, đăng nhập, thêm một bài mới. Tức là nó có can thiệp với cơ sở dữ liệu. Tất nhiên chúng ta hoàn toàn có thể dùng GET. Tuy nhiên vì lý do bảo mật (tất nhiên không hoàn toàn tuyệt đối), chúng ta nên dùng POST.

POST Method

Khi dùng POST

<form action="login.php" method="POST">
First name:<br>
<input type="text" name="username" value="tuanitpro"/>
<br>
Last name:<br>
<input type="password" name="password" value="123"/>
<br><br>
<input type="submit" value="Submit">
</form>

Dữ liệu cũng gửi lên Server để trang login.php xử lý, nhưng nó chạy ngầm, và không hiển thị gì cả. An toàn hơn GET rất nhiều. Bạn nào không tin thì login facebook.com thử.

Cách lấy dữ liệu.

PHP: $_POST["username"]
ASP.NET: var username = username.Text
JAVA: request.getParameter("username");

Chúc các bạn thành công.

Phân trang trong ASP.NET với CollectionPager

Khi lập trình ứng dụng ASP.NET, để trình bày dữ liệu, chúng ta hay sử dụng các control như DataList hay Repater khá nhiều so với Gridview hay các control dữ liệu khác. Ưu điểm của những control trên thì khá rõ, tuy nhiên có hạn chế là nhiều bạn gặp khó khăn để phân trang dữ liệu cho nó. Vấn đề này đặc biệt quan trọng khi dữ liệu của các bạn nhiều lên như danh sách các sản phẩm, danh sách nhân viên…..

 

Thật may mắn khi ASP.NET hỗ trợ chúng ta viết các custom control khá mạnh, chính vì thế có một control hỗ trợ phân trang rất linh hoạt và hữu ích là CollectionPager. Nó cho phép chúng ta phân trang với DataList, Repater, hỗ trợ định dạng hiển thị mạnh mẽ…

Để sử dụng các bạn cần download thư viện CollectionPager về.

Đầu tiên cần add thư viện CollectionPager.dll vào thư mục bin của ứng dụng.

Phân trang trong ASP.NET với CollectionPager
Phân trang trong ASP.NET với CollectionPager

Tạo trang mới Pager.aspx

Các bạn chú ý thêm dòng này vào đầu trang

<%@ Register TagPrefix="cc1" Namespace="SiteUtils" Assembly="CollectionPager" %>
<!--/* FileName: Pager.aspx
Project Name: AjaxDemo
Date Created: 5/12/2015 8:49:08 PM
Description: Auto-generated
Version: 1.0.0.0
Author:	Lê Thanh Tuấn - Khoa CNTT
Author Email: [email protected]
Author Mobile: 0976060432
Author URI: http://tuanitpro.com
License: 

*/
-->
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Pager.aspx.cs" Inherits="Pager" %>
<%@ Register TagPrefix="cc1" Namespace="SiteUtils" Assembly="CollectionPager" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Phân trang với ColelctionPager</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h1>Phân trang trong ASP.NET với CollectionPager</h1>
            <table>
                <thead>
                    <tr>
                        <th>StudentId</th>
                        <th>Name</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    <asp:Repeater ID="rptStudents" runat="server">
                        <ItemTemplate>
                            <tr>
                                <td><%#Eval("StudentId") %></td>
                                <td><%#Eval("Name") %></td>
                               <td> <%#Eval("Status") %></td>
                            </tr>
                        </ItemTemplate>
                    </asp:Repeater>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="3">
                             <cc1:CollectionPager ID="pager" runat="server" PageSize="20" ></cc1:CollectionPager>
                        </td>
                    </tr>
                </tfoot>
            </table>
            <hr />
           <a href="http://tuanitpro.com">http://tuanitpro.com</a>
        </div>
    </form>
</body>
</html>

Thêm dòng này vào sau DataList, Repater

 <cc1:CollectionPager ID="pager" runat="server" PageSize="20" ></cc1:CollectionPager>

Các thuộc tinh của CollectionPager

phan-trang-aspnet-collectionpager-2

Code trang Pager.aspx.cs

/* FileName: Pager.aspx.cs
Project Name: AjaxDemo
Date Created: 5/12/2015 8:49:08 PM
Description: Auto-generated
Version: 1.0.0.0
Author:	Lê Thanh Tuấn - Khoa CNTT
Author Email: [email protected]
Author Mobile: 0976060432
Author URI: http://tuanitpro.com
License: 

*/

using System;
using System.Data;
using System.Data.SqlClient;

public partial class Pager : System.Web.UI.Page
{
    string connectionString = @"Data Source = .\SQLEXPRESS; Initial Catalog = DemoDI; User ID=sa; Password=sa";
    // Code table Students
    string db = @"CREATE TABLE [dbo].[Students](
	                [StudentId] [int] IDENTITY(1,1) NOT NULL,
	                [Name] [nvarchar](max) NULL,
	                [Status] [nvarchar](max) NULL)";
    /// <summary>
    /// Get All Student form DB
    /// </summary>
    /// <returns></returns>
    public DataTable GetAllStudents()
    {
        using (SqlConnection cnn = new SqlConnection(connectionString))
        {
            cnn.Open();
            string sql = "Select * from Students";
            SqlCommand cmd = new SqlCommand(sql, cnn);
           
            DataTable table = new DataTable();
            table.Load(cmd.ExecuteReader());
            cnn.Close();
            return table;
        }
    }
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            //Set DataSource of Pager to Sample Data 
            pager.DataSource = GetAllStudents().DefaultView;

            pager.BindToControl = rptStudents;

            rptStudents.DataSource = pager.DataSourcePaged;
             
        }
    }
}

Kết quả

Phân trang ASP.NET với CollectionPager
Phân trang ASP.NET với CollectionPager

Chúc các bạn thành công.

CRUD using Ajax in ASP.NET MVC

Trong quá trình học và làm lập trình, bạn thường nghe nói nhiều đến Ajax, được khuyên dùng Ajax trong nhiều câu trả lời. Vậy ajax là gì? Ứng dụng ajax vào có khó hay không? Trong video dưới đây mình sẽ hướng dẫn các bạn cách thêm, xóa, sửa, lấy dữ liệu bằng Ajax trong ASP.NET MVC (Các bạn hoàn toàn có thể ứng dụng vào cho ngôn ngữ lập trình khác như PHP chằng hạn…)

Video Demo CRUD using Ajax in ASP.NET MVC

Tóm tắt Video
  • Ajax là gì?
  • Tạo Cơ sở dữ liệu bảng Student (lưu thông tin sinh viên)
  • Tạo dự án ASP.NET MVC mới
  • Tạo class xử lý thêm, xóa sửa
  • Tạo form thêm sinh viên
  • Viết code cho Controller
  • Viết code cho file javascript
Bạn hoàn toàn có thể ứng dụng Ajax trong nhiều trường hợp: đăng nhập, đăng ký, tìm kiếm thông tin, giỏ hàng….
Nếu bạn đã hoàn thành theo hướng dẫn mà vẫn gặp khó khăn, hãy tải mã nguồn ứng dụng tại đây:  Download

Cảm ơn bạn đọc và mình luôn đánh giá cao phản hồi của bạn.

IIS 7.5 error: Handler “PageHandlerFactory-Integrated”

IIS 7.5 error: Handler “PageHandlerFactory-Integrated” has a bad module “ManagedPipelineHandler” in its module list

Today I installed Clean Windows Web Server 2008 R2 64-bit with IIS 7.5. To my surprise opening .NET 4.0 application I received the following error:

http-error-500.21-pagehandlerfactory-integrated


IIS 7.5 Detailed Error - 500.21 - Internal Server Error


Server Error in Application "DEFAULT WEB SITE"
Internet Information Services 7.5


[Error Summary]
HTTP Error 500.21 - Internal Server Error
Handler "PageHandlerFactory-Integrated" has a bad module "ManagedPipelineHandler" in its module list


[Detailed Error Information]
Module IIS Web Core
Notification ExecuteRequestHandler
Handler PageHandlerFactory-Integrated
Error Code 0x8007000d
Requested URL http://localhost:80/default.aspx
Physical Path C:\inetpub\wwwroot\default.aspx
Logon Method Anonymous
Logon User Anonymous


[Most likely causes:]
•Managed handler is used; however, ASP.NET is not installed or is not installed completely.
•There is a typographical error in the configuration for the handler module list.


[Things you can try:]
•Install ASP.NET if you are using managed handler.
•Ensure that the handler module's name is specified correctly. Module names are case-sensitive and use the format modules="StaticFileModule, DefaultDocumentModule, DirectoryListingModule".


[Links and More Information]
IIS core does not recognize the module.
View more information »

As it turns out, some glitch caused this problem, and somehow .NET was not registered with IIS.

Running the following commands solved this issue:

%windir%\Microsoft.NET\Framework\v4.0.30319\aspnet_regiis.exe -i
%windir%\Microsoft.NET\Framework64\v4.0.30319\aspnet_regiis.exe -i

Javascript Popup Window to return value to Parent Window

Chào các bạn.
Khi lập trình, hay thiết kế web chúng ta có nhu cầu lấy dữ liệu từ một trang thứ 2 mà không muốn load lại trang chính. Chúng ta có thể dùng popup windows. Ví dụ như chọn một sản phẩm từ danh sách sản phẩm, chọn một nhân viên từ danh sách…. Tất nhiên cũng ta vẫn còn có nhiều cách khác nhau.

Javascript Popup Window to return value to parent window
Javascript Popup Window to return value to parent window

Hướng dẫn sau cho phép bạn tạo một trang popup và lấy dữ liệu đưa vào form của chúng ta. Đây chỉ là code HTML và Javascript, vậy nên bạn có thể áp dụng bất cứ chỗ nào bạn muốn (PHP, ASP.NET, MVC….).

Chúng ta cần 2 file. 1 file chứa form (parent) và 1 file chứa dữ liệu chúng ta muốn lấy (child).

Code trang parent.html

<body>
    <div class="container">
        <h3>Javascript Popup Window to return value to parent Window</h3>
        <table border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    Họ tên:&nbsp;
                </td>

                <td>
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Chọn nhân viên..." id="txtName">
                        <span class="input-group-btn">
                            <button class="btn btn-primary" type="button" onclick="SelectName()">Chọn...</button>
                        </span>
                    </div><!-- /input-group -->
                </td>
            </tr>
        </table>
        <br />
        <p>            
            <a href="http://tuanitpro.comjavascript-popup-window-to-return-value-to-parent-window">Hướng dẫn lấy dữ liệu từ Popup Javascript.</a>
        </p>
        <script type="text/javascript">
            var popup;
            function SelectName() {
                popup = window.open("/Home/Popup", "Popup", "width=400,height=300"); // Thay dường dẫn file bạn muốn mở
                popup.focus();
            }
        </script>
    </div>

Code file child.html

<body>
    <div>
        <h3>Danh sách nhân viên</h3>
        Click vào tên nhân viên để chọn
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td><a href="#" onclick="return SetName('Ngọc Trinh');">Ngọc Trinh</a></td>
                    <td>Otto</td>
                    <td>mdo</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td><a href="#" onclick="return SetName('Phương Trinh');">Phương Trinh</a></td>
                    <td>Thornton</td>
                    <td>fat</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td><a href="#" onclick="return SetName('Lệ Rơi');">Lệ Rơi</a></td>
                    <td>the Bird</td>
                    <td>twitter</td>
                </tr>
                <tr>
                    <th scope="row">4</th>
                    <td><a href="#" onclick="return SetName('Bà Tưng');">Bà Tưng</a></td>
                    <td>the Bird</td>
                    <td>twitter</td>
                </tr>
                <tr>
                    <th scope="row">5</th>
                    <td><a href="#" onclick="return SetName('Kenny Sang');">Kenny Sang</a></td>
                    <td>the Bird</td>
                    <td>twitter</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script type="text/javascript">
        function SetName(value) {
            if (window.opener != null && !window.opener.closed) {
                var txtName = window.opener.document.getElementById("txtName"); // ID này là của parent form
                txtName.value = value;
            }
            window.close();
        }
    </script>
</body>

Chúc các bạn thành công.

HTML là gì?

1. HTML là gì?

HTML (tiếng Anh, viết tắt cho HyperText Markup Language, tức là “Ngôn ngữ Đánh dấu Siêu văn bản”) là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web, nghĩa là các mẩu thông tin được trình bày trên World Wide Web. Được định nghĩa như là một ứng dụng đơn giản của SGML, vốn được sử dụng trong các tổ chức cần đến các yêu cầu xuất bản phức tạp, HTML giờ đây đã trở thành một chuẩn Internet do tổ chức World Wide Web Consortium (W3C) duy trì. Phiên bản mới nhất của nó hiện là HTML 5, với rất nhiều cải tiến. Có thể tương lai của web.

HTML nói chung tồn tại như là các tập tin văn bản chứa trên các máy tính nối vào mạng Internet. Các file này có chứa thẻ đánh dấu, nghĩa là, các chỉ thị cho chương trình về cách hiển thị hay xử lý văn bản ở dạng văn bản thuần túy. Các file này thường được truyền đi trên mạng internet thông qua giao thức mạng HTTP, và sau đó thì phần HTML của chúng sẽ được hiển thị thông qua một trình duyệt web, một loại phần mềm trực quan đảm nhiệm công việc đọc văn bản của trang cho người sử dụng), phần mềm đọc email , hay một thiết bị không dây như một chiếc điện thoại di động.

Ðể viết HTML cho trang Web, bạn hãy start chương trình NotePad của Microsoft có đi kèm theo với Windows. Ðó là một ASCII Editor. Viết xong, bạn hãy save nó vào một folder nào đó dễ nhớ. Tên của file này bắt buộc phải có tận cùng là .htm hoặc .html Ví dụ: file.htm. Ðể thưởng thức thành quả của mình, bạn hãy open file đó bằng một Browser.

2. Cấu trúc cơ bản:

Một document HTML luôn bắt đầu bằng <html> và kết thúc bằng </html> (trong đó bạn cũng có thể viết nhỏ hoặc viết hoa <html> và </html>). Nhờ có cặp TAG này mà Browser biắt được đó là HTML – document để trình duyệt. Những chữ đó chỉ để dành riêng cho Browser, người đọc chỉ nhận được những gì viết giữa cặp TAG <body> và </body>. Trong một document html, chú thích được dùng như sau:

<!-- Ðây là dòng chú thích, chỉ dành riêng cho bạn, browser bỏ qua dòng này -->

Cấu trúc chuẩn của một tài liệu HTML như sau:

<html>
   <head>
     <title>Tiêu đề của trang web</title>
   </head>
   <body>
           Phần bạn cần trình bày nội dung
   </body>
</html>

Trong “head” ta còn có thể đưa rất nhiều thông tin vào cho browser, search engine… Cái đó sẽ được đề cập đến trong một mục riêng.

3. Các thẻ cơ bản trong HTML:

Một tài liệu HTML được tạo nên từ các cặp thẻ html

  • Thẻ HTML được bắt đầu bằng dấu < (dấu nhỏ hơn) và kết thúc bằng dấu > (dấu lớn hơn)
  • Nội dung nằm giữa dấu <> là tên thẻ. Ví dụ <b>, ta đọc là thẻ b
  • Cặp thẻ HTML được tạo nên từ thẻ mở và thẻ đóng
  • Các tag đầu tiên trong một cặp là thẻ bắt đầu, các thẻ thứ hai là thẻ kết thúc
  • Thẻ Bắt đầu và thẻ kết thúc còn được gọi là thẻ mởthẻ đóng
  • Thẻ đóng kết thúc bằng dấu / (</tenthe>)
  • Nội dung của thẻ sẽ được nằm giữa thẻ đóng và thẻ mở
  • Một số thẻ chỉ có thẻ mở mà không có thẻ đóng (như các thẻ <img>, <br />,  <hr />)

Ví dụ:  Về cặp thẻ: <b>Nội dung thẻ</b>

Các thẻ thường sử dụng trong HTML

3.1. Các thẻ tiêu đề (HTML Headings):

  • Bao gồm các thẻ từ <h1> đến <h6>: thường được sử dụng để thể hiện cho tiêu đề bài viết, bản tin, các mục nhấn mạnh . . .
  • Font chữ (size) của nội dung trong các thẻ giảm từ <h1> đến <h6> (h1 lớn nhất, h6 nhỏ nhất).

Khi xuất ra ngoài thì các bạn sẽ thấy như sau:

  • Nội dung thẻ h1

  • Nội dung thẻ h2

  • Nội dung thẻ h3

  • Nội dung thẻ h4

  • Nội dung thẻ h5
  • Nội dung thẻ h6

3.2. Đoạn văn bản trong HTML (HTML Paragraphs):

Đoạn văn bản trong tài liệu HTML được định nghĩa bằng thẻ <p>

 3.3. Liên kết (HTML Links):

  • Một trang website bao gồm rất nhiều trang web (web page), các web page liên kết lại với nhau để tạo lên website.
  • Liên kết trong HTML được định nghĩa bằng cặp thẻ <a>

Các thuộc tính (Attribute) của thẻ <a>

  • href: quy định địa chỉ (url) mà liên kết trỏ tới
  • target: (đích) thuộc tính này sẽ quy định liên kết sẽ được mở ra ở đâu: _self (trang hiện tại), _blank (cửa sổ mới), . .

3.4. HTML Line Breaks <br/>:

Sử dụng <br /> để xuống dòng trong một đoạn văn bản

Tuy nhiên chúng ta không nên sử dụng thẻ <br /> trong tài liệu HTML (khuyến cáo)

3.5. HTML Lines (<hr />):

Thẻ <hr /> sẽ tạo một đường kẻ ngang trong trang HTML. <hr /> là thẻ đơn không có thẻ đóng

<hr/>

 3.6. HTML images (Hình ảnh):

Để chèn hình ảnh vào tài liệu HTML ta sử dụng thẻ <img>, đây là thẻ HTML không có thẻ đóng

Các thuộc tính của thẻ <img>

  • src=”images.jpg”: Chỉ ra đường dẫn tập tin hình ảnh (có thể là đường dẫn tuyệt đối hoặc tương đối, vấn đề này mình sẽ giải thích ở một topic khác)
  • alt=”Mô tả ”:  Nội dung sẽ được hiển thị khi đường dẫn tới tập tin hình ảnh không tồn tại
  • title=”Tiêu đề”: Nội dung hiển thị khi đưa trỏ chuột lên hình.
  • width, height: Độ rộng và độ cao của file hình được tính bằng px, nếu không có thuộc tính width, height thì mặc định sẽ lấy kích thước gốc của file hình

3.7. Các thẻ định dạng text (HTML Text Formatting):
<b> (bold): Chữ In đậm

<u> (Underline): Chữ gạch chân

<i> (italic): Chữ in nghiên

<big> (Big): Chữ lớn hơn

<em>(emphasized): Chữ in nghiêng, Nhấn mạnh hơn <i>

 Tổng kết: Bài viết này là những kiến thức cơ bản về HTML và cấu tạo cũng như các thẻ hổ trợ trong HTML. Hy vọng bài viết này sẽ là tài liệu bổ ích cho những bạn mới đầu làm quen với thiết kế website. Ở những bài viết sau chúng ta sẽ cũng tìm hiểu các vấn để khác nhằm để xây dựng một giao diện website hoàn chỉnh.

Multiple file upload in ASP.NET MVC

Khi lập trình web với ASP.NET MVC hay bất kỳ ngôn ngữ nào khác như PHP chẳng hạn, chúng ta đều gặp những tình huống liên quan đến Upload file lên hosting, dễ thấy nhất là upload hình sản phẩm cho một sản phẩm nào đó.

Với ASP.NET MVC chúng ta dễ dàng làm được điều đó, bạn có thể upload 1 file hoặc upload nhiều file (Multiple file upload) trong ASP.NET MVC cùng lúc. Nó cực kỳ hữu ích trong nhiều trường hợp. Đoạn code nhỏ sau đây sẽ minh họa cho vấn đề này.

Multiple file upload in ASP.NET MVC
Multiple file upload in ASP.NET MVC

Code HTML

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Upload file trong ASP.NET MVC</title>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var max_fields = 10; //maximum input boxes allowed
            var wrapper = $(".myinput"); //Fields wrapper
            var add_button = $(".btnAddNew"); //Add button ID

            var x = 0; //initlal text box count
            $(add_button).click(function (e) { //on add input button click
                e.preventDefault();
                if (x < max_fields) { //max input box allowed
                    x++; //text box increment
                    $(wrapper).append('<div>   <input type="file" name="uploadFile['+x+']" /><a href="#" class="btnRemove">Xóa</a></div>'); //add input box
                }
            });

            $(wrapper).on("click", ".btnRemove", function (e) { //user click on remove text
                e.preventDefault(); $(this).parent('div').remove(); x--;
            })
        });
    </script>
</head>
<body>
    <div>
        <h2>Upload file trong ASP.NET MVC</h2>
        <div style="color:red">
            @Html.Raw(TempData["Msg"])
        </div>
        <fieldset>
            <legend>Upload file</legend>
            @using (Html.BeginForm("Upload", "Upload", FormMethod.Post, new { enctype = "multipart/form-data" }))
            {

                <label>Chọn file: </label>
                <br />
                <input type="file" name="uploadFile" required /><br />

                <input type="submit" value="Upload" />

            }
        </fieldset>
        <hr />
        <h3>Upload nhiều file trong ASP.NET MVC</h3>
        <fieldset>
            <legend>Upload multi file</legend>
            @using (Html.BeginForm("UploadMulti", "Upload", FormMethod.Post, new { enctype = "multipart/form-data" }))
            {

                <label>Chọn file: </label><br />
                <a class="btnAddNew" href="#">Thêm</a>
                <br />
                <div id="myinput" class="myinput">
                    <input type="file" name="uploadFile[0]" required /><br />
                </div>
                <br />
                <input type="submit" value="Upload" />

            }
        </fieldset>
        
Chia sẻ kiến thức Lập trình .NET
</div> </body> </html>

Code cs

/**   FileName: UploadController.cs 
          Project Name: DateTime Ajax
          Date Created: 12/17/2014 11:30:58 PM 
          Description:  File Upload trong ASP.NET MVC
          Version: 0.0.0.0 
          Author: Lê Thanh Tuấn - Khoa CNTT
          Author Email: [email protected] 
          Author Mobile: 0976060432
          Author URI: http://tuanitpro.com 
          License: 
     */

    public class UploadController : Controller
    {
        // GET: Upload
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Upload(HttpPostedFileBase uploadFile)
        {
            if (ModelState.IsValid)
            {
                string filePath = Path.Combine(HttpContext.Server.MapPath("/Uploads/demo"),
                                               Path.GetFileName(uploadFile.FileName));
                uploadFile.SaveAs(filePath);
                TempData["Msg"] = string.Format("Upload file {0} thành công", uploadFile.FileName);
            }
            return RedirectToAction("Index");
        }

        [HttpPost]
        public ActionResult UploadMulti(List<HttpPostedFileBase> uploadFile)
        {
            string abc = "";
            string def = "";
            foreach (var item in uploadFile)
            {

                string filePath = Path.Combine(HttpContext.Server.MapPath("/Uploads/demo"),
                                               Path.GetFileName(item.FileName));
                item.SaveAs(filePath);

                abc = string.Format("Upload {0} file thành công", uploadFile.Count);

                def += item.FileName + "; ";


            }
            TempData["Msg"] = abc + "</br>" + def;
            return RedirectToAction("Index");
        }
    }

Live demo

Chúc các bạn thành công.