使用SignalR从客户端向服务器发送模型数据

时间:2017-07-02 21:45:50

标签: asp.net asp.net-mvc signalr

如果我想使用SignalR更新模型/数据库,这是如何实现的? (反过来,即从服务器到客户端在许多教程中都有解释,但这种方式?)

所以说我们有一个简单的模型

public class User
{
    public int UserID { get; set; }

    public string UserName { get; set; }

}

相应的View有一个名称的输入字段。集线器就像

public class UserHub : Hub
{
    public void UpdateName(string value)
    {
        // now what?

        Clients.All.updateTheViewIfNecessary(string newValue);

    }
}

修改 如何更新模型,即如何获得与常规 CRUD 编辑控制器中相同的结果

db.Entry(user).State = EntityState.Modified;
db.SaveChanges();

2 个答案:

答案 0 :(得分:2)

出于本示例的目的,我们将使用JS客户端将模型发送到Hub并引用官方文档

ASP.NET SignalR Hubs API Guide - JavaScript Client: How to call server methods from the client

假设服务器上有用户中心

public interface IUserService {
    bool UpdateName(string userName);
    // Other methods not shown.
}

public class UserHub : Hub {
    private readonly IUserService service;

    public UserHob(IUserService service) {
        this.service = service;
    }

    public void UpdateName(string value) {
        if(value != null) {
            var newValue = value;
            if(service.UpdateName(newValue) == true) {                    
                Clients.All.updateTheViewIfNecessary(newValue);
            }
        }
    }
}

Dependency Injection in SignalR上的参考文档,了解如何将依赖项注入集线器。在上面的UserHub中,当收到消息时,它使用模型中的数据通过注入的依赖关系更新/持久化数据,并根据该操作的结果通知客户端。这可能允许长时间运行的进程,以后可以根据需要更新客户端。

调用服务器方法的JavaScript客户端代码(假设使用生成的代理)看起来像这样。

//This assumes View has an input field for the name
var message = "Test Name";
userHubProxy.server.updateName(message).done(function () {
    console.log ('Invocation of UpdateName succeeded');
}).fail(function (error) {
    console.log('Invocation of UpdateName failed. Error: ' + error);
});

框架将处理需要在服务器上完成的任何模型绑定。

集线器实际上充当服务端点,并将调用服务的响应发送给与其连接的所有客户端。

答案 1 :(得分:1)

调用服务器函数以传递下面javascript中显示的值。

我还包括示例html表,其中包含用户单击每个按钮单击

来调用服务器功能

    <table id="tblData">
        <tr>
            <td><input type="button" value="User 1" /> </td>
            <td><button type="button" value="2" title="User 2">User 2</button></td>
            <td><input type="button" value="User 3" /></td>
            <td><input type="button" value="User 4" /></td>
        </tr>
    </table>
    
var userId, userName, strOtherVal;
userId = 1; // sample values
userName = 'ali';
strOtherVal = 'admin';

         $(function () {
            $("#tblData tr td button,input").click(function (event) {

                 myHub.server.sendData(userId, userName, strOtherVal)
                    .fail(function (error) {
                        console.log('error sending data: ' + error)
                    });
                
            });
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

在服务器端,您的功能将如下所示

 public void sendData(int userId, string userName, string strOtherVal)
        {
            //create model
            var UserModel = new User() { UserID = userId, UserName = userName, OtherVal = strOtherVal };

            //here call your function to check or post this model to db

        }


 public class User
    {
        public int UserID { get; set; }

        public string UserName { get; set; }

        public string OtherVal { get; set; }
    }