c# - MVC3でモデルからjavascriptに文字列を動的にロードする方法は?

Question

前回、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に非常に慣れていないので、私が得ることができるすべての助けが必要です. ありがとうございました。

Answer 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に値を取得させるには、目に見えない入力を使用して文字列をビューに保存する必要がありました。

Answer 2

モデル プロパティをビューの非表示フィールドに割り当てます。

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

次に、JavaScript でプロパティにアクセスできます。

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

明らかに、これは実際に使用するものの単純化されたバージョンですが、アプローチのアイデアが得られます。これは Brandon のソリューションほど整然としたものではありませんが、始めるきっかけになるかもしれません。

Answer 3

これを行うにはおそらくより良い方法がありますが、次のような方法を試すことができます。

コントローラーで

   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