How to auto-update selected item in dropdown to al

Question

SOLVED:

Added the new corrected lines of code and commented the old ones.

---

For a real-time application using SignalR, i want changes made by a user to be visible in real-time by all the connected clients.

It's ok with a simple textbox, but when i use a dropdown list: when a user select an item, i want the selected item from dropdown to be automatically set (auto-updated) to all connected clients.

Knockout.js seems to be the obvious choice, but i think i have a problem on subscribe... or elsewhere?

What i have:

(ASP .NET Razor) Dropdown:

//@Html.DropDownListFor(model => model.UserProfile.UserId, (SelectList)ViewBag.DDLUsersId, "Select User", new { @class = "ui-corner-all", @data_bind="value: selectedResponsible_UserId" })

@Html.DropDownListFor(model => model.UserProfile.UserId, (SelectList)ViewBag.DDLUsersId, "Select User", new { @class = "ui-corner-all", @data_bind="value: Responsible_UserId" })

(HTML) which generates:

//<select class="ui-corner-all" data-bind="value: selectedResponsible_UserId" id="UserProfile_UserId" name="UserProfile.UserId"><option value="">Select User</option>

<select class="ui-corner-all" data-bind="value: Responsible_UserId" id="UserProfile_UserId" name="UserProfile.UserId"><option value="">Select User</option>
    <option value="1">test1</option>
    <option value="2">test2</option>
</select>

(JavaScript) ViewModel:

function taskViewModel(id, title, Responsible_UserId, ownerViewModel)
{
    this.taskId = id;

    this.title = ko.observable(title);

    //this.selectedResponsible_UserId = ko.observable(Responsible_UserId);

    this.Responsible_UserId = ko.observable(Responsible_UserId);

    this.notification = function (b) { notify = b }

    var self = this;

    this.title.subscribe(function (newValue) 
    {
        ownerViewModel.updateTask(ko.toJS(self));
    });

    //this.selectedResponsible_UserId.subscribe(function (newValue) 

    this.Responsible_UserId.subscribe(function (newValue) 
    {
        ownerViewModel.updateTask(ko.toJS(self));
    });
}

(JavaScript) Function from Client-Side which call the function from Server-Side with specified object:

this.updateTask = function (task)
{    
    if (notify) 
        this.hub.server.s_Update(task);
}

(C#) Function from Server-Side which modify values in DB and call the function from Client-Side for all the connected Clients with specified object:

public bool S_Update(Task updatedTask)
{
    using (var context = new ToDoDbContext())
    {
        var oldTask = context.Tasks.FirstOrDefault(t => t.taskId == updatedTask.taskId);

        if (oldTask == null)
            return false;
        else
        {
            oldTask.title = updatedTask.title;

//??? Here, value 'updatedTask.Responsible_UserId' was NULL !!!
            oldTask.Responsible_UserId = updatedTask.Responsible_UserId;

            context.SaveChanges();

            Clients.All.C_TaskUpdated(oldTask);

            return true;
        }
    }
}

(JavaScript) Function from Client-Side which should update the Interface:

this.hub.client.C_TaskUpdated = function (t)
{
    var task = ko.utils.arrayFilter(tasks(), function (value) { return value.taskId == t.taskId; })[0];

    notify = false;
        task.title(t.title);    

//!! obvious, here was set to NULL.     
        //task.selectedResponsible_UserId(t.Responsible_UserId);

        task.Responsible_UserId(t.Responsible_UserId);
    notify = true;
};

Answer 1

If I follow this correctly, your prop is called selectedResponsible_UserId on the client-side and Responsible_UserId on the server. Looks like this potential mismatch is causing your issue.