【ASP.net MVC SignalR】利用 SignalR 同步表單中的資料教學

2013-05-28

7062
0
Asp.net MVC

【ASP.net MVC SignalR】利用 SignalR 同步表單中的資料教學
在寫SignalR的文章也有一段時間了，或許許多人都知道Signalr可以製作出一個同步的聊天室，但是其實在實際的專案中也可以大量應用，今天就用簡單的例子，來同步表單中相對應的input資料吧！而小弟擅長的開發模式是使用C#的MVC專案，所以以下的範例都會使用ASP.net MVC來做範例
一個簡單的範例說明：在表單上產品代號是屬於我們資料的主要索引，不可以讓使用者更改，而產品型號、產品名稱、顏色，則是可以讓使用者任意修改！在這些input上只要資料有異動，就會同步到所有使用者的畫面中，讓表單中的資料維持最新的資料！

在寫SignalR的文章也有一段時間了，或許許多人都知道Signalr可以製作出一個同步的聊天室，但是其實在實際的專案中也可以大量應用，今天就用簡單的例子，來同步表單中相對應的input資料吧！而小弟擅長的開發模式是使用C#的MVC專案，所以以下的範例都會使用ASP.net MVC來做範例

還不知道Signalr的朋友，可以看看這篇文章：點我

一個簡單的範例說明：在表單上產品代號是屬於我們資料的主要索引，不可以讓使用者更改，而產品型號、產品名稱、顏色，則是可以讓使用者任意修改！在這些input上只要資料有異動，就會同步到所有使用者的畫面中，讓表單中的資料維持最新的資料！

畫面大致呈現如下：

第一步，在Controller中新增一個ActionResult

public ActionResult Update()
{
    return View();
}

下一步，新增一個JS檔案，名為SignalR.Update.js

$(function () {
	var chat = $.connection.chat;

	chat.client.update = function (ProductKey, ProductAlternatekey, EnglishProductName, Color) {
		var updateTr = $("#DataTable tr").eq(ProductKey).find("td input");
		updateTr.eq(0).val(ProductAlternatekey);
		updateTr.eq(1).val(EnglishProductName);
		updateTr.eq(2).val(Color);
	};

	$("input:text").change(function () {
		var data = $(this).closest("tr").find("td input");chat.server.updatedata({ ProductKey:$(this).closest("tr").find("td:eq(0)").text(), ProductAlternatekey: data.eq(0).val(), EnglishProductName: data.eq(1).val(), Color: data.eq(2).val() });
	});

	$.connection.hub.start()
    .done(function () {
    	chat.server.hello();
    })
	.fail(function () {
		alert("Error connecting to realtime service");
	});
});

下一步，在BundleConfig中加入所需的JS檔案

bundles.Add(new ScriptBundle("~/bundles/SignalRUpdate").Include(
                        "~/Scripts/jquery.signalR-{version}.js",
                        "~/JQuery/SignalR.Update.js"));

下一步，加入檢視，建立View頁面

@{
    ViewBag.Title = "Update";
}

<h2>Update</h2>
<table id="DataTable">
    <thead>
        <tr>
            <th data-name="ProductKey">產品代號</th>
            <th data-name="ProductAlternatekey">產品型號</th>
            <th data-name="EnglishProductName">產品名稱</th>
            <th data-name="Color">產品顏色</th>
        </tr>
    </thead>
    <tbody id="TableBody">
        <tr class="tr1">
            <td>1</td>
            <td><input type="text" name="ProductAlternatekey" value="AR-5381" /></td>
            <td><input type="text" name="EnglishProductName" value="Adjustable Race" /></td>
            <td><input type="text" name="Color" value="N/A" /></td>
        </tr>
        <tr  class="tr2">
            <td>2</td>
            <td><input type="text" name="ProductAlternatekey" value="BA-8327" /></td>
            <td><input type="text" name="EnglishProductName" value="Bearing Ball" /></td>
            <td><input type="text" name="Color" value="N/A" /></td>
        </tr>
        <tr class="tr3">
            <td>3</td>
            <td><input type="text" name="ProductAlternatekey" value="BE-2349" /></td>
            <td><input type="text" name="EnglishProductName" value="BB Ball Bearing" /></td>
            <td><input type="text" name="Color" value="N/A" /></td>
        </tr>
    </tbody>
</table>
   
@section Scripts {
    @Scripts.Render("~/bundles/SignalRUpdate")
    <script src="~/Signalr/hubs"></script>
}

接下來，要在最重要的Chat.cs檔案中，加入下列程式碼

public void updatedata(Product data)
        {
            Clients.All.update(data.ProductKey, data.ProductAlternatekey, data.EnglishProductName, data.Color);
        }

Product Class內容如下：

public class Product
    {
        public int ProductKey { get; set; }
        public String EnglishProductName { get; set; }
        public String ProductAlternatekey { get; set; }
        public String Color { get; set; }
    }

接下來直接執行這些Code就可以修改input的資料囉！

要做到同步化的網站建置，其實並不難對吧？

這邊的範例撰寫的會比較直觀，讓還不太了解JS與Signalr的不會感覺到吃力

本範例的程式碼根據CC創用分享，轉載需附上本篇連結以及非商業用途

大家好我是饅頭，希望大家喜歡我的文章

如果有錯誤的地方請不吝指教 ^_^

回首頁