Блог

Я работаю над игрой на jQuery, и я новичок в ней. Мне было интересно, как можно сохранить результаты этих игр в некоторой переменной, а затем в некоторой переменной в c #, чтобы я мог установить SQL-соединение и отправить его в таблицу БД. Я не знаю, возможно ли это, но я хочу, чтобы это работало примерно так. Не знаю, как использовать вызов ajax и прочее. Мне было бы легче работать, если бы он каким-то образом был связан с c #. Я работаю над asp.net веб-формы.

Помогите мне с подсчетом очков, пожалуйста! Я так хочу это сделать, но у меня не так много времени. Спасибо.

Вот код,

  $(document).ready(function () {
            $('#Img6').hide();
            $('#Img7').hide();
            $(function () {
            $("#draggable").draggable({ revert: "invalid", helper: 'clone', tolerance: 'fit' });
            $("#draggable1").draggable({ revert: "invalid", helper: 'clone', tolerance: 'fit' });
            $("#draggable2").draggable({ revert: "invalid", helper: 'clone', tolerance: 'fit' });
            $("#droppable").droppable({

                activeClass: "ui-state-default",
                hoverClass: "ui-state-hover",
                drop: function (event, ui) {
                    var TestOp = $(this).attr('id');
                    if (TestOp == "droppable") {
                        $("#draggable2").draggable({ revert: "invalid" });
                        $("#draggable1").draggable({ revert: "valid" });
                        $("#draggable").draggable({ revert: "valid" });

                        $(this)
      .addClass("ui-state-highlight")
      .find("> p")
        .html("Dropped!");
                        return true;
                    }

                    else {
                        $(this)
      .addClass("ui-state-highlight")
      .find("> p")
        .html("Wolaaa");
                    }
                }
            });
        });


        $(".arrow").click(function () {
            $('#Img1').hide();
            $('#Img6').show();

            $(function () {
                $("#draggable").draggable({ revert: "valid", helper: 'clone' });
                $("#draggable1").draggable({ revert: "valid", helper: 'clone' });
                $("#draggable2").draggable({ revert: "valid", helper: 'clone' });

                //            $(".draggable,.draggable1,.draggable2").draggable('refresh');
                $("#droppable").droppable({
                    activeClass: "ui-state-default",
                    hoverClass: "ui-state-hover",
                    drop: function (event, ui) {
                        var TestOp = $(this).attr('id');
                        if (TestOp == "droppable") {
                            $("#draggable2").draggable({ revert: "valid" });

                            $("#draggable1").draggable({ revert: "valid" });
                            $("#draggable").draggable({ revert: "invalid" });

                            $(this)
      .addClass("ui-state-highlight")
      .find("> p")
        .html("Dropped!");
                            return true;
                        }

                        else {
                            $(this)
      .addClass("ui-state-highlight")
      .find("> p")
        .html("Wolaaa");
                        }
                    }
                });
            });

        });
        $(".arrow").dblclick(function () {
            $('#Img7').show();
            $('#Img6').hide();
            $('#Img1').hide();
            $(function () {
                $("#draggable").draggable({ revert: "invalid" });
                $("#draggable1").draggable({ revert: "invalid" });
                $("#draggable2").draggable({ revert: "invalid" });
                $("#droppable").droppable({
                    activeClass: "ui-state-default",
                    hoverClass: "ui-state-hover",
                    drop: function (event, ui) {
                        var TestOp = $(this).attr('id');
                        if (TestOp == "droppable") {
                            $("#draggable2").draggable({ revert: "valid" });
                            $("#draggable1").draggable({ revert: "invalid" });
                            $("#draggable").draggable({ revert: "valid" });

                            $(this)
      .addClass("ui-state-highlight")
      .find("> p")
        .html("Dropped!");
                            return true;
                        }

                        else {
                            $(this)
      .addClass("ui-state-highlight")
      .find("> p")
        .html("Wolaaa");
                        }
                    }
                });
            });
        });

        $(".leftarrow").click(function () {
            $('#Img1').show();
            $('#Img6').hide();
            $('#Img7').hide();
        });
    });

    $('#submitScore').on('click', function (e) {

    $.post( 'example.aspx', { userScore: '100', userId: '2' })
    .done(function (data) {

    alert( "Data Loaded: "   data );
    });

    });
 

Я бы посоветовал использовать локальное хранилище HTML для хранения результатов. Это также позволит сохранять оценки между сеансами.

Вы можете прочитать о локальном хранилище здесь: http://diveintohtml5.info/storage.html

Если вы хотите вернуть значение обратно в C #, а также / вместо этого, вы можете просто сделать это с помощью обычного вызова Ajax. Предполагая, что вы используете MVC и Web API, затем настройте маршрут, если он отличается от стандартного;

         config.Routes.MapHttpRoute(
            name: "ScoreApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
 

Затем создайте контроллер веб-Api (или обычный контроллер, если вы действительно этого хотите, но вам также нужен стандартный маршрут MVC).;

     [HttpPost]
    public HttpResponseMessage Post(string score)
    {
        ////DO SOMETHING WITH SCORE

        HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.OK, "value");
        response.Content = new StringContent("Score Saved", Encoding.Unicode);
        response.Headers.CacheControl = new CacheControlHeaderValue()
        {
        MaxAge = TimeSpan.FromMinutes(20)
        };

        return response;
    }
 

Теперь, наконец, просто вызовите из своей функции удаления;

         $.ajax({
            type: "POST",
            url: "/api/SaveScore"   score,
            contentType: "application/json",
            dataType: "json",
            success: function(data) {

                alert(Data);

            }
        });