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.

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.

Tạo biểu đồ với Google Chart trong ASP.NET MVC

Khi làm việc với các ứng dụng liên quan đến số liệu chúng ta hay có nhu cầu thống kê. Có thể thống kê theo dạng bảng, tuy nhiên nó không trực quan như biểu đồ. Các ứng dụng được sử dụng biểu đồ nhiều nhất phải kể đến các ứng dụng phân tích tài chính như chứng khoán…, phân tích dữ liệu, thời tiết, địa lý, kinh tế… và nhiều lĩnh vực khác của cuộc sống. Biểu đồ cung cấp cho chúng ta cái nhìn trực quan, từ đơn giản đến chi tiết, từ đó đưa ra các phân tích, đánh giá, định hướng một cách hiệu quả hơn.
Để tạo biểu đồ trong ứng dụng web ASP.NET MVC chúng ta có thể dùng các plugin jQuery như Highcharts, Charts.JS , FlotjqPlot… trong đó có cả miễn phí và có phí.
Trong bài viết này sẽ hướng dẫn các bạn sử dụng biểu đồ trong ASP.NET MVC kết hợp JSON, thông qua một thư viện miễn phí, đó là Google Charts. Thư viện này cung cấp cho chúng ta rất nhiều kiểu biểu đồ khác nhau, tùy vào mục đích ứng dụng, như biểu đồ cột, biểu đồ phần trăm (pie), biểu đồ line, biểu đồ bar, area…

Yêu cầu bài toán đơn giản như sau:
Xây dựng website đơn giản bằng ASP.NET MVC thống kê số lượng sinh viên theo lớp học, thứ tự xếp hạng của từng lớp.

Bước 1: Tạo class Lop. Class này chứa các thuộc tính như Tên lớp, số lượng sinh viên, xếp hạng (thứ hạng)

Bước 2: Tạo Controller & View. Chúng ta tạo ra một Controller tên là Chart, View = Index
Index.cshtml

Bước 3: Tạo JsonResult trả về kiểu JSON. Hàm này viết luôn trong file ChartController.cs
Bước 4: Tạo hàm Ajax jQuery lấy dữ liệu từ JsonResult (Các bạn chú ý thêm thư viện jQuery vào.)

Bước 5: Tạo hàm javascript để tạo biểu đồ với Google Chart (Các bạn chú ý thêm thư viện jsapi của Google) Ví dụ 1: Vẽ biểu đồ phần trăm (pie) thể hiện số lượng sinh viên từng lớp.

Demo

Tạo biểu đồ với Google chart trong MVC
Tạo biểu đồ với Google Chart trong MVC

Ví dụ 2: Vẽ biểu đồ cột, thể hiện số lượng sinh viên và xếp hạng từng lớp.
Demo

Tạo biểu đồ cột với Google Chart trong ASP.NET MVC
Tạo biểu đồ cột với Google Chart trong ASP.NET MVC

Code full

ChartController.cs
Index.cshtml

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

ASP.NET MVC4 Sending Email

ASP.NET MVC 4 SendMail
ASP.NET MVC 4 Send Mail
[ASP.NET MVC4 Sending Email] Trong quá trình lập trình web, luôn có trường hợp chúng ta cần gửi email cho ai đó, người dùng của chúng ta, ví dụ khi đăng ký thành viên, cần gửi email kích hoạt. Khi quên mật khẩu, gửi email yêu cầu lấy lại.  Khi khách hàng mua hàng online, cần gửi email xác nhận, hay có phản hồi từ người dùng, và nhiều trường hợp khác nữa…

Trong phạm vi hướng dẫn này, tôi trình bày các bạn cách gửi email từ gmail trong MVC 4, bạn có thể áp dụng cho MVC 3, MVC 5 hay ASP.NET webform. Kịch bản của chúng ta đó là form liên hệ, phản hồi trên website. Khi một khách hàng viếng thăm và để lại lời nhắn, nó sẽ gửi email về hòm thư của chúng ta thiết lập trước (hoặc gửi thư cảm ơn khách hàng phản hồi – tùy chọn)

Để tìm hiểu thêm về MVC 4, MVC 5 bạn có thể tải về 2 cuốn ebook tại đây. Sách nay nên đọc.

Tóm tắt video:

  • Tạo một dự án mới (New Project)
  • Tạo ContactModel class
  • Tạo EmailService class
  • Tạo SendMail Controller
  • Tạo Form gửi liên hệ
  • Demo kết quả.
  • Áp dụng được cho MVC 3, 4 , 5, ASP.NET webform

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à phản hồi của bạn luôn được đánh giá cao.

——–

UpdateTrong nhiều trường hợp, các bạn không thể gửi email được. Xin vui lòng đừng bỏ cuộc, hãy đi tìm nguyên nhân & cách khắc phục vấn đề. Đầu tiên sau khi download mã nguồn về, các bạn hay thay đổi thành email của các bạn. Email trong demo của mình đã đổi password, nên chắc chắn không thể gửi được.

Các bạn dùng email của mình. Lưu ý, hiện nay Google đã thay đổi chính sách bảo mật. Các bạn không thể dùng password mà các bạn đăng nhập hàng ngày để gửi email. Thay vào đó google cho phép chúng ta tạo ra một loại password mới, đó là App Passwords. Đầu tiên các bạn truy cập vào đây để tạo 2 lớp bảo mật cho Gmail. Sau đó truy cập vào đây để tạo mới một app password. Các bạn sẽ dùng password này để gửi email. Password này không dùng thay thế password hiện tại. Nên bạn không thể dùng để đăng nhập Gmail.

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

Pro ASP.NET MVC 4, 4th Edition

Pro ASP.NET MVC 4
Pro ASP.NET MVC 4

The ASP.NET MVC 4 Framework is the latest evolution of Microsoft’s ASP.NET web platform. It provides a high-productivity programming model that promotes cleaner code architecture, test-driven development, and powerful extensibility, combined with all the benefits of ASP.NET.

ASP.NET MVC 4 contains a number of significant advances over previous versions. New mobile and desktop templates (employing adaptive rendering) are included together with support for jQuery Mobile for the first time. New display modes allow your application to select views based on the browser that’s making the request while Code Generation Recipes for Visual Studio help you auto-generate project-specific code for a wide variety of situtations including NuGet support.

In this fourth edition, the core model-view-controller (MVC) architectural concepts are not simply explained or discussed in isolation, but are demonstrated in action. You’ll work through an extended tutorial to create a working e-commerce web application that combines ASP.NET MVC with the latest C# language features and unit-testing best practices. By gaining this invaluable, practical experience, you’ll discover MVC’s strengths and weaknesses for yourself—and put your best-learned theory into practice.

The book’s authors, Steve Sanderson and Adam Freeman, have both watched the growth of ASP.NET MVC since its first release. Steve is a well-known blogger on the MVC Framework and a member of the Microsoft Web Platform and Tools team. Adam started designing and building web applications 15 years ago and has been responsible for some of the world’s largest and most ambitious projects. You can be sure you are in safe hands.

What you’ll learn

  • Gain a solid architectural understanding of ASP.NET MVC 4, including basic MVC
  • Explore the entire ASP.NET MVC Framework
  • Learn what’s new in version 4 and how how best to apply these new features
  • See how MVC and test-driven development work in action
  • Capitalize on your existing knowledge quickly and easily through comparison of features in classic ASP.NET to those in ASP.NET MVC

Who this book is for

This book is for web developers with a basic knowledge of ASP.NET and C# who want (or need) to start using the new ASP.NET MVC 4 Framework.

Book Details

Publisher: Apress
By: Adam Freeman
ISBN: 978-1-4302-4236-9
Year: 2012
Pages: 756
Language: English
File size: 24.8 MB
File format: PDF
Download

Table of Contents

1. What’s The Big Idea
2. Your first MVC Application
3. The MVC Pattern
4. Essential Language Features
5. Working with Razor
6. Essential Tools for MVC
7. Sports Store: A Real Application
8. Sports Store: Navigation
9. Sports Store: Cart
10. Sports Store: Admin
11. Sports Store: Security and Finishing Touches
12. Overview of MVC Projects
13. URL Routing
14. Advanced Routing Features
15. Controllers and Actions
16. Filters
17. Controller Extensbility
18. Views
19. Helper Methods
20. Templated Helper Methods
21. URL and Ajax Helper Methods
22. Model Binding
23. Model Validation
24. Bundles and Display Modes
25. Web API
26. Deployment

Download

ASP.NET MVC3 Vs MVC4 Vs MVC5

In this ASP.NET MVC tutorial, we will have a quick look into new and important features introduced in major versions of Microsoft ASP.NET MVC starting from MVC 3 to MVC 5 (the latest one so far).

ASP.NET MVC 3 Vs ASP.NET  MVC 4 Vs ASP.NET MVC 5
Building your ASP.NET MVC Application using Entity Framework

ASP.NET MVC 3

  • New Project Templates having support for HTML 5 and CSS 3.
  • Improved Model validation.
  • Razor View Engine introduced with a bundle of new features.
  • Having support for Multiple View Engines i.e. Web Forms view engine, Razor or open source.
  • Controller improvements like ViewBag property and ActionResults Types etc.
  • Unobtrusive JavaScript approach.
  • Improved Dependency Injection with new IDependencyResolver.
  • Partial page output caching.

ASP.NET MVC 4

  • ASP.NET Web API, a framework that simplifies the creation of HTTP services and serving a wide range of clients. Follow to create your first ASP.NET Web API service.
  • Adaptive rendering and other look-n-feel improvements to Default Project Templates.
  • A truly Empty Project Template.
  • Based on jQuery Mobile, new Mobile Project Template introduced.
  • Support for adding controller to other project folders also.
  • Task Support for Asynchronous Controllers.
  • Controlling Bundling and Minification through web.config.
  • Support for OAuth and OpenID logins using DotNetOpenAuth library.
  • Support for Windows Azure SDK 1.6 and new releases.

ASP.NET MVC 5

Creating your first ASP.NET MVC 5 Application in 4 simple steps
  • Bootstrap replaced the default MVC template.
  • ASP.NET Identity for authentication and identity management.
  • Authentication Filters for authenticating user by custom or third-party authentication provider.
  • With the help of Filter overrides, we can now override filters on a method or controller.
  • Attribute Routing is now integrated into MVC 5.
Hopefully, this article will help you in comparing core features of ASP.NET MVC in different versions.

Nguồn: Web Development Tutorial

Pro ASP.Net MVC 5, 5th edition

The ASP.NET MVC 5 Framework is the latest evolution of Microsoft’s ASP.NET web platform. It provides a high-productivity programming model that promotes cleaner code architecture, test-driven development, and powerful extensibility, combined with all the benefits of ASP.NET.
mvc5
ASP.NET MVC 5 contains a number of advances over previous versions, including the ability to define routes using C# attributes and the ability to override filters. The user experience of building MVC applications has also been substantially improved. The new, more tightly integrated, Visual Studio 2013 IDE has been created specifically with MVC application development in mind and provides a full suite of tools to improve development times and assist in reporting, debugging and deploying your code.

The popular Bootstrap JavaScript library has also now been included natively within MVC 5 providing you, the developer, with a wider range of multi-platform CSS and HTML5 options than ever before without the penalty of having to load-in third party libraries.

What you’ll learn

  • Gain a solid architectural understanding of ASP.NET MVC 5
  • Explore the entire ASP.NET MVC Framework as a cohesive whole
  • Learn what’s new in version 5 and how best to apply these new features to your own work
  • See how MVC and test-driven development work in action
  • Capitalize on your existing knowledge quickly and easily through comparison of features in classic ASP.NET to those in ASP.NET MV

Who this book is for

This book is for web developers with a basic knowledge of ASP.NET and C#who want, or need, to start using the new ASP.NET MVC 5 Framework.

Download

Table of Contents

Part I: Introducing ASP.NET MVC 5

1. What’s The Big Idea

2. Your first MVC Application

3. The MVC Pattern

4. Essential Language Features

5. Working with Razor

6. Essential Tools for MVC

7. Sports Store: A Real Application

8. Sports Store: Navigation

9. Sports Store: Cart

10. Sports Store: Mobile

11. Sports Store: Admin

12. Sports Store: Security and Finishing Touches

13. Deployment

Part II: ASP.NET MVC 5 In Detail

14. Overview of MVC5 Projects

15. URL Routing

16. Advanced Routing Features

17. Controllers and Actions

18. Filters

19. Controllers Extensibility

20. Views

21. Helper Methods

22. Templated Helper Methods

23. URL and Ajax Helper Meothods

24. Model Binding

25. Model Validation

26. Bundles

27. WebAPI and Single Page Applications

Download