如何在MVC3中将字符串从模型动态加载到javascript

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

控制器：

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="answerswer11" style="display: none;" value="@Model.answer11">
    <input type="text" id="answerswer12" style="display: none;" value="@Model.answer12">
    <input type="text" id="answerswer13" style="display: none;" value="@Model.answer13">
    <input type="text" id="answerswer21" style="display: none;" value="@Model.answer21">
    <input type="text" id="answerswer22" style="display: none;" value="@Model.answer22">
    <input type="text" id="answerswer23" style="display: none;" value="@Model.answer23">
    <input type="text" id="answerswer31" style="display: none;" value="@Model.answer31">
    <input type="text" id="answerswer32" style="display: none;" value="@Model.answer32">
    <input type="text" id="answerswer33" style="display: none;" value="@Model.answer33">
    <input type="text" id="answerswer41" style="display: none;" value="@Model.answer41">
    <input type="text" id="answerswer42" style="display: none;" value="@Model.answer42">
    <input type="text" id="answerswer43" 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="answerswer1" name="answers" style="margin: 10px;" data-bind="value: answer1()"><span data-bind="text: answer1()"></span><br>
        <input type="radio" id="answerswer2" name="answers" style="margin: 10px;" data-bind="value: answer2()"><span data-bind="text: answer2()"></span><br>
        <input type="radio" id="answerswer3" name="answers" style="margin: 10px;" data-bind="value: answer3()"><span data-bind="text: answer3()"></span><br>
    </div>
    <button id="answerswerSubmit" 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获取值。

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

在您的控制器中

   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

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

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

然后，您可以在javascript:中访问该属性

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

显然，这是你在现实中使用的简化版本，但它给了你一个方法的想法。它不像Brandon的解决方案那样整洁，但它可能会让你开始。