I want to take user input from the dropdown list in the partial view and pass it into the js function in the index page to filter out results based on the value of the QuestionType property. So, a view model looks like this:
public class TestQuestionModel
{
public Guid TestId { get; set; }
public Guid QuestionId { get; set; }
public string Id { get; set; }
public string QuestionType { get; set; }
}
Dropdown list in the razor page looks like this:
@model ICollection<Lab.Quiz.BL.Services.TestCardService.Models.TestQuestionModel>
...
@Html.DropDownList("QuestionType", new SelectListItem[]
{
new SelectListItem() {Text = "Single Selection Question", Value = "SingleSelectionQuestion", Selected = true},
new SelectListItem() {Text = "Multiple Answers Question", Value = "MultipleAnswerQuestion"},
new SelectListItem() {Text = "Open Answer Question", Value = "OpenAnswerQuestion"},
new SelectListItem() {Text = "Program Code Question", Value = "ProgramCodeQuestion"}
},
new
{
onchange = "filterQuestions('{@Model.FirstOrDefault()?.TestId.ToString()}', this.value)"
})
And the function on the index page looks like this:
function filterQuestions(testId, questionType) {
alert("called");
$.ajax({
url: "Home/Filter",
data: { testId: testId, questionType: questionType },
type: 'GET',
dataType: 'html',
success: function (result) {
$("#questionsDiv").html(result);
}
});
Unfortunately, the function won't be called. However, if I change the function to only accept one attribute and accordingly change the function call to only include one attribute (this.value), it works as intended. Any suggestions on how to pass from the @Html.DropdownList not only its value, but also a property of the model?
You can try this, use +...+ to split the data:
onchange = "filterQuestions("+@Model.FirstOrDefault().TestId.ToString()+", this.value)"
Result: