CODEWITHSUNDEEP
jqueryasp.net-coredrop-down-menu
Puttu
Puttu

Reputation: 63

How to filter data on a page based on selection from drop down list

I have a Dictionary object that has business type id and list of Questions. I have a drop down of business types. Now when i select a business type from the drop down, i need to refresh the questions list that is shown on the page

html:

<script src="~/lib/jquery/dist/jquery.js"></script>
<div id="" class="">

    <div class="form-group">
        <label>Select a Business Type *</label>
        <select class="form-control" id="businessTypeSelectionModal">
            <option value="">--Select---</option>
            @foreach (var bt in Model.BusinessTypes)
            {
                <option value="@bt.Id">
                    @bt.Name
                </option>
            }
        </select>
    </div>

    <label>Questions *</label>

</div>

JQuery:

<script type="text/javascript">   
    var selectedBusinessTypeId;
    $(document).ready(function () {
        $("#businessTypeSelectionModal").change(function () {
            selectedBusinessTypeId = $("#businessTypeSelectionModal").val();
            LoadQuestions(selectedBusinessTypeId);
        });
    });
    function LoadQuestions(selectedBusinessTypeId)
    {
        html = '';
        alert('BT id:' + selectedBusinessTypeId);
     @foreach (var c in Model.Questions)
         {
             foreach (var q in c.Value)
             {
                 if (c.Key == selectedBusinessTypeId) {
                     html += '<label value="@c.Key" class="" />' + @q.Description;
html += '<input type="textbox" />';
                 }
             }
         }

     } 
</script>

On selection change of the drop down, i am trying to get the id, pass it to LoadQuestions() function where i need to check if the id is equal to the id in the questions dictionary. If it is i need to show the question as a label and a text box next to each question. As of now i am getting the followin errors:

'selectedBusinessTypeId' & 'html' variables -> inside the LoadQuestions() function does not exist in the current context

Any help would be appreciated. Is there a better way to do this??

Upvotes: 0

Views: 51

Answers (3)

Puttu
Puttu

Reputation: 63

As mentioned by Nan Yu, using Json.Serialize solved the problem

Upvotes: 0

Nan Yu
Nan Yu

Reputation: 27538

You'd use JSON serialize your model into a javascript variable and use this javascript variable to write your javascript code :

function LoadQuestions(selectedBusinessTypeId)  
{
    html = '';

    var questions = @Html.Raw(Json.Serialize(Model.Questions));
    for (var type in questions) {
        if (type == selectedBusinessTypeId) {

            for (var i = 0; i < questions[type].length; i++) {
                alert( questions[type][i].description)
                //html += "<label value='" + questions[type][i].id + "' class='' />" + questions[type][i].description;
              // html += "<input type='textbox' />";
            }

        }
    }

}

Assume type of Model.Questions is :

 public Dictionary<int, List<Question>> Questions { get; set; }

Upvotes: 0

CodingSolutions
CodingSolutions

Reputation: 81

does $("#businessTypeSelectionModal").val() contain the value of id or the business type?
You can get id by this
selectedBusinessTypeId= $("#businessTypeSelectionModal").find('option:selected').attr('id');

Upvotes: 0

Related Questions