Question

我正在使用Asp.net和vb.net与SQL数据库构建一个应用程序来进行在线测验。我打算在提交测验之前显示一个对话框。我在表中捕获用户响应。

在更新测验之前，我想在确认对话框中向用户显示未回答问题的计数。我尝试使用确认对话框扩展器。我能够得到未答复问题的数量。

问题是如何在确认框扩展器中显示它。

如果有人可以提供帮助或提出其他一些方法，我们将不胜感激。

由于

Answer 1

在您的视图中使用onclick属性：

<input type="button" onclick="ConfirmCheck()" value="submit"/>

在你的剧本中：

function ConfirmCheck() {
        showMessageBox({
            int unasweredCount  = UnansweredCounter();// this came from your Counter function script 
            message: "You unanswered " + unansweredCount +"questions.Do you want submit this quiz?",
            yes: function () {
                $.ajax({
                    url: "@Url.Action("Save", "Quiz")",
                    data: { model : quizModel },
                    success: function (result) {
                        if(result == "true") 
                          alert("Your quiz saved successfully");
                    }

                });
            }

        });
    }

在MessageBox.js中：

function showMessageBox(options) {

$("body").after("<div class='content'  id='confirmDialog'>" +
" <div class='lightbox'>" +
    "<p>" + options.message +
        "</p>" +
    "<button type='button' class='btn-gold' id='btnYes'>Yes</button>" +
    "<button type='button' class='btn-gold' id='btnNo'>No</button>" +
"</div></div>");
var y = Math.round((getBrowserHeight() * 0.2)) + "px";
$(".lightbox").css({ "top": y });
$("#confirmDialog").css({ display:"block"});


$("div#confirmDialog button#btnYes").click(function () {
    closeDialog(); if (options.yes) options.yes(options.param)
});
$("div#confirmDialog button#btnNo").click(function () {
    closeDialog(); if (options.no) options.no(options.param)
});

}
function getBrowserHeight() {
if (window.innerHeight) {
    return window.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight != 0) {
    return document.documentElement.clientHeight;
}
else if (document.body) { return document.body.clientHeight; }
return 0;
}

function closeDialog() {
$("#confirmDialog").slideUp("fast");
$("#confirmDialog").remove();
}

最后LightBox.css：

.content {
width: 100%;
height: 100%;
z-index: 10000001;
background: rgba(0,0,0,.8);
position: fixed;
top: 0;
display: none;
-webkit-animation: slide .5s forwards linear;
-moz-animation: slide .5s forwards  linear;
-ms-animation: slide .5s forwards  linear;
-o-animation: slide .5s forwards  linear;
animation: slide .5s forwards  linear;
}

@-webkit-keyframes slide {
from {
    -webkit-transform: translateY(-100%);
}

80% {
    -webkit-transform: translateY(-50px);
}

85% {
    -webkit-transform: translateY(0px);
}

90% {
    -webkit-transform: translateY(-20px);
}

to {
    -webkit-transform: translateY(0);
}
}

@-moz-keyframes slide {
from {
    -moz-transform: translateY(-100%);
}

80% {
    -moz-transform: translateY(-50px);
}

85% {
    -moz-transform: translateY(0px);
}

90% {
    -moz-transform: translateY(-20px);
}

to {
    -moz-transform: translateY(0);
}
}

@-ms-keyframes slide {
from {
    -ms-transform: translateY(-100%);
}

80% {
    -ms-transform: translateY(-50px);
}

85% {
    -ms-transform: translateY(0px);
}

90% {
    -ms-transform: translateY(-20px);
}

to {
    -ms-transform: translateY(0);
}
}

@-o-keyframes slide {
from {
    -o-transform: translateY(-100%);
}

80% {
    -o-transform: translateY(-50px);
}

85% {
    -o-transform: translateY(0px);
}

90% {
    -o-transform: translateY(-20px);
}

to {
    -o-transform: translateY(0);
}
}

@keyframes slide {
from {
    transform: translateY(-100%);
}

80% {
    transform: translateY(-50px);
}

85% {
    transform: translateY(0px);
}

90% {
    transform: translateY(-20px);
}

to {
    transform: translateY(0);
}
}


.lightbox {
width: 30%;
z-index: 10000002;
background: #eee;
border: 1px solid #999;
position: fixed;
margin: 80px -15% 0 0;
right: 50%;
display: inherit;
color: #333;
min-width: 120px;
text-align: center;
}

.lightbox p {
    padding: 20px 0;
    color: #f00;
    font-size: large;
    text-shadow:0 1px 0 #ccc;
}

.lightbox button {
    min-width: 100px;
    padding: 5px;
    margin: 5px;
    background: rgb(0,0,0);
    background: rgba(0,0,0,.7);
    border: 2px solid #fff;
    color: #fff;
    outline:none;
}

    .lightbox button:hover,.lightbox button:focus {
        background:rgb(53,53,53);
        background: rgba(0,0,0,.5);
        cursor: pointer;
    }

    .lightbox button:active {
        background: #27e;
        border-color: #27e;
    }

从数据库中获取值并将其显示在确认框扩展器中

1 个答案: