Cách sử dụng signalR để CRUD trong asp.net mvc5

**honghoa** · 08-06-2015, 04:43 PM

Hôm trước em mới tìm hiểu về cái signalr thấy nó hay quá nên em đã làm ví dụ về sử dụng signalr này thêm, sửa, xoá dùng database vì mình ngó trên mạng toàn ví dụ về chat thôi. Mình xin bắt đầu nhé.

- Bước 1: các bạn project mới mvc bằng visual 2013 nhé. (ở đây mình dùng visual 2013 bản express for web nhé)

- Bước 2: các bạn tạo một database trong sql server rồi dùng visual 2013 kết nối đến nó nhé, mình sử dụng linq to sql để kết nối với database nhé (các bạn có thể tham khảo cách sử dụng linq to sql ở đây)

xem ảnh to hơn

- Bước 3: sử dụng tính năng của nuget trên visual 2013 để cài đặt các gói liên quan đến signalr nhé, bạn paste dòng lệnh vào Package Manager Console nhé
Install-Package Microsoft.AspNet.SignalR

xem ảnh to hơn

Ok chúng ta đã cài đặt thành công signalR vào project giờ là viết code thao tác rồi.

- Bước 4: Tạo một thư mục có tên là Hubs trong dự án, click chuột phải lên thư mục Hubs và tạo một file như trong hình ở đây mình đặt tên là DemoHub, sau khi tạo thành công file này bạn hãy ghi đè đoạn code sau vào file bạn vừa tạo

xem ảnh to hơn

Mã:

/// <summary>
        /// lay ra toan bo ban ghi trong bang categories
        /// </summary>
        public void GetAll()
        {
            using(signalrDataContext db = new signalrDataContext())
            {
                Clients.All.getAll(db.categories.ToList());
            }
        }

        /// <summary>
        /// them moi ban ghi vao trong bang categories
        /// </summary>
        /// <param name="name"></param>
        /// <param name="description"></param>
        public void Add(string name, string description)
        {
            using (signalrDataContext db = new signalrDataContext())
            {
                var model = new category { Name = name, Description = description };
                db.categories.InsertOnSubmit(model);
                db.SubmitChanges();
                Clients.All.getAll();
            }
        }

- Bước 5: Các bạn tìm đến view của action Index của controller Home và thay thế đoạn code sau vào nội dung file này nhé

Mã:

@{
    ViewBag.Title = "Home Page";
}

<div    <h1>Blog thietkweb24.info xin giới thiệu cách sử dụng signalR thao tác với database</h1>
</div>

<div    <div        <form            <div                <input type="text" id="txtName" placeholder="Name"/>
            </div>
            <div                <input type="text" id="txtDes" placeholder="Description"/>
            </div>
            <button type="button" btn-default" id="bntSave">Save</button>
        </form>
    </div>
    <div        <table table-hover">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Description</th>
                    <th></th>
                </tr>
            </thead>
            <tbody id="lstCategories"></tbody>
        </table>
    </div>
</div>
@section scripts{
    <script src="/Scripts/jquery.signalR-2.2.0.js"></script>
    <script src="/signalr/hubs"></script>
    <script type="text/javascript">
        $(function () {
            var demo = $.connection.demoHub;
            demo.client.getAll = function (data) {
                str = '';
                $.each(data, function (i, val) {
                    str += '<tr>'
                    + '<td>' + data[i].Id + '</td>'
                    + '<td>' + data[i].Name + '</td>'
                    + '<td>' + data[i].Description + '</td>'
                    + '<td><button btn-default" type="button">Edit</button> <button btn-default" type="button">Delete</button>'
                    + '</tr>';
                });
                $("#lstCategories").html(str);
            };

            $.connection.hub.start().done(function () {
                demo.server.getAll();
                $("#bntSave").click(function () {
                    demo.server.add($("#txtName").val(), $("#txtDes").val());
                    $("#txtName, #txtDes").val("");
                    $("#txtName").focus();
                });
            });
        });
    </script>
}

- Bước 6: Đến bước chúng ta gần như đã hoàn thành được 2 chức năng là show dữ liệu ra màn hình và thêm mới dữ liệu nhưng cần cấu hình một bước nữa để chúng ta có thể chạy được dự án signalr này đó là. Trong thư mục App_Start click chuột phải và thêm file giống như trong hình

xem ảnh to hơn
và chúng ta thêm đoạn code này vào hàm Configuration nhé

Mã:

app.MapSignalR();

và bây giờ chúng thử build project và chạy xem có được không nhé và đây là thành quả của chúng ta
https://www.youtube.com/embed/LvfQsS-iEmY

Ở đây mình mới làm 2 chức năng là hiển thị dữ liệu và thêm mới dữ liệu, còn 2 chức năng nữa là edit và delete các bạn thử làm xem có được không.

*) Chú ý: Một điểm ở đây mình cần lưu với các bạn là tên file trong thư mục Hubs mình đặt là DemoHub thì trong code js bạn viết thường chữ cái đầu tiên của tên lớp này nhé, phải là demoHub tương tự như vậy thì các function trong lớp DemoHub chúng ta cũng phải viết thường chữ cái đầu trong tên function nhé. Nếu không làm như vậy thì signalR sẽ không chạy được đâu.

Mình cũng đã làm một bài hướng dẫn tại đây(các bạn vào đây để download source code về tham khảo nhé nếu như các bạn chưa làm được).

Trên đây là bài ví dụ của mình về sử dụng signalr trong asp.net mvc5 thao tác với database, rất mong được các bạn góp ý để chúng ta cùng nắm được công nghệ hay này. Cảm ơn các bạn rất nhiều.

View more random threads:

**annguyen** · 12-06-2015, 01:15 PM

Gửi bởi vualuudan1990

Hôm trước em mới tìm hiểu về cái signalr thấy nó hay quá nên em đã làm ví dụ về sử dụng signalr này thêm, sửa, xoá dùng database vì mình ngó trên mạng toàn ví dụ về chat thôi. Mình xin bắt đầu nhé.

- Bước 1: các bạn project mới mvc bằng visual 2013 nhé. (ở đây mình dùng visual 2013 bản express for web nhé)

- Bước 2: các bạn tạo một database trong sql server rồi dùng visual 2013 kết nối đến nó nhé, mình sử dụng linq to sql để kết nối với database nhé (các bạn có thể tham khảo cách sử dụng linq to sql ở đây)

xem ảnh to hơn

- Bước 3: sử dụng tính năng của nuget trên visual 2013 để cài đặt các gói liên quan đến signalr nhé, bạn paste dòng lệnh vào Package Manager Console nhé
Install-Package Microsoft.AspNet.SignalR

xem ảnh to hơn

Ok chúng ta đã cài đặt thành công signalR vào project giờ là viết code thao tác rồi.

- Bước 4: Tạo một thư mục có tên là Hubs trong dự án, click chuột phải lên thư mục Hubs và tạo một file như trong hình ở đây mình đặt tên là DemoHub, sau khi tạo thành công file này bạn hãy ghi đè đoạn code sau vào file bạn vừa tạo

xem ảnh to hơn

Mã:

/// <summary>
        /// lay ra toan bo ban ghi trong bang categories
        /// </summary>
        public void GetAll()
        {
            using(signalrDataContext db = new signalrDataContext())
            {
                Clients.All.getAll(db.categories.ToList());
            }
        }

        /// <summary>
        /// them moi ban ghi vao trong bang categories
        /// </summary>
        /// <param name="name"></param>
        /// <param name="description"></param>
        public void Add(string name, string description)
        {
            using (signalrDataContext db = new signalrDataContext())
            {
                var model = new category { Name = name, Description = description };
                db.categories.InsertOnSubmit(model);
                db.SubmitChanges();
                Clients.All.getAll();
            }
        }

- Bước 5: Các bạn tìm đến view của action Index của controller Home và thay thế đoạn code sau vào nội dung file này nhé

Mã:

@{
    ViewBag.Title = "Home Page";
}

<div class="jumbotron">
    <h1>Blog thietkweb24.info xin giới thiệu cách sử dụng signalR thao tác với database</h1>
</div>

<div class="row">
    <div class="col-md-12">
        <form class="form-inline">
            <div class="form-group">
                <input type="text" class="form-control" id="txtName" placeholder="Name"/>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" id="txtDes" placeholder="Description"/>
            </div>
            <button type="button" class="btn btn-default" id="bntSave">Save</button>
        </form>
    </div>
    <div class="col-lg-12">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Description</th>
                    <th></th>
                </tr>
            </thead>
            <tbody id="lstCategories"></tbody>
        </table>
    </div>
</div>
@section scripts{
    <script src="/Scripts/jquery.signalR-2.2.0.js"></script>
    <script src="/signalr/hubs"></script>
    <script type="text/javascript">
        $(function () {
            var demo = $.connection.demoHub;
            demo.client.getAll = function (data) {
                str = '';
                $.each(data, function (i, val) {
                    str += '<tr>'
                    + '<td>' + data[i].Id + '</td>'
                    + '<td>' + data[i].Name + '</td>'
                    + '<td>' + data[i].Description + '</td>'
                    + '<td><button class="btn btn-default" type="button">Edit</button> <button class="btn btn-default" type="button">Delete</button>'
                    + '</tr>';
                });
                $("#lstCategories").html(str);
            };

            $.connection.hub.start().done(function () {
                demo.server.getAll();
                $("#bntSave").click(function () {
                    demo.server.add($("#txtName").val(), $("#txtDes").val());
                    $("#txtName, #txtDes").val("");
                    $("#txtName").focus();
                });
            });
        });
    </script>
}

- Bước 6: Đến bước chúng ta gần như đã hoàn thành được 2 chức năng là show dữ liệu ra màn hình và thêm mới dữ liệu nhưng cần cấu hình một bước nữa để chúng ta có thể chạy được dự án signalr này đó là. Trong thư mục App_Start click chuột phải và thêm file giống như trong hình

xem ảnh to hơn
và chúng ta thêm đoạn code này vào hàm Configuration nhé

Mã:

app.MapSignalR();

và bây giờ chúng thử build project và chạy xem có được không nhé và đây là thành quả của chúng ta
https://www.youtube.com/embed/LvfQsS-iEmY

Ở đây mình mới làm 2 chức năng là hiển thị dữ liệu và thêm mới dữ liệu, còn 2 chức năng nữa là edit và delete các bạn thử làm xem có được không.

*) Chú ý: Một điểm ở đây mình cần lưu với các bạn là tên file trong thư mục Hubs mình đặt là DemoHub thì trong code js bạn viết thường chữ cái đầu tiên của tên lớp này nhé, phải là demoHub tương tự như vậy thì các function trong lớp DemoHub chúng ta cũng phải viết thường chữ cái đầu trong tên function nhé. Nếu không làm như vậy thì signalR sẽ không chạy được đâu.

Mình cũng đã làm một bài hướng dẫn tại đây(các bạn vào đây để download source code về tham khảo nhé nếu như các bạn chưa làm được).

Trên đây là bài ví dụ của mình về sử dụng signalr trong asp.net mvc5 thao tác với database, rất mong được các bạn góp ý để chúng ta cùng nắm được công nghệ hay này. Cảm ơn các bạn rất nhiều.

bác biết cách phân quyền trong mvc5 k chỉ mình với

**songdonggun** · 26-08-2015, 08:57 AM

mình có post một bài phân quyền mvc rồi mà. 345 đều chạy được hết. [IMG]images/smilies/smile.png[/IMG]

Chủ đề: Cách sử dụng signalR để CRUD trong asp.net mvc5

Công cụ Chủ đề

Tìm Chủ đề

Hiển thị

Cách sử dụng signalR để CRUD trong asp.net mvc5

View more random threads:

Quyền viết bài

Bàn luận thông tin các điều kiêng...

How to make and tie a gift basket...

Phương pháp để quý cô sử dụng cu...

Tìm hiểu để biết máy rung tình yêu...

Các yếu tố phụ thuộc khi mua...