如何在MVC3中将字符串从模型动态加载到javascript
本文关键字：动态 模型 加载 javascript 字符串 MVC3 | 更新日期: 2023-09-27 18:22:10
好吧，上次我在MVC3上问一个问题时，它被投票否决了，我不知道为什么，所以如果情况相同，请告诉我原因，这样我就可以修复它。不管怎样，我试着从模型中提取一个字符串，并将其放入Javascript中。Javascript操纵字符串。我已经让Javascript处理数组中的静态字符串，但我希望将这些字符串放在SQL数据库中，并将其加载到模型中，然后将其放入我的Javascript中，该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还很陌生，所以我需要所有能得到的帮助。非常感谢。
我上周五做了这件事，所以很难描述是星期一，我刚开始工作，无论如何，这是我最终使用的解决方案：
控制器：
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的解决方案那样整洁，但它可能会让你开始。