How to update multiple fields using JsonResult and Ajax DropDown

Question

I have JsonResult list of Articles and it looked like this:

[
    {
        "tbl_dobavuvaci": null,
        "tbl_fakDet": null,
        "tbl_fakMas": null,
        "tbl_kompanii": null,
        "tbl_useri": null,
        "artID": 1,
        "artKompID": 1,
        "artUserID": 1,
        "artCode": 25456658845646540,
        "artIme": "Artikal 1 Ime",
        "artCenaNab": 10,
        "artCenaProd": 15,
        "artDDV": 18,
        "artDobavuvac": 1
    },
    {
        "tbl_dobavuvaci": null,
        "tbl_fakDet": null,
        "tbl_fakMas": null,
        "tbl_kompanii": null,
        "tbl_useri": null,
        "artID": 2,
        "artKompID": 1,
        "artUserID": 1,
        "artCode": 8606010872303,
        "artIme": "TestName",
        "artCenaNab": 25,
        "artCenaProd": 30,
        "artDDV": 18,
        "artDobavuvac": 1
    }
]

Now in HTML View i have javascript:

  $(document).ready(function () {
        $.getJSON("/fakturi/getArticles", function (data) {
            $.each(data, function (i, data) {
                $('<option>',
                   {
                       value: data.artID,
                       text: data.artCode
                   }).html;        
            });
        })
        $(function () {
            $("[name='bar']").on("change", function () {
                $("#artikal").val($(this).val());   
            });
        });
    });

Now When i change artCod named dropdown with artCode values from Json, corectly updated second field with artIme name.

HTML CODE:

@Html.DropDownList("bar", null, string.Empty, htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.tbl_artikli, "", new { @class = "text-danger",})

@Html.DropDownList("artikal", null, string.Empty, htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.tbl_artikli, "", new { @class = "text-danger", })


 @Html.TextBox("artCenaProd", "", new { @class = "form-control", @id = "artCenaProd", style = "width:60pt" })

My Question is how to update third field named artCenaProd when I will change dropdown?

Answer 1

You need to store the json array you receive from your ajax call to a local variable in your script. When the dropdown change event is fired, read the selected option and get the option value (artID). Now filter the local array for items with this id and get the subset (If the artID's are unique, you will get a sub array with one it.

$(document).ready(function () {

    var localData = [];
    var $bar = $("[name='bar']");

    $.getJSON("@Url.Action("/fakturi/getArticles")",
        function(data) {
            localData = data;
            $bar.empty();
            $.each(data,
                function(i, data) {
                    var t = $('<option>', { value: data.artID, text: data.artCode });
                    $bar.append(t);
                });
        });
    $bar.change(function() {
        var v = $(this).val();

        var filteredData = localData.filter(function(item) {
            return item.artID == v;
        });
        if (filteredData.length) {
            $("#artCenaProd").val(filteredData[0].artCenaProd);
        }

    });

});

Also if you are populating the Dropdown's options using the ajax call, no need to use the DropDownList helper method! Simply write HTML markup for a SELECT element

<SELECT name='bar'>

</SELECT>