1

好的，所以上次我在 MVC3 上提出了一个问题，它的票数非常低，我不知道为什么，所以如果情况相同，请告诉我原因，以便我修复它。无论如何，我尝试从模型中获取一个字符串并将其放入 Javascript 中。Javascript 操作字符串。我已经让 Javascript 使用数组中的静态字符串，但是我希望将这些字符串放在 SQL 数据库中并将其加载到模型中，然后从那里将其放入已经完成大部分工作的 Javascript 中。

这是我的javascript：

function questionViewModel() {
    this.questions = new Array("Whats the difference between axial leads and radial leads?", "What is the difference between AC and DC current?", "Is Nikola Telsa known for his work with AC current or DC current.", "What is a semiconductor?");
    this.answers = new Array();
    this.answers[0] = new Array("Radial leads point in the same direction, while axial leads point in oppossite directions", "Radial leads are round, while Axial leads are square", "There is no difference");
    this.answers[1] = new Array("DC has current flowing constantly in one direction, while AC has the flow of current changing.", "AC has current flowing constantly in one direction, while DC has the flow of current changing.", "AC is weaker than DC");
    this.answers[2] = new Array("AC", "DC", "Both");
    this.answers[3] = new Array("A material which has electrical conductivity between that of a metal and an insulator.", "Something that reduces the flow of current", "A large wire");
    this.right = new Array("Radial leads point in the same direction, while axial leads point in oppossite directions", "DC has current flowing constantly in one direction, while AC has the flow of current changing.", "AC", "A material which has electrical conductivity between that of a metal and an insulator.");
    this.i = Math.floor(Math.random() * this.questions.length);
    this.a = Math.floor(Math.random() * this.answers[0].length);
    var iAns1 = this.i;
    var iAns2 = this.i;
    var iAns3 = this.i;
    this.currentQuestion = this.questions[this.i];
    this.nextQuestion = "";
    this.answer1 = ko.observable(this.answers[this.i][0]);
    this.answer2 = ko.observable(this.answers[this.i][1]);
    this.answer3 = ko.observable(this.answers[this.i][2]);
}

所以我希望做的是将字符串加载到模型中的问题和答案数组中，我想这将在大部分情况下在控制器中完成，然后脚本会将其附加到视图中。

如果有人可以帮助我，我将不胜感激，顺便说一句，我对 .Net 和 MVC3 很陌生，所以我需要我能得到的所有帮助。谢谢你。

4

3 回答 3

1

我上周五做了这个，所以很难描述今天是星期一，我刚开始工作，无论如何这是我最终使用的解决方案：

控制器：

public ViewResult Questionare()
    {
        Goldienator.Models.QuestionnaireModel model = new Models.QuestionnaireModel();
        model.question1 = "Whats the difference between axial leads and radial leads?";
        model.question2 = "What is the difference between AC and DC current?";
        model.question3 = "Is Nikola Telsa known for his work with AC current or DC current?";
        model.question4 = "What is a semiconductor?";
        model.answer11 = "Radial leads point in the same direction, while axial leads point in oppossite directions";
        model.answer12 = "Radial leads are round, while Axial leads are square";
        model.answer13 = "There is no difference";
        model.answer21 = "DC has current flowing constantly in one direction, while AC has the flow of current changing.";
        model.answer22 = "AC has current flowing constantly in one direction, while DC has the flow of current changing.";
        model.answer23 = "AC is weaker than DC";
        model.answer31 = "AC";
        model.answer32 = "DC";
        model.answer33 = "Both";
        model.answer41 = "A material which has electrical conductivity between that of a metal and an insulator.";
        model.answer42 = "Something that reduces the flow of current";
        model.answer43 = "A large wire";
        return View(model);
    }

模型：

public class QuestionnaireModel
{
    public string question1;
    public string question2;
    public string question3;
    public string question4;
    public string answer11;
    public string answer12;
    public string answer13;
    public string answer21;
    public string answer22;
    public string answer23;
    public string answer31;
    public string answer32;
    public string answer33;
    public string answer41;
    public string answer42;
    public string answer43;
}

看法：

<div style="margin:0 20px 0 20px;" >
    <input type="text" id="question1" style="display: none;" value="@Model.question1">
    <input type="text" id="question2" style="display: none;" value="@Model.question2">
    <input type="text" id="question3" style="display: none;" value="@Model.question3">
    <input type="text" id="question4" style="display: none;" value="@Model.question4">
    <input type="text" id="answer11" style="display: none;" value="@Model.answer11">
    <input type="text" id="answer12" style="display: none;" value="@Model.answer12">
    <input type="text" id="answer13" style="display: none;" value="@Model.answer13">
    <input type="text" id="answer21" style="display: none;" value="@Model.answer21">
    <input type="text" id="answer22" style="display: none;" value="@Model.answer22">
    <input type="text" id="answer23" style="display: none;" value="@Model.answer23">
    <input type="text" id="answer31" style="display: none;" value="@Model.answer31">
    <input type="text" id="answer32" style="display: none;" value="@Model.answer32">
    <input type="text" id="answer33" style="display: none;" value="@Model.answer33">
    <input type="text" id="answer41" style="display: none;" value="@Model.answer41">
    <input type="text" id="answer42" style="display: none;" value="@Model.answer42">
    <input type="text" id="answer43" style="display: none;" value="@Model.answer43">
    Click start to be asked a question, if you get enough right, you will recieve a discount!
    <button id="start" value="start" onclick="start()">start</button>
    <p data-bind="text: currentQuestion"></p>
    <label>Answer:</label>
    <div>
        <input type="radio" id="answer1" name="ans" style="margin: 10px;" data-bind="value: answer1()"><span data-bind="text: answer1()"></span><br>
        <input type="radio" id="answer2" name="ans" style="margin: 10px;" data-bind="value: answer2()"><span data-bind="text: answer2()"></span><br>
        <input type="radio" id="answer3" name="ans" style="margin: 10px;" data-bind="value: answer3()"><span data-bind="text: answer3()"></span><br>
    </div>
    <button id="answerSubmit" value="submit" onclick="questionare()" style="margin: 10px;">submit</button>
    <p id="message"></p>
    <p id="message2"></p>
    <p style="float: right;">Question <span id="counter"></span></p>
</div>

Javascript：

function questionViewModel() {
    this.questions = new Array(document.getElementById('question1').value, document.getElementById('question2').value, document.getElementById('question3').value, document.getElementById('question4').value);
    this.answers = new Array();
    this.answers[0] = new Array(document.getElementById('answer11').value, document.getElementById('answer12').value, document.getElementById('answer13').value);
    this.answers[1] = new Array(document.getElementById('answer21').value, document.getElementById('answer22').value, document.getElementById('answer23').value);
    this.answers[2] = new Array(document.getElementById('answer31').value, document.getElementById('answer32').value, document.getElementById('answer33').value);
    this.answers[3] = new Array(document.getElementById('answer41').value, document.getElementById('answer42').value, document.getElementById('answer43').value);
    this.right = new Array(document.getElementById('answer11').value, document.getElementById('answer21').value, document.getElementById('answer31').value, document.getElementById('answer41').value);
    this.i = Math.floor(Math.random() * this.questions.length);
    this.a = Math.floor(Math.random() * this.answers[0].length);
    var iAns1 = this.i;
    var iAns2 = this.i;
    var iAns3 = this.i;
    this.currentQuestion = this.questions[this.i];
    this.nextQuestion = "";
    this.answer1 = ko.observable(this.answers[this.i][0]);
    this.answer2 = ko.observable(this.answers[this.i][1]);
    this.answer3 = ko.observable(this.answers[this.i][2]);
    this.nAns1 = "";
    this.nAns2 = "";
    this.nAns3 = "";
    if (this.i + 1 < this.questions.length && this.a + 2 < this.answers[0].length) {
        this.nextQuestion = this.questions[this.i + 1];
        this.nAns1 = ko.observable(this.answers[this.i + 1][this.a]);
        this.nAns2 = ko.observable(this.answers[this.i + 1][this.a + 1]);
        this.nAns3 = ko.observable(this.answers[this.i + 1][this.a + 2]);
        iAns1++;
        iAns2++;
        iAns3++;
    }
    else if (this.i + 1 < this.questions.length && this.a + 2 == this.answers[0].length) {
        this.nextQuestion = this.questions[this.i + 1];
        this.nAns1 = ko.observable(this.answers[this.i + 1][this.a]);
        this.nAns2 = ko.observable(this.answers[this.i + 1][this.a + 1]);
        this.nAns3 = ko.observable(this.answers[this.i + 1][0]);
        iAns1++;
        iAns2++;
        iAns3++;
    }
    else if (this.i + 1 < this.questions.length && this.a + 2 > this.answers[0].length) {
        this.nextQuestion = this.questions[this.i + 1];
        this.nAns1 = ko.observable(this.answers[this.i + 1][1]);
        this.nAns2 = ko.observable(this.answers[this.i + 1][this.a]);
        this.nAns3 = ko.observable(this.answers[this.i + 1][0]);
        iAns1++;
        iAns2++;
        iAns3++;
    }
    else if (this.i + 1 == this.questions.length && this.a + 2 < this.answers[0].length) {
        this.nextQuestion = this.questions[0];
        this.nAns1 = ko.observable(this.answers[0][this.a]);
        this.nAns2 = ko.observable(this.answers[0][this.a+1]);
        this.nAns3 = ko.observable(this.answers[0][this.a + 2]);
        iAns1=0;
        iAns2=0;
        iAns3=0;
    }
    else if (this.i + 1 == this.questions.length && this.a + 2 == this.answers[0].length) {
        this.nextQuestion = this.questions[0];
        this.nAns1 = ko.observable(this.answers[0][this.a]);
        this.nAns2 = ko.observable(this.answers[0][this.a + 1]);
        this.nAns3 = ko.observable(this.answers[0][0]);
        iAns1 = 0;
        iAns2 = 0;
        iAns3 = 0;
    }
    else if (this.i + 1 == this.questions.length && this.a + 2 > this.answers[0].length) {
        this.nextQuestion = this.questions[0];
        this.nAns1 = ko.observable(this.answers[0][1]);
        this.nAns2 = ko.observable(this.answers[0][this.a]);
        this.nAns3 = ko.observable(this.answers[0][0]);
        iAns1 = 0;
        iAns2 = 0;
        iAns3 = 0;
    }
    else {
        this.nextQuestion = this.questions[0];
        this.nAns1 = ko.observable(this.answers[0][0]);
        this.nAns2 = ko.observable(this.answers[0][1]);
        this.nAns3 = ko.observable(this.answers[0][2]);
    }
    this.getI = function () { return this.i; };
    this.getA = function () { return this.a; };
    this.getRight = function () { return this.right[this.i]; };
    this.getAns1 = function () {
        return this.answer1();
    };
    this.getAns2 = function () {
        return this.answer2();
    };
    this.getAns3 = function () {
        return this.answer3();
    };
    this.setAns1 = function () {
        this.answer1 = this.nAns1;
        if (iAns1 + 1 < this.answers.length) {
            this.nAns1 = ko.observable(this.answers[iAns1 + 1][0]);
            iAns1++;
        } else {
            this.nAns1 = ko.observable(this.answers[0][0]);
            iAns1 = 0;
        }
    };
    this.setAns2 = function () {
        this.answer2 = this.nAns2;
        if (iAns2 + 1 < this.answers.length) {
            this.nAns2 = ko.observable(this.answers[iAns2 + 1][1]);
            iAns2++;
        } else {
            this.nAns2 = ko.observable(this.answers[0][1]);
            iAns2 = 0;
        }
    };
    this.setAns3 = function () {
        this.answer3 = this.nAns3;
        if (iAns3 + 1 < this.answers.length) {
            this.nAns3 = ko.observable(this.answers[iAns3 + 1][2]);
            iAns3++;
        } else {
            this.nAns3 = ko.observable(this.answers[0][2]);
            iAns3 = 0;
        }
    };
    this.getList = function () {
        return this.questions;
    };
    this.getCurrent = function () {
        return this.currentQuestion;
    };
    this.getNext = function () {
        return this.nextQuestion;
    };
    this.getLength = function () {
        return this.questions.length;
    };
    this.setQuestion = function (x) {
        if (this.i + 1 <= this.questions.length - 1) {
            this.nextQuestion = this.questions[this.i + 1];
            this.i++;
        } else {
            this.nextQuestion = this.questions[0];
            this.i = 0;
        }
        this.currentQuestion = this.nextQuestion;
    };
 }

所以这仍然只是一个测试，所以它还没有从数据库中加载问题，但是现在它使用了 MVC，这使得其他一切变得容易。我不得不使用不可见的输入将字符串存储在视图中，以让 javascript 获取值。

于 2013-07-15T13:20:08.597 回答
0

将模型属性分配给视图中的隐藏字段：

@Html.Hidden("HiddenName",Model.PropertyName, new { @class = "hiddenselector" })

然后您可以在您的 javascript 中访问该属性：

var hidden_val = document.getElementsByClassName("hiddenselector");

显然，这是您在现实中使用的简化版本，但它让您对这种方法有所了解。它不像 Brandon 的解决方案那样整洁，但它可能会让您入门。

于 2013-07-15T12:37:12.137 回答
0

可能有更好的方法来做到这一点，但你可以尝试这样的事情：

在您的控制器中

   public ViewResult Index()
   {
       MyViewModel model;
       model.questions = "Question1";
       ...
       return View( model );
   }

在您的模型类中

public class MyViewModel
{
   public string questions;
   ...
}

在你的 .cshtml

@model MyViewModel

<script type="text/javascript">
   MyData = @(( new System.Web.Script.Serialization.JavaScriptSerializer() ).Serialize( Model ));
</script>

然后，在您的 .js 中，您应该能够访问

MyData.questions
于 2013-07-11T17:09:34.917 回答