2017-03-22 34 views
0

我目前正在學習SignalR.Net MVC並遵循一個簡單的應用程序的教程。現在它工作正常,但我無法理解某些部分,並且如果可能的話,想要加強它。如何使用SignalR hub.server切換類別?

Plane Seats Tutorial link

現在應用程序正在工作,當用戶點擊一個座位上,它保留它。而且沒有回頭路。我想要像切換一樣實現,如果用戶想要更換座位,他可以取消保留他選定的座位,然後可以自由保留另一個座位。我無法通過myHub.server.selectSeat(userId, $(this).toggleClass(settings.selectingSeatCss));來完成。每當我點擊一個座位,它給了我這個錯誤在開發工具

未捕獲:轉換圓形結構,以JSON

var settings = { 
    rows: 5, 
    cols: 15, 
    rowCssPrefix: 'row-', 
    colCssPrefix: 'col-', 
    seatWidth: 35, 
    seatHeight: 35, 
    seatCss: 'seat', 
    selectedSeatCss: 'selectedSeat', 
    selectingSeatCss: 'selectingSeat' 
}; 
$(function() { 
    //// Start the hub 
    window.hubReady = $.connection.hub.start(); 
}); 
$.connection.hub.start().done(function() { 
    // Call the server side function AFTER the connection has been started 
    myHub.server.createUser(); 
    //invoke for the user data 
    myHub.server.populateSeatData(); 
}); 
// Seat selection 
$('.' + settings.seatCss).click(function() { 
    if ($(this).hasClass(settings.selectedSeatCss)) { 
     alert('Sorry, this seat has been already reserved'); 
    } else { 
     //$(this).toggleClass(settings.selectingSeatCss); 
     //myHub.server.selectSeat(userId, $(this).toggleClass(settings.selectingSeatCss)); 
     myHub.server.selectSeat(userId, $(this)[0].innerText); 
    } 
}); 
// Client method to broadcast the message 
myHub.client.createUser = function(message) { 
    userId = message; 
}; 
//get seats data 
myHub.client.populateSeatData = function(message) { 
    var parsedSeatsData = JSON.parse(message); 
    $('li.seat').removeClass(settings.selectedSeatCss); 
    $.each(parsedSeatsData, function(index, value) { 
     $("a:contains('" + value.seatnumber + "')").parent("li").toggleClass(settings.selectedSeatCss); 
    }); 
}; 
// Client method to broadcast the message as user selected the seat 
myHub.client.selectSeat = function(message) { 
    var parsedSeatData = JSON.parse(message); 
    $("a:contains('" + parsedSeatData.seatnumber + "')").parent("li").toggleClass(settings.selectedSeatCss); 
}; 

而且任何人都可以請簡單介紹一下什麼是str.push在做這個代碼塊?它到底在推動什麼?

var init = function(reservedSeat) { 
    var str = [], 
     seatNo, className; 
    for (i = 0; i < settings.rows; i++) { 
     for (j = 2; j < settings.cols; j++) { 
      seatNo = (i + j * settings.rows + 1); 
      className = settings.seatCss + ' ' + settings.rowCssPrefix + i.toString() + ' ' + settings.colCssPrefix + j.toString(); 
      if ($.isArray(reservedSeat) && $.inArray(seatNo, reservedSeat) != -1) { 
       className += ' ' + settings.selectedSeatCss; 
      } 
      str.push('<li class="' + className + '"' + 'style="top:' + (i * settings.seatHeight).toString() + 'px;left:' + (j * settings.seatWidth).toString() + 'px">' + '<a title="' + seatNo + '">' + seatNo + '</a>' + '</li>'); 
     } 
    } 
    $('#place').html(str.join('')); 
}; 

回答

0

我不得不使用toggleSeat()功能,而不是僅僅使用toggleClass的。

public void toggleSeat(int userId, int seatNumber) 
     { 
      PlaneSeatArrangment mySeat = allSeats.Where(s => s.SeatNumber == seatNumber).FirstOrDefault(); 
      var retunData = JsonConvert.SerializeObject(mySeat); 
      if (mySeat != null && userId == mySeat.UserId) 

      ..............    
     }