Ta Abd
Ta Abd

Reputation: 39

getting two lists of objects from controller to view using json and javascript

I have drop-down list in View, when on-change I need to invoke method in the controller by javascript code, this method must return two lists of objects by using JsonResult, and deal with the results in the view in JavaScript.

Here is my View:

Files:

    @Html.DropDownList("File", Enumerable.Empty<SelectListItem>())

<table id="trTable" class="table table-condensed table-hover table-bordered">
</table>

JavaScript Code:

<script type="text/javascript">

    $('#File').select2(
            {
                allowClear: true,
                width: 150,
            })
       .on('change', function () {
           var fileId = $('#File').val();
       $.getJSON("/Files/getWords", { fileId: fileId}, function (data) {
           $('#trTable').empty();
           var items = "<table id=" + "'trTable'" + "class=" + "'table table-condensed table-hover table-bordered'" + "'><tbody>";

          // here where I want to deal with two objects lists (Files and Words)

           });
           items += "</tbody></table>";
           $("#trTable").html(items);
       });

and the method in Controller:

public JsonResult getWords(int fileId)
        {

           var PWs = db.Words.Where(x=>x.File_Id.Equals(fileId));
           var Files = db.Files.toList(); 

           // here where I want to pass the two lists (PWs and Files).
           //return Json(files, JsonRequestBehavior.AllowGet);
        }

So how to solve this problem?? I need your help

Upvotes: 1

Views: 2301

Answers (2)

Luqman Cheema
Luqman Cheema

Reputation: 477

here is the solution, Code for controller is as below:

 Class ClassDetails = db.Classes.Find(clasId);
 // finding the branch of the student for registration and other fees
 int branchId = db.Students.Where(z => z.StudentID == id).Select(z => z.BranchID).FirstOrDefault();
 BranchSetting branchSettings = db.BranchSettings.Where(z => z.BranchID == branchId).FirstOrDefault();
 return Json(new { ClassDetails,branchSettings}, JsonRequestBehavior.AllowGet);

and here is the code for jquery success callback

 success:
        function (result) {
            console.log(result);
            var classDetails = result.ClassDetails;
            var branchFee = result.branchSettings;
            if (classDetails == null || branchFee == null) {
                $("#txtMsg").html("Please contact admin.");
                $("#txtMsg").show();
                $("#Things").hide();
                $("#myModal").modal('show');

            }
            else {
                $("#txtClassName").html(classDetails.ClassName);
                $("#txtTutionFee").html(classDetails.TutionFee);
                $("#txtComputerFee").html(classDetails.ComputerFee);
                $("#txtTotalMonthlyFee").html(classDetails.TotalFee);
                $("#txtRegistrationFee").html(branchFee.RegistrationFee);
                $("#txtAddmissionFee").html(branchFee.AddmissionFee);
                $("#txtSecurityFee").html(branchFee.SecurityFee);

                $("#myModal").modal('show');
            }
        },

Upvotes: 0

cyberhubert
cyberhubert

Reputation: 203

you can return composed object:

var result=new { PWs=PWs, Files=Files};
return Json(result, JsonRequestBehavior.AllowGet);

Upvotes: 2

Related Questions