我接到电话:
$.ajax({
type: 'GET',
url: '@MvcApplication.SurveyApiUrl',
success: function (surveyList) {
//var htmlString = ''
var jsondata = JSON.parse(surveyList);
console.log(jsondata);
$.each(jsondata.Questions, function (index, data) {
if (data.IsHidden) {
htmlString = htmlString + '<div class ="hidden" id=' + data.QuestionId + '> '
processSurveyQuestions(data);
htmlString = htmlString + '</div>'
}
else {
htmlString = htmlString + '<div> ';
processSurveyQuestions(data);
htmlString = htmlString + '</div>';
}
});
htmlString = htmlString + '<br> <button type="button" class="btn btn-primary" onclick="submitForm()">Submit</button>';
$('#Questions').html(htmlString);
},
error: function () { console.log("Error occured calling the service") }
})
电话会议:
$.ajax({
type: "Post",
url: '@MvcApplication.SurveyApiUrl',
data : {'SurveyId':4,
'SurveyAnswerString': formData
},
Success: function () { console.log("this is successful") },
error: function(error){console.log("error occured calling service")}
});
document.getElementById("Questions").reset();
我的网址中的问题是根据点击1或2或3或4的调查加载的。 http://localhost:49754/Survey?id=1 http://localhost:63325/api/SurveyList/1
如何根据点击的调查ID动态传递调查ID。请帮忙。 我的HTML
<link rel="stylesheet" href="~/Content/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="~/Content/Site.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
@{
ViewBag.Title = "CustomerSatisfaction";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@*@Model SurveyApplication.Models.ISurveyQuestion*@
<script>
var objectData = new Object();
var htmlString = '';
$(document).ready(function () {
$(function () {
$.ajax({
type: 'GET',
url: '@MvcApplication.SurveyApiUrl',
success: function (surveyList) {
//var htmlString = ''
var jsondata = JSON.parse(surveyList);
console.log(jsondata);
$.each(jsondata.Questions, function (index, data) {
if (data.IsHidden) {
htmlString = htmlString + '<div class ="hidden" id=' + data.QuestionId + '> '
processSurveyQuestions(data);
htmlString = htmlString + '</div>'
}
else {
htmlString = htmlString + '<div> ';
processSurveyQuestions(data);
htmlString = htmlString + '</div>';
}
});
htmlString = htmlString + '<br> <button type="button" class="btn btn-primary" onclick="submitForm()">Submit</button>';
$('#Questions').html(htmlString);
},
error: function () { console.log("Error occured calling the service") }
})
})
});
</script>
<header>
<div id="SiteText" class="SiteText"><h1>Survey</h1></div>
</header>
<div class="body-content">
<div class="form-content">
<form id="Questions">
<button type="button" class="btn btn-primary" onclick="submitForm()">Submit</button>
</form>
</div>
</div>
<script>
function submitForm() {
var formData = $('#Questions').serialize();
document.getElementById("Questions").reset();
$.ajax({
type: "Post",
url: '@MvcApplication.SurveyApiUrl',
data : {'SurveyId':4,
'SurveyAnswerString': formData
},
Success: function () { console.log("this is successful") },
error: function(error){console.log("error occured calling service")}
});
document.getElementById("Questions").reset();
}
function toggleDiv(id, removeIds) {
hideDiv(removeIds);
$('#' + id).removeClass('hidden');
};
function hideDiv(id) {
if (objectData[id] != undefined) {
for (i = 0; i < objectData[id].length; i++) {
$('#' + objectData[id][i]).addClass('hidden');
if (objectData[objectData[id][i]] != undefined) {
var itemdivs = objectData;
var itemdiv = itemdivs[id][i];
if (itemdiv != undefined) {
for (j = 0; j < itemdivs[itemdiv].length; j++) {
$('#' + itemdivs[itemdiv][j]).addClass('hidden');
$('#' + itemdivs[itemdiv][j]).val($("#name option[selected]").val());
}
}
}
}
}
}
function toggleCheckBox(checkbox, id) {
if (checkbox.checked) {
$('#' + id).removeClass('hidden');
}
else {
$('#' + id).addClass('hidden');
}
}
function processSurveyQuestions(data) {
htmlString = htmlString + '<p><strong>' + data.QuestionValue + '</strong></p>';
if (data.InputType == "SingleLineTextBox") {
htmlString = htmlString + '<input type= "text" name=' + data.QuestionId + '></input>';
}
if (data.InputType == "MultiLineTextBox") {
htmlString = htmlString + '<textarea name=' + data.QuestionId + '></textarea>';
}
if (data.InputType == "SingleSelect") {
var removeIds = new Array();
$.each(data.Options, function (index, oD) {
if (oD.ChildQuestionId > 0) {
removeIds.push(oD.ChildQuestionId);
}
});
objectData[data.QuestionId] = removeIds;
htmlString = htmlString + '<div>';
$.each(data.Options, function (index, optionData) {
htmlString = htmlString + ' <input type ="radio" onclick="toggleDiv(' + optionData.ChildQuestionId + ',' + data.QuestionId + ')" name=' + data.QuestionId + ' value=' + optionData.OptionValue + '>' + optionData.OptionValue + ' </input>';
})
htmlString = htmlString + '</div>';
}
if (data.InputType == "MultiSelect") {
htmlString = htmlString + '<div>';
$.each(data.Options, function (index, optionData) {
htmlString = htmlString + ' <input type ="checkbox" onclick="toggleCheckBox(this,' + optionData.ChildQuestionId + ')" name=' + data.QuestionId + ' value=' + optionData.OptionValue + '>' + optionData.OptionValue + ' </input>';
})
htmlString = htmlString + '</div>';
}
if (data.InputType == "SingleSelectDropdown") {
var removeIds = new Array();
$.each(data.Options, function (index, oD) {
if (oD.ChildQuestionId > 0) {
removeIds.push(oD.ChildQuestionId);
}
});
objectData[data.QuestionId] = removeIds;
htmlString = htmlString + '<div>';
htmlString = htmlString + '<select>';
$.each(data.Options, function (index, optionData) {
htmlString = htmlString + '<option onclick="toggleDiv(' + optionData.ChildQuestionId + ',' + data.QuestionId + ')" name=' + data.QuestionId + ' value=' + optionData.OptionValue + '>' + optionData.OptionValue + '</option>';
})
htmlString = htmlString + '</select>';
htmlString = htmlString + '</div>';
}
}
</script>