Chuyển tới nội dung
Home » Mvc 5 In Visual Studio 2012 | Xuất Câu “Hello Howkteam” Trong Asp.Net Mvc

Mvc 5 In Visual Studio 2012 | Xuất Câu “Hello Howkteam” Trong Asp.Net Mvc

Microsoft .Net MVC 5 - Basic Template Setup in Visual Studio 2013

Hướng dẫn tạo 1 project ASP.Net MVC, giải thích cấu trúc và vai trò của View, Controller

Đầu tiên các bạn mở Visual Studio lên, sau đó ngay tại thanh menu bạn chọn FILE >New >Project hoặc là cách đơn giản hơn là bạn nhấn tổ hợp phím tắt Ctrl + Shift + N

Sau khi bạn làm xong bước trên, chúng ta tiếp tục làm theo như hình nhé.

  • Sau khi bảng hội thoại hiện lên, bạn chọn Visual C# > Web > ASP.NET Web Application.
  • Tại ô (4) bên cạnh vị trí Name bạn đặt tên cho project.
  • Chọn Browse… để chọn nơi lưu project.
  • Cuối cùng bạn chọn OK.

Sau khi bạn nhấn OK ở bước trên thì sẽ có 1 bảng hội thoại xuất hiện các bạn làm theo hình nhé

  • Các bạn lưu ý trong phần Select a template có rất nhiều lựa chọn, tuy nhiên để học khóa học này các bạn chọn MVC nhé, sau đó chọn OK để kết thúc việc tạo project.

Sau khi hoàn thành việc tạo project, bây giờ chúng ta cùng đi phân tích cấu trúc của nó nhé.

  • Như hình mình show ra cho các bạn ở phía trên, vùng màu đỏ chính là Controller, vùng màu xanh là Models và vùng màu tím chính là Views trong mô hình MVC
  • Tương ứng với 1 controller thì sẽ có 1 view đi kèm theo, mặc định project khi tạo gồm có 2 controller đó là Account và Home vì vậy các bạn sẽ thấy có 2 folder đó là Account và Home trong phần View. Do ban đầu chúng ta chưa truy xuất cơ sở dữ liệu nên models mình sẽ chưa đề cập đến trong bài học ngày hôm nay.

Khi project được tạo ra thì chúng ta có thể chạy project lên brower, vậy để chạy được các bạn làm như sau:

  • Trên thanh menu bạn sẽ nhìn thấy nút mũi tên màu xanh, đây là nút giúp bạn Run project lên, tuy nhiên ban đầu nếu bạn nào thấy tại nút này không có hiển thị trình duyệt mặc định trong máy mình như cốc cốc, chrome, firefox … thì các bạn chọn Browse With..
  • Sau khi chọn, 1 hộp thoại hiện lên, đầu tiên các bạn chọn trình duyệt mà mình muốn sử dụng mặc định khi chạy project lên, sau đó các bạn chọn Set as Default, vậy là các bạn đã hoàn thành.
  • Để chạy project bạn click vào nút Run Project

Giao diện hiển thị khi chạy thành công như hình

Vậy có bạn nào tự hỏi là tại sao lại có màn hình này chạy lên khi chúng ta chạy project lên ban đầu không? Rất dễ hiểu các bạn ạ, các bạn cùng theo dõi giải thích phía dưới nhé

Để giải thích cho lý do mà mình nêu ra ở phần trên thì trước tiên các bạn vào mục Controller.

Sau đó các bạn chọn và mở HomeController lên thì sẽ thấy kết quả như hình dưới

Khi vào HomeController thì bạn sẽ thấy màn hình như phía trên. Các bạn để ý nhé, trong Controller có cung cấp 1 phương thức có tên gọi là ActionResult. Phương thức này trả về rất nhiều kiểu dữ liệu khác nhau, và trong trường hợp này các bạn thấy kiểu trả về là View().

  • View() là 1 trong các kiểu dữ liệu được trả về từ hàm ActionResult , trong khuôn khổ bài này mình sẽ không phân tích rõ về phương thức ActionResult mà sẽ có bài hướng dẫn rất rõ về nội dung này.
  • Kiểu trả về View() dùng để hiển thị giao diện mà mình muốn xuất ra cho người dùng khi ActionResult được gọi lên.

Ở phần trên mình có đề cập, 1 Controller sẽ có 1 View kèm theo, các bạn hãy xuống phần View mở folder đó ra.

Như các bạn thấy, trong HomeController bao gồm 3 ActionResult đó là About, Contact, Index. Mà cả 3 ActionResult này đều trả về kiểu dữ liệu là View() vì vậy trong folder home sẽ cũng có 3 View tương ứng cho 3 ActionResult đó.

Cụ thể khi ActionResult Index được gọi lên thì Index.cshtml sẽ được hiển thị, và 2 cái còn lại tượng tự như vậy. Bây giờ, bạn click vào Index.cshtml để xem nội dung của file này thì các bạn sẽ thấy nội dung của nó giống y chang nội dung được hiển thị khi chúng ta chạy project lên.

Nhìn vào hình vẽ thì các bạn cũng thấy giao diện đó chính là do file Index.cshtml hiển thị, có nghĩa là ActionResult Index được gọi lên ban đầu, vậy lại có 1 câu hỏi đặt ra là tại sao trong HomeController gồm có 3 ActionResult mà cái Index lại được mặc định chạy đầu tiên mà không phài là About hay Contact? Các bạn chú ý nhé!

  • Các bạn mở folder App_Start > mở file RouteConfig.
  • Như các bạn thấy, trong RouteConfig tại 2 vị trí mà mình trỏ mũi tên vào thì đó là nguyên nhân khi các bạn chạy project lên là ActionResult Index được hiển thị mà không phải là About hay Contact.
  • Controller được gọi lên là HomeController, trong đó ActionResult Index được thực thi. Các bạn có thể thay đổi Controller và Action nào mà các bạn muốn mặc định chạy lên ban đầu.
  • Qua những giải thích đó thì các bạn đã hiểu về View, Controller cũng như cách hoạt động của chúng rồi, vậy để xuất câu “Hello Howkteam” chúng ta sẽ đi qua phần thứ 2 nhé

Get started

Start by installing Visual Studio 2017. Then, open Visual Studio.

Visual Studio is an IDE, or integrated development environment. Just like you use Microsoft Word to write documents, you’ll use an IDE to create applications. In Visual Studio, there’s a list along the bottom showing various options available to you. There’s also a menu that provides another way to perform tasks in the IDE. For example, instead of selecting New Project on the Start page, you can use the menu bar and select File > New Project.

Microsoft .Net MVC 5 - Basic Template Setup in Visual Studio 2013
Microsoft .Net MVC 5 – Basic Template Setup in Visual Studio 2013

Feedback

Submit and view feedback for

It’s always nice to be using the latest and greatest of things, however not everyone really enjoys “change” (especially with regard to their development environments).

So this quick article will cover how to go about creating and using ASP.NET MVC5 applications within Visual Studio 2012 for those out there that want to keep up with the newest version of their favorite development technology but may not have the courage (or the cash) to upgrade to Visual Studio 2013.

Visual Studio 2012 by default will not offer you the option to create an MVC5 Web Application.

In November of this year, the .NET team released the ASP.NET and Web Tools 2013.1 Update for Visual Studio 2012. I wish I could say the steps necessary to integrate MVC5 into Visual Studio 2012 were more complicated than simply downloading this, but they aren’t.

You can download the update itself from the link provided below:

You’ll find that after installing the update and restarting Visual Studio 2012, you’ll be able to create a new ASP.NET MVC5 application through Visual Studio 2012 :

After installing the update, you’ll see that MVC5 is now available in Visual Studio 2012.

Great! What Else?

The update not only provides the necessary foundation for creating MVC5 applications, but it features the following additional improvements as well:

  • Bootstrap Integration – All MVC5 applications and application templates by default will have their markup “bootstrap-ified” using Twitter Bootstrap (which is integrated into the applications by default).
  • Web API 2 Templates – The latest version of Web API template isn’t going to be left out either. You’ll be able to create new Web API services just like MVC5 applications.
  • Entity Framework 6 – Entity Framework 6 will be installed and included within this update and will be used for all of the scaffolding operations in Web API or MVC5.
  • Improved Scaffolding – This improved scaffolding functions as a code generation framework for ASP.NET Web applications. It makes it easy to add boilerplate code to your project that interacts with a data model and will ensure that any items added through scaffolding will have all of the necessary dependencies (packages, references, etc.).
  • Razor Editor Improvements – You’ll find that the toolkit has a variety of improvements and supports the Razor 3 engine.
  • New NuGet – This update also includes the latest version of NuGet 2.7, which removes some of the need for manually restoring packages that go missing and also ensuring that all of your packages are up to date.

So if you are a bit hesitant to give Visual Studio 2013 a try, but you want to play around with some of the newer features and development templates that it provides, I would recommend downloading and checking out this update.

Filed under: CodeProject, Development

An experienced Software Developer and Graphic Designer with an extensive knowledge of object-oriented programming, software architecture, design methodologies and database design principles. Specializing in Microsoft Technologies and focused on leveraging a strong technical background and a creative skill-set to create meaningful and successful applications.
Well versed in all aspects of the software development life-cycle and passionate about embracing emerging development technologies and standards, building intuitive interfaces and providing clean, maintainable solutions for even the most complex of problems.

ASP .NET MVC – Phần 1: Tạo ứng dụng ASP .NET MVC đầu tiên

Bài đăng này đã không được cập nhật trong 2 năm

ASP .NET MVC là gì?

ASP.NET MVC là một framework tuyệt vời hỗ trợ pattern MVC cho ASP.NET. Nếu bạn muốn hiểu ASP.NET MVC làm việc như thế nào, bạn cần phải có một sự hiểu biết rõ ràng về mô hình MVC. MVC là cụm từ viết tắt của Model-View-Controller, nó phân chia pattern của ứng dụng thành 3 phần – model, controller và view.

  • Model giúp lưu trữ dữ liệu của ứng dụng và trạng thái của nó. Nó là một cơ sở dữ liệu hoặc cũng có thể chỉ là một tập tin XML.
  • View được coi là một giao diện người dùng được sử dụng bởi khách truy cập trang web của bạn để nhìn thấy các dữ liệu. Các trang ASPX thường được sử dụng để hiển thị view trong các ứng dụng ASP.NET MVC.
  • Controller chịu trách nhiệm xử lý các tương tác của người dùng với trang web. Nó được sử dụng để xác định loại view nào cần phải được hiển thị. Controller cũng được sử dụng cho mục đích giao tiếp với model. Framework này là khá nhẹ và cung cấp khả năng kiểm thử, trong đó tích hợp với các tính năng hiện có của ASP.NET như xác thực (authentication) dựa trên membership và cả các master page.

Cần chuẩn bị những gì để có thể tạo ứng dụng ASP .NET MVC?

  • Để có thể lập trình bằng ASP .NET MVC thì vô cùng đơn giản. Tất cả những gì chúng ta cần chỉ là máy tính sử dụng hệ điều hành windows 7 trở lên với net frameword 4.0 trở lên.
  • Tiếp theo chúng ta cần cài đặt visual stuio (ứng dụng microsoft cung cấp để lập trình .NET). Nên cài đặt phiên bản 2010 trở lên, trong các loạt bài tiếp theo, mình sẽ hướng dẫn trên visual studio 2013.
  • Cuối cùng đó là SQL Server 2012 để quản lý cớ sở dữ liệu. Có thể dùng bất kỳ hệ quản trị cơ sở dữ liệu nào, tuy nhiên để đồng bộ, mình sẽ hướng dẫn sử dụng SQL Server.

Cấu trúc của Visual Studio

  1. Thanh menu
  2. Thanh công cụ, chứa các công cụ như debug, lưu file, chú thích code
  3. Vùng quản lý project, tất cả các thư mục và file của chúng ta sẽ hiển thị ở đây
  4. Khu vực output và Error list. Tất cả các đầu ra và lỗi phát sinh sẽ hiển thị ở đây
  5. Server Explorer để hiển thị các thông tin kết nối server CSDL
    Có thể chọn các công cụ hiển thị trong Menu VIEW

Các bước tạo 1 ứng dụng ASP .NET MVC với Visual Studio 2013

Bước 1: Chọn FILE -> New -> Project

Bước 2: Ở màn hình hiện ra. Chọn Templates là Visual Studio 2012. Giữ nguyên .Net Framework là 4.0, ta có thể chọn bản .Net Framework cao hơn tùy theo mục đích, nhưng tốt nhất nên chọn bản 4.0 là ok rồi, vì khi deploy ứng dụng lên server thì có thể server không hỗ trợ .Net framework cao hơn (đôi lúc không phải cái nào mới nhất cũng là tốt nhất @@). Chọn loại project là ASP .NET MVC 4 Web Application. Đặt tên cho project và chọn OK

Bước 3: Chọn Project Template là Basic, Visual Studio sẽ tạo cho chúng ta project với cấu trúc thư mục chuẩn đầy đủ các thành phần và thư viện tối thiểu cần thiết. Chọn View engine là Razor, có 2 công nghệ cho các file View, đó là ASPX (chúng ta sẽ chèn mã C# vào file view trong cặp dấu <% %> như JSP), và Razor (với công nghệ này thì chúng ta sẽ dùng dấu @ để chèn mã C# vào file View). Click OK và chúng ta sẽ có project cho ứng dụng ASP .NET MCV đầu tiên.

CẤU TRÚC THƯ MỤC CỦA ỨNG DỤNG ASP .NET MVC

  • Properties: Cái này chứa các thuộc tính của project. Mình sẽ không quan tâm đến cái này nha.
  • References: Cái này chứa các thư viện, package mà chúng ta sử dụng. Tương tự như vendor trong PHP hay node-modules của NODE JS
  • App_Data: Thư mục chứa file dữ liệu của hệ thống. Cái này cũng tạm thời chưa cần quan tâm.
  • App_Start: Thư mục chưa các file cấu hình khởi động và biên dịch của project. Chúng ta chú ý 2 file đó là FilterConfig.cs, dùng để khai báo các filter sử dụng trước khi thực hiện 1 hành động nào đó, tương tự như Middleware của PHP. Và file RouteConfig.cs, cái tên đã nói lên tất cả, chúng ta sẽ định nghĩa các routes của web ở trong file này.
  • Content: Thư mục chứa CSS.
  • Controllers: Tất nhiên là nó dùng để chứa controller rồi .
  • Models: Chứa các file tương tác với CSDL.
  • Scripts: Thư mục chứa các file JS.
  • Views: Thư mục chứa các file HTML với đuôi là .cshtml.
  • Global.aspx: File chứa các khai báo sử dụng cho toàn bộ project, như định dạng số, ngày tháng, vùng, ngôn ngữ.
  • package.config: File quản lý các package chúng ta cài vào
  • Web.config: File khá quan trọng, định nghĩa các cái đặt cho project.

Cách cài đặt các thư viện cần thiết

1. Sử dụng Nut Get

Visual Studio cung cấp cho chúng ta 1 giao diện để cài đặt các gói cần thiết cho project như Boostrap, Jquery,… Ở đây chúng ta có thể tìm kiếm, cài đặt hay gỡ cài đặt các gói, thư viện của bên thứ 3 trong project

2. Sử dụng console

  • Để gọi mở console ta làm như hình bên dưới
  • Vị trí của console.
  • Chúng ta sẽ dùng các lệnh để cài đặt, cấu hình project, hoặc cài package, thư viện tương tự như dùng npm hay composer để cài đặt trong NODE hay PHP. Nội dung các câu lệnh sẽ được giới thiệu từ từ trong các bài sau ^^.

VII.Tạo Controller

Bước 1: Click chuột phải vào thư mục Controllers, chọn Add -> Controller…

Bước 2: Đặt tên controller là Home, chú ý giữ nguyên chữ Controller phía sau. Phần Template chọn Empty MVC controller.

Click Add và chúng ta sẽ có 1 controller như bên dưới

  1. là tên của controller
  2. là tên của Action sẽ thực hiện, mặc định action này trả về kiểu ActionResult, hiểu nôn na là nó sẽ trả về 1 trang Html cho client Câu lệnh return View(); sẽ trả về 1 trang html có tên file trùng với tên của Action. Để trả về 1 trang html có tên khác với tên Action đang thực thi thì chỉ cần truyền tên của file chứa trang html đó như sau return View(“fileHtmlNaoDo”);.

Tạo View

Bước 1: Click chuột phải vào thư mục Views, chọn Add->New Folder

Bước 2: Đặt tên thư mục là Home

Chú ý: Một controller khi thực hiện Action trả về 1 trang html sẽ tự động tìm kiếm tên file và return lại các trang html trong một thư mục cùng tên với controller đó, và thư mục này sẽ là thư mục con của thư mục Views
Bước 3: Click chuột phải vào thư mục Home vừa tạo, chọn Add->View…

Bước 4: Đặt tên view là Index, và tất nhiên View engine là Razor rồi, các phần khác thì chỉ cần giữ mặc định. Click Add

Routes

Mở file App_Data/RouteConfig.cs

  • Mặc định để điều hướng đến 1 trang html, ASP .NET đã khai báo sẵn đó là chỉ cần truyền vào đường dẫn “/TenController/TenAction”. Nếu không truyền vào gì cả thì mặc định sẽ gọi Action Index trong controller Home
  • Nếu muốn thay đổi dường dẫn mặc định này, chúng ta có thể khai báo thêm các đường dẫn khác theo ý muốn. Mình sẽ có 1 bài hướng dẫn chi tiết về routes trong ASP .NET MVC sau.
  • Lúc nãy chúng ta đã tạo Controller Home và trang view Index, như vậy, để truy cập đến trang này, chúng ta chỉ cần cung cấp đường dẫn www.domain/home/index cho trình duyệt.

Debug

Chọn nền tảng cần để debug và sau đó chọn Play như hình dưới

Visual Studio sẽ mở trình duyệt tương ứng và chạy trang web lên cho chúng ta. Địa chỉ sẽ là localhost và port được Visual Studio chọn ngẫu nhiên, thông số này sẽ được lưu vào Properties của project, và các lần debug tiếp theo, project sẽ luôn chạy trên port này. Chúng ta có thê thay đổi nó trong Properties của project

Bài viết còn nhiều sai sót, mong nhận được sự giúp đỡ của mọi ngwowif1 Cảm ơn các bạn đã theo dõi bài viết!

All rights reserved

Loạt bài này sẽ hướng dẫn bạn những điều cơ bản để xây dựng ứng dụng WEB ASP.NET MVC 5 sử dụng Visual Studio 2017.

Welcome

Welcome to Visual Studio 2012 that is upgraded by ASP.NET Web Tools 2013.1

Working with View Layout

Use the following procedure to create your home page layout:

Step 1: Open the _Layout.cshtml file.

Step 2: Modify your code with the code below in the screenshot:

Step 3: Debug your application from HomeController.

Step 4: Click on “Welcome” to open the Welcome Page.

Perform CRUD Operations

Now, as we saw that our empty project has a new controller and view to display the page using a page layout. In this section we will perform Create, Read, Update and Delete (CRUD) operations to the records we saved in our application. So, proceed with the following sections.

Creating Model

At first we need to create a Model in our application using following steps:

Step 1: Add an Entity Framework reference to your project.

Step 2: Install an Entity Framework.

Step 3: Add a class as Cricketer by right-clicking on the Models folder.

Step 4: Replace the boilerplate code with the following code:

using System.Data.Entity;

namespace MvcCricketer.Models

public class Cricketer

public int ID { get; set; }

public string Name { get; set; }

public int ODI { get; set; }

public int Test { get; set; }

public string Grade { get; set; }

public class CricketerDbContext : DbContext

public DbSet

Cricketers { get; set; }

Step 5: Build the solution.

Database Connectivity

We need to set our context named “CricketerDbContext” with the database. So, open the Web.Config file and paste in the following code:

connectionString=”Data Source=(LocalDb)\v11.0;AttachDbFilename=|DataDirectory|\MyCricketers.mdf;Integrated Security=true”

providerName=”System.Data.SqlClient”/>

webconfig image

Connectivity with Controller

You have successfully created your model, now we need to connect the model with the controller using the following procedure.

Step 1: Right-click on “Controllers” and add a new Scaffolded item.

Step 2: Select the MVC 5 Controller with the Views option.

Step 3: Enter the controller name as “CricketerController” then select the model and data context class,

Visual Studio automatically scaffolds your CricketerController and creates the view also. Check out the Solution Explorer for the Cricketer folder newly created in the Views folder.

Step 3: Modify the page links in your home page from the “Page_Layout” file with the following code:

  • @Html.ActionLink(“Home”, “Index”, “Home”)
  • @Html.ActionLink(“Welcome”, “Welcome”, “Home”)
  • @Html.ActionLink(“Cricketer”, “Index”, “Cricketer”)
  • I added a Cricketer link in my home page.

    Working with CRUD Operation on the application

    We now have the Model, View and Controller. We are prepared to run our application.

    • Create

      Step 1: Debug the application and click on the “Cricketers” link. It will open the page and you can create new records. Click on the “Create New” link as shown below:

      Step 2: Enter the records

      Enter more records in your application.

    • Read

      In this section you will read the record. Step 1: Click on the “Details” link on the record.Step 2: Show the details and click on “Back to the List”.

    • UpdateIn this section you will update the record. Step 1: Click on the “Edit” link on the record that is to be updated.Step 2: Update the record and save it.
    • DeleteIn this section we will delete the records.Step 1: Click on the “Delete” link to delete the record.Step 2: The final step to delete any record.

    Database Connection

    We can also check out the records in our application using the Server Explorer.

    Step 1: Check out the data context in the Server Explorer.

    Step 2: In your table, right-click and click “Show table data”.

    Step 3: You can see the table records.

    Summary

    This article will help you to create an empty project and create a model, view and controller. It will also help you to perform CRUD operations with MVC 5 in Visual Studio 2012. Thanks for reading.

    It’s always nice to be using the latest and greatest of things, however not everyone really enjoys “change” (especially with regard to their development environments). So this quick article will cover how to go about creating and using ASP.NET MVC 5 applications within Visual Studio 2012 for those out there that want to keep up with the newest version of their favorite development technology but may not have the courage (or the cash) to upgrade to Visual Studio 2013. In November of this year, the .NET team released the ASP.NET and Web Tools 2013.1 Update for Visual Studio 2012. I wish I could say the steps necessary to integrate MVC 5 into Visual Studio 2012 were more complicated than simply downloading this, but they aren’t. You can download the update itself from the link provided below:

    You’ll find that after installing the update and restarting Visual Studio 2012 that you’ll be able to create a new ASP.NET MVC 5 application through Visual Studio 2012: After installing the update, you’ll see that MVC 5 is now available in Visual Studio 2012. Great! What else? The update not only provides the necessary foundation for creating MVC 5 applications, but it features the following additional improvements as well:

    • Bootstrap Integration – All MVC 5 applications and application templates by default will have their markup “bootstrap-ified” using Twitter Bootstrap (which is integrated into the applications by default).
    • Web API 2 Templates – The latest version of Web API template isn’t going to be left out either. You’ll be able to create new Web API services just like MVC 5 applications.
    • Entity Framework 6 – Entity Framework 6 will be installed and included within this update and will be used for all of the scaffolding operations in Web API or MVC 5.
    • Improved Scaffolding – This improved scaffolding functions as a code generation framework for ASP.NET Web applications. It makes it easy to add boilerplate code to your project that interacts with a data model and will ensure that any items added through scaffolding will have all of the necessary dependencies (packages, references, etc.).
    • Razor Editor Improvements – You’ll find that the toolkit has a variety of improvements and supports the Razor 3 engine.
    • New NuGet – This update also includes the latest version of NuGet 2.7, which removes some of the need for manually restoring packages that go missing and also ensuring that all of your packages are up to date.

    So if you are a bit hesitant to give Visual Studio 2013 a try, but you want to play around with some of the newer features and development templates that it provides, I would recommend downloading and checking out this update.

    Getting started with ASP.NET MVC 5

    Note

    An updated version of this tutorial is available here using the latest version of Visual Studio. The new tutorial uses ASP.NET Core MVC, which provides many improvements over this tutorial.

    This tutorial teaches ASP.NET Core MVC with controllers and views. Razor Pages is a new alternative in ASP.NET Core, a page-based programming model that makes building web UI easier and more productive. We recommend you try the Razor Pages tutorial before the MVC version. The Razor Pages tutorial:

    • Is easier to follow.
    • Covers more features.
    • Is the preferred approach for new app development.

    This tutorial teaches you the basics of building an ASP.NET MVC 5 web app using Visual Studio 2017. The final source code for the tutorial is located on GitHub.

    This tutorial was written by Scott Guthrie (twitter@scottgu ), Scott Hanselman (twitter: @shanselman ), and Rick Anderson ( @RickAndMSFT )

    You need an Azure account to deploy this app to Azure:

    • You can open an Azure account for free – You get credits you can use to try out paid Azure services, and even after they’re used up you can keep the account and use free Azure services.
    • You can activate MSDN subscriber benefits – Your MSDN subscription gives you credits every month that you can use for paid Azure services.
    Tự học ASP.NET MVC 5 - Bài 1 - Giới thiệu, tạo project trong Visual Studio, cấu hình IIS
    Tự học ASP.NET MVC 5 – Bài 1 – Giới thiệu, tạo project trong Visual Studio, cấu hình IIS

    Tạo ứng dụng đầu tiên

    Để tạo mới một Project, bạn chọn File -> New -> Project như hình bên dưới:

    Sau đó chọn “Visual C#” tại danh sách bên trái, chọn “ASP.NET Web Application (.NET Framework)”. Đặt tên cho Project là “MvcMovie” và chọn đường dẫn lưu Project, sau đó nhấn “OK”:

    Tại màn hình “New ASP.NET Web Application”, chọn “MVC” và nhấn “OK”:

    Visual Studio sẽ sử dụng template mặc định cho dự án ASP.NET MVC vừa được tạo:

    Bạn nhấn phím F5. Visual Studio sẽ khởi động IIS Express Web Server để chạy ứng dụng Web. Visual Studio sau đó sẽ khởi chạy trình duyệt và mở trang chủ của ứng dụng. Thanh địa chỉ của trình duyệt sẽ có dạng: “http://localhost:port#/”. Đó là vì localhost luôn trỏ tới máy tính cục bộ của bạn. Khi Visual Studio chạy một dự án WEB, một cổng ngẫu nhiên sẽ được sử dụng cho máy chủ WEB. Khi chạy ứng dụng chúng ta sẽ thấy những cổng khác nhau. Trong hình dưới đây, số cổng là “50061”:

    Thu nhỏ kích cỡ cửa sổ trình duyệt. Nhấn vào “icon navigation” bạn sẽ thấy đường dẫn đến trang “Home”, “About”, “Contact”.

    Ứng dụng cũng hỗ trợ “Đăng kí” và “Đăng nhập”. Bài học tiếp theo, chúng ta sẽ thay đổi cách ứng dụng này hoạt động và tìm hiểu một chút về ASP.NET MVC.

    Xem thêm các bài chuyên môn tại đây.

    Tạo 1 project ASP.Net MVC đơn giản và giải thích cấu trúc, vai trò của View, Controller trong mô hình MVC.

    Tải xuống

    Tài liệu

    Nhằm phục vụ mục đích học tập Offline của cộng đồng, Kteam hỗ trợ tính năng lưu trữ nội dung bài học Tạo 1 project ASP.Net MVC đơn giản và giải thích cấu trúc, vai trò của View, Controller trong mô hình MVC. dưới dạng file PDF trong link bên dưới.

    Ngoài ra, bạn cũng có thể tìm thấy các tài liệu được đóng góp từ cộng đồng ở mục TÀI LIỆU trên thư viện Howkteam.com

    Đừng quên like và share để ủng hộ Kteam và tác giả nhé!

    C# Project Online Book Shop Using ASP.Net and SQL Server
    C# Project Online Book Shop Using ASP.Net and SQL Server

    Lập trình website với ASP.Net MVC cơ bản

    Danh sách bài học

    Dẫn nhập

    Qua bài giới thiệu tổng quát về ASP.Net MVC đầu tiên, các bạn đã phần nào hiểu được cấu trúc cũng như cách thức hoạt động của nó.

    Tuy nhiên, đã là lập trình thì không thể không thực hành, vì vậy trong bài học ngày hôm nay, mình sẽ hướng dẫn do các bạn cách tạo 1 project ASP.Net MVC và chúng ta sẽ làm 1 ví dụ đơn giản nhưng khá kinh điển đó là xuất câu “Hello Howktem”, qua ví dụ này các bạn sẽ nắm rõ về cách hoạt động của ASP.Net MVC bây giờ chúng ta cùng đi vào bài học nhé.

    Nội dung

    Để đọc hiểu bài này tốt nhất các bạn nên có kiến thức cơ bản về các phần:

    • Biết cách cài đặt Visual Studio bản 2012 trở lên, nếu chưa biết hay chưa cài đặt được thì các bạn tham khảo qua bài này nhé: Cài đặt môi trường phát triển (IDE) Visual studio 2015
    • Đã đọc qua bài: Giới thiệu tổng quan về công nghệ web ASP.Net MVC
    • Biết C# căn bản là 1 lợi thế, tuy nhiên nếu chưa có thì cũng không sao, các bạn sẽ được hướng dẫn cụ thể.

    Trong bài học này, chúng ta sẽ cùng tìm hiểu các vấn đề:

    • Hướng dẫn tạo 1 project ASP.Net MVC, giải thích cấu trúc và vai trò của View, Controller
    • Xuất câu “Hello Howktem” sử dụng ASP.Net MVC

    Xuất câu “Hello Howkteam” trong ASP.Net MVC

    Ở phần thứ nhất các bạn đã nắm được cách hoạt động của View, Controller rồi, bây giờ chúng ta cùng tạo 1 ví dụ đơn giản đó là xuất ra câu “Hello Howkteam” nhé.

    • Đầu tiên các bạn Controllers > Add > Controller
    • Tại giao diện này, các bạn chon MVC 5 Controller – Empty, sau đó chọn Add
    • Tại giao diện này, các bạn nhập tên Controller, mình để là Example rồi nhấn Add
    • Tiếp theo, để hiển thị câu “Hello Howkteam” chúng ta cần có View hiển thị, cách tạo View như sau
    • Bạn click phải chuột vào Index > chọn Add View. Sau đó các bạn làm theo các bước sau
    • Tại Template các bạn chọn Empty (without model), các bước còn lại làm theo hình nhé.
    • Sau khi tạo View Index xong thì để xuất câu “Hello Howkteam” thì bạn thay đổi 1 chút:
    • Tại thẻ bạn thay đổi nội dung bên trong: “Index” > “Hello Howkteam”. Sau đó các bạn vào RouteConfig trong App_Start để thay đổi Controller và Action > để chúng ta mặc định hiển thị trang chứa dòng chữ “Hello Howkteam” hiện lên đầu tiên
    • Tại controller bạn thay đổi nội dung bên trong Home > Example, còn action thì các bạn giữ nguyên giá trị là Index sau đó các bạn Run project lên kiểm tra, nếu màn hình chạy đúng như hình phía dưới thì các bạn đã tạo ví dụ thành công
    Learn Visual Studio 2022 in 45 minutes | Amit Thinks
    Learn Visual Studio 2022 in 45 minutes | Amit Thinks

    Thảo luận

    Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.

    Nội dung bài viết

    Khóa học

    Lập trình website với ASP.Net MVC cơ bản

    Lập trình website với ASP.Net MVC cơ bản

    Đánh giá

    Bình luận

    Dạ cho em hỏi ạ. Luyện tập thử thách không ngại khó là làm gì ạ?

    Thanks Hkteam đã chia sẽ kiến thức mong hkteam ra thêm nhiều clip hay và thực tế

    Create your first app

    On the Start page, select New Project. In the New project dialog box, select the Visual C# category on the left, then Web, and then select the ASP.NET Web Application (.NET Framework) project template. Name your project “MvcMovie” and then choose OK.

    In the New ASP.NET Web Application dialog, choose MVC and then choose OK.

    Visual Studio used a default template for the ASP.NET MVC project you just created, so you have a working application right now without doing anything! This is a simple “Hello World!” project, and it’s a good place to start your application.

    Press F5 to start debugging. When you press F5, Visual Studio starts IIS Express and runs your web app. Visual Studio then launches a browser and opens the application’s home page. Notice that the address bar of the browser says

    localhost:port#

    and not something like

    example.com

    . That’s because

    localhost

    always points to your own local computer, which in this case is running the application you just built. When Visual Studio runs a web project, a random port is used for the web server. In the image below, the port number is 1234. When you run the application, you’ll see a different port number.

    Right out of the box this default template gives you

    Home

    ,

    Contact

    , and

    About

    pages. The image below doesn’t show the Home, About, and Contact links. Depending on the size of your browser window, you might need to click the navigation icon to see these links.

    The application also provides support to register and log in. The next step is to change how this application works and learn a little bit about ASP.NET MVC. Close the ASP.NET MVC application and let’s change some code.

    For a list of current tutorials, see MVC recommended articles.

    ASP.NET Core MVC 6.0 Full Course (Beginner)
    ASP.NET Core MVC 6.0 Full Course (Beginner)

    Introduction

    Today, I am creating an ASP.NET Web Application using the MVC 5 Project Template in Visual Studio 2012. Surprised? Well, I think you don’t know that Microsoft revealed the ASP.NET and Web Tools 2013.1 version for the Visual Studio 2012. I have also described this update in New Web Tools for Visual Studio. As I said, we will describe the MVC 5 template later, so here I am creating the MVC 5 application in Visual Studio 2012.

    The selection of a MVC 5 project creates an Empty Project in Visual Studio 2012. We need to create an entire application. We can view some folders in the application solution like Models, Controllers, Views, App_Start and so on as shown in the following screenshot:

    Prerequisites

    • Visual Studio 2012 (updated with Web Tools 2013.1)

    Note: Please note that you must have updated your Visual Studio 2012, otherwise you cannot work on a MVC 5 project in Visual Studio 2012. Read the Full Information.

    We will now create our Home Page to display the Application Home Page and then we’ll perform the CRUD Operations. So, proceed with the following sections:

    • Getting Started with Empty Application
    • Perform CRUD Operations
    • Database Connection

    Getting Started with Empty Application

    Use the following procedure to create a sample of your empty application.

    Working with Controller

    Step 1: At first we need to add a Controller. Just right-click on your Controllers folder to add one.

    Step 2: Select the MVC 5 Empty Controller in the next wizard.

    Step 3: Enter the Controller name as HomeController.

    Step 4: Modify your code with the following code:

    using System.Web.Mvc;

    namespace MvcCricketer.Controllers

    public class HomeController : Controller

    //

    // GET: /Home/

    public ActionResult Index()

    return View();

    public ActionResult Welcome()

    ViewBag.Message = “Your Welcome Page”;

    return View();

    Step 5: Build your solution.

    After scaffolding the HomeController, by default Index() is created. I have added one more method, in other words Welcome() to this controller.

    Working with View

    As you saw, we have created the Controllers, so now we’ll create a View for our Controller using the following procedure.

    Step 1: Create a new Home folder in the Views folder.

    Step 2: Right-click on the “Home” folder to add a View.

    Step 3: Enter the View name as “Index”.

    Step 4: Create some content to be shown in your home page. You can see my screenshot of “Index.cshtml”.

    Step 5: Create a “Welcome.cshtml” page in the “Home” folder and you can replace your code with the following code:

    @{

    ViewBag.Title = “Welcome”;

    Kết luận

    Qua bài học ngày hôm nay, các bạn đã hiểu về View, Controller cũng như cách tạo 1 project ASP.Net MVC và tạo 1 ví dụ đơn giản là xuất câu “Hello Howkteam” ra màn hình rồi nhé.

    Bài sau chúng ta sẽ đi vào Tìm hiểu về Layout Page trong View và tạo ví dụ minh họa

    Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận hoặc góp ý của mình để phát triển bài viết tốt hơn. Đừng quên “Luyện tập – Thử thách – Không ngại khó”.

    Keywords searched by users: mvc 5 in visual studio 2012

    Using Asp.Net Mvc5 Within Visual Studio 2012 - Codeproject
    Using Asp.Net Mvc5 Within Visual Studio 2012 – Codeproject
    Mvc 5 For Visual Studio 2012 | Paolo Brocco Works
    Mvc 5 For Visual Studio 2012 | Paolo Brocco Works
    Adding A Controller 2012 | Microsoft Learn
    Adding A Controller 2012 | Microsoft Learn
    Intro To Asp.Net Mvc 4 | Microsoft Learn
    Intro To Asp.Net Mvc 4 | Microsoft Learn
    Asp .Net Mvc - Phần 1: Tạo Ứng Dụng Asp .Net Mvc Đầu Tiên
    Asp .Net Mvc – Phần 1: Tạo Ứng Dụng Asp .Net Mvc Đầu Tiên
    Asp.Net Mvc 5 Tutorial In Urdu - Introduction To Asp.Net Mvc 5 - Youtube
    Asp.Net Mvc 5 Tutorial In Urdu – Introduction To Asp.Net Mvc 5 – Youtube
    Creating Asp.Net Web Projects In Visual Studio 2013 | Microsoft Learn
    Creating Asp.Net Web Projects In Visual Studio 2013 | Microsoft Learn
    Asp.Net Mvc 5 Event Calendar | Daypilot Code
    Asp.Net Mvc 5 Event Calendar | Daypilot Code
    Creating Asp.Net Web Projects In Visual Studio 2013 | Microsoft Learn
    Creating Asp.Net Web Projects In Visual Studio 2013 | Microsoft Learn
    Intro To Asp.Net Mvc 4 | Microsoft Learn
    Intro To Asp.Net Mvc 4 | Microsoft Learn
    Release Notes For Asp.Net And Web Tools 2013.1 For Visual Studio 2012 |  Microsoft Learn
    Release Notes For Asp.Net And Web Tools 2013.1 For Visual Studio 2012 | Microsoft Learn
    Mrkt 的程式學習筆記: 在Visual Stuidio 2012 開發Asp.Net Mvc 5 專案
    Mrkt 的程式學習筆記: 在Visual Stuidio 2012 開發Asp.Net Mvc 5 專案
    Adding A View 2012 | Microsoft Learn
    Adding A View 2012 | Microsoft Learn
    Visual Studio 2012 New Features | Itpro Today: It News, How-Tos, Trends,  Case Studies, Career Tips, More
    Visual Studio 2012 New Features | Itpro Today: It News, How-Tos, Trends, Case Studies, Career Tips, More
    Getting Started With Asp.Net Mvc 5 Using Visual Basic
    Getting Started With Asp.Net Mvc 5 Using Visual Basic
    Tutorial (Asp.Net 4.X) | Reactjs.Net
    Tutorial (Asp.Net 4.X) | Reactjs.Net
    Asp.Net Mvc 5 At A Glance With New Features
    Asp.Net Mvc 5 At A Glance With New Features
    Visual Studio 2012 And .Net Framework 4.5 Is Released - Here'S 5 Minute  Videos To Get You Up To Speed Quick - Scott Hanselman'S Blog
    Visual Studio 2012 And .Net Framework 4.5 Is Released – Here’S 5 Minute Videos To Get You Up To Speed Quick – Scott Hanselman’S Blog
    Tạo 1 Project Asp.Net Mvc Đơn Giản Và Giải Thích Cấu Trúc, Vai Trò Của  View, Controller Trong Mô Hình Mvc. | How Kteam
    Tạo 1 Project Asp.Net Mvc Đơn Giản Và Giải Thích Cấu Trúc, Vai Trò Của View, Controller Trong Mô Hình Mvc. | How Kteam

    See more here: kientrucannam.vn

    Trả lời

    Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *