HTML and CSS Reference
In-Depth Information
Listing 7-8. GetQuestions() Action Method
public JsonResult GetQuestions()
SurveyDbEntities db = new SurveyDbEntities();
var data = from item in db.Questions
select item;
return Json(data.ToArray());
The GetQuestions() action method selects all the question items from the Questions table and returns
them as an array. Because the return value is to be accessed in jQuery code, it's converted into JSON format
using the Json() method and then returned as a JsonResult .
Notice the use of data-* attributes in Listing 7-7. As discussed in Chapter 6, the data-* attributes are
different than standard HTML attributes in that they're developer defined and don't directly affect the
element in any way. All data-* attributes begin with prefix data- followed by a developer-defined attribute
name. An element can have any number of data-* attributes, which you can access programmatically
using jQuery code.
The dynamically generated <div> element defines one data-* attribute named data-questions-
questionid . This attribute stores the QuestionID of a question from the Questions table. A sample
dynamically generated <div> element looks like this:
<div data-questions-questionid='1'>Which programming language do you use?</div>
The success handler function then calls the GetChoices() function to populate choices for each of the
questions. The GetChoices() function is shown in Listing 7-9.
Listing 7-9. GetChoices() Client-Side Function
function GetChoices() {
type: "POST",
url: "/Home/GetChoices",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(results){
for (var i = 0; i < results.length; i++) {
$("div[data-questions-questionid='" + results[i].QuestionID + "']").append(
"<br /><input type='checkbox' data-choices-questionid='" +
results[i].QuestionID +
"' data-choices-choiceid='" + results[i].ChoiceID +
"'/><span>" + results[i].ChoiceText + "</span>");
if (storage[results[i].ChoiceID] != null) {
var choiceId = results[i].ChoiceID;
$("input[data-choices-choiceid='" +
choiceId + "']").attr('checked', 'checked');
$("input[data-choices-questionid]").change(function (event) {
var key = $("data-choices-choiceid");
if ($(':checked') == true) {
storage[key] = $("data-choices-questionid");
else {
Search WWH ::

Custom Search