asp.net mvc3, knockout.js form submit to server

Question

I have a view displaying a list of users populating from a ViewModel.

    function MyUser(data) {
     this.Id = ko.observable(data.Id);
     this.phone = ko.observable(data.Phone);
     this.Company = ko.observable(data.Company);
     this.SelectedGrowerID = ko.observable(data.SelectedGrowerID);

     this.setSelectedClass = function (item, event) {
        $('#hfGrowerID').val(event.target.id);

      this.SelectedGrowerID = event.target.id;
    };
   }

    function UserListViewModel() {
    // Data
    var self = this;
    self.users = ko.observableArray([]);

    // Load initial state from server, convert it to MyUser instances, then  populate  self.users
    $.getJSON("UserList/GetAllUsers", function (allData) {
    var mappedUsers = $.map(allData, function (item) { return new MyUser(item) });
    self.users(mappedUsers);
    });

I have a simple form with list items bound to the Company of each user. Additionally, I have a hidden field into which I save the id of the user when each listitem is clicked.

        <form action="UserList/Save" method="post">
          <ul id="UserList" data-bind="foreach: users" data-role="listview">
            <li data-bind="click: setSelectedClass"><a data-bind="attr: {id: Id}">
            <span data-bind="text: Company" /></a></li>
          </ul>

          <input id="hfGrowerID" type="hidden" />
          <input type="hidden" name="users" data-bind="value: ko.toJSON(users)" />

          <button type="submit">Save</button>
        </form>

In my UserListController, I want to get the value of the hidden field 'hfGrowerID'. The Save function looks like this:

     <HttpPost()>
     Public Function Save(<FromJson()> users As IEnumerable(Of MyUserModel),
     hfGrowerID As String) As ActionResult
       'do stuff
       Return View ("Index", users)
     End Function

Now, the problem is, hfGrowerID does not have any value and doing Request.Form("hfGrowerID") returns nothing as well. I verified that hfGrowerID is getting a value after clicking a list item by doing alert and console.log.

How do I get the value of the hidden field that is not part of my ViewModel?

Thanks a lot in advance for any help.

Answer 1

Why not add selectedGrowerId to your ViewModel?

If you post the form via AJAX, you wouldn't even need the hidden form field!

I'm guessing that the setSelectedClass function, the function called when a user clicks on one of your <li> tags, is currently setting the value of the hfGrowerID hidden form field?

Instead, have that function set the value of selectedGrowerId in your ViewModel, and change the submit button so it is a normal button whose click event is bound to a submitForm function that posts the necessary data via AJAX.

UPDATE: Response to additional code added to question

I'm willing to bet that your this references are getting you into trouble.

Try changing your MyUser function to the following:

function MyUser(data) {
    var self = this;
    self.Id = ko.observable(data.Id);
    self.phone = ko.observable(data.Phone);
    self.Company = ko.observable(data.Company);
    self.SelectedGrowerID = ko.observable(data.SelectedGrowerID);

    self.setSelectedClass = function (item, event) {
        $('#hfGrowerID').val(event.target.id);
        self.SelectedGrowerID = event.target.id;
    };
}

Even though it looks like I simply replaced this with self , I believe that there's a difference in the meaning of this inside the setSelectedClass function, compared to the value of this outside of that function, buy within the MyUser function.