How to pass many Parameters in $.getJSON without the use of html helper

Question

I'm try to pass multiple parameters in a get JSON result but that code doesn't work, it is working if I only pass 1 parameter but not if I pass multiple. Maybe my syntax is wrong? Help please

VIEW

 $(document).ready(function () {
            $("#ddltype").change(function () {
                var id = $(this).val();
                $("#subject").change(function () {
                    var id1 = $(this).val();
                    $("#section").change(function () {
                        var id2 = $(this).val();
                        $.getJSON("../Employee/getWeightedAverage", { id: id, subject:id1, section:id2 }, function (Ave) {
                    $("#av").val(Ave);
                });
            });
                });
            });
        });

    @Html.EditorFor(model => model.subject_id, new { id = "subject" })
    @Html.EditorFor(model => model.section_id, new { id = "section" })


    <div class="editor-label">
        @Html.LabelFor(model => model.g_type)
    </div>
    <div class="editor-label">
        @Html.DropDownListFor(model => model.g_type, new List<SelectListItem>{
        new SelectListItem {Value = "1", Text = "Written Work"},
        new SelectListItem {Value = "2", Text = "Performance Task"},
        new SelectListItem {Value = "3", Text = "Quarterly Assesment"},
        },"Select Type", new { id = "ddltype" })
        @Html.ValidationMessageFor(model => model.g_type)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.weighted_percent)
    </div>
    <div class="editor-field">
        @Html.TextBoxFor(model => model.weighted_percent, new { id = "av" })
        @Html.ValidationMessageFor(model => model.weighted_percent)
    </div>

JSON

    public JsonResult getWeightedAverage(string id, string subject,string section)
    {

        string Ave = "40" + subject + section;
        return Json(Ave, JsonRequestBehavior.AllowGet);
    }

Your problem is the parameter value you're passing. Javascript / JQuery knows nothing about `model.subject_id` or `model.section_id` because it's running on the client side, after the model value has been rendered as HTML. You need to access the HTML element, not the model. — devlin carnate, Dec 28 '15 at 02:57
$.getJSON("../Employee/getWeightedAverage", { id: id, subject:id1, section:id2 }, function (Ave) { i've also tried this but doesn't work either — Renz, Dec 28 '15 at 02:59
do the rendered HTML elements have id="id1" and id="id2" ?? i doubt it. Please read [here](http://stackoverflow.com/questions/21391402/access-model-in-javascript-asp-net-mvc-razor) for how to access your model from Razor. — devlin carnate, Dec 28 '15 at 03:01
possible duplicate of http://stackoverflow.com/questions/21391402/access-model-in-javascript-asp-net-mvc-razor — devlin carnate, Dec 28 '15 at 03:04

score 0 · Accepted Answer · edited May 23 '17 at 12:04

0

As long as you are sending the correct property values in the getJSON call, It should work fine.

I see another problem here. on the change event on ddltype drpdown, you are registering a change event of another dropdown, subject. So everytime user changes something for the first dropdown, It will keep adding an event handler for the change event of the second dropdown. The same thing is happening between second and third dropdown. This is not good.

Also, try to use Url.Action or Url.RouteUrl helper methods to build the relative url to your action methods.This will work if your js code is inside the razor view. But if your javascript code is inside an external js file, build the base url and pass that to your js files and use it there to build the path as explained in this answer.

You may rewrite your code as

function getData()
{
    //Read values from all 3 dropdowns.
    var idVal= $("#ddltype").val();
    var subVal=$("#subject").val();
    var secVal= $("#section").val();

    //You can also do a null/empty value check before making the call.
   if(idVal!="" && subVal!="" && secVal!="")
   {
      $.getJSON("@Url.Action("getWeightedAverage","Home")",
         { id: idVal, subject: subVal, section: secVal}, function (Ave) {
        alert("getJSON worked")
        $("#av").val(Ave);
      });
  }
}

$(function () {

    $("#ddltype").change(function () {
        getData();
    });

    $("#subject").change(function () {
        getData();
    });

    $("#section").change(function () {
        getData();
    });
});

edited May 23 '17 at 12:04

Community

1
1

answered Dec 28 '15 at 03:05

Shyju

214,206
104
411
497

sorry about the .change functions of the subject and section textbox i just want to get the value of the subject and section textbox and pass it to the getJson only the ddltype is the dropdown the rest are textbox – Renz Dec 28 '15 at 03:11
Try the code i posted and it should work fine. Open up your browser console/network tab to inspect what values you are sending in the ajax request – Shyju Dec 28 '15 at 03:13
subject and section are not passed.. probably because it is in .change function.. i just want to get the current value of the editorfor – Renz Dec 28 '15 at 03:17
Did you try the version i posted. That should send everything as we are reading all three values before making the call. Put and alert on those variables and see – Shyju Dec 28 '15 at 03:19
i don't know why but i only get the idVal but not the value of section and subject – Renz Dec 28 '15 at 03:32
i get it now Thank you :) – Renz Dec 28 '15 at 03:35

score 0 · Answer 2 · answered Dec 28 '15 at 05:31

All your code is tightly coupled. I would highly recommend reading Decoupling Your HTML, CSS, and JavaScript.

I would recommend the following:

whatever.js

$(document).ready(function()
{
  function refresh(url)
  {
    var idVal= $(".js-ddltype").val();
    var subVal=$(".js-subject").val();
    var secVal= $(".js-section").val();

    //You can also do a null/empty value check before making the call.
    if(idVal!="" && subVal!="" && secVal!="")
    {
      $.getJSON(url,
         { id: idVal, subject: subVal, section: secVal}, 
         function (Ave) {
          alert("getJSON worked")
          $(".js-av").val(Ave);
      });
  }

  $('.js-refresh').change(function() {
    var url = $(this).data('refresh_url');
    refresh(url);
  });
});

and updating your Razor code:

@Html.DropDownListFor(model => model.g_type, new List<SelectListItem>{
    new SelectListItem {Value = "1", Text = "Written Work"},
    new SelectListItem {Value = "2", Text = "Performance Task"},
    new SelectListItem {Value = "3", Text = "Quarterly Assesment"},
    },"Select Type", 
    new { 
      @class="js-ddltype js-refresh" 
      data_refresh_url = Url.Action("getWeightedAverage","Home") })

Now your javascript has no idea about MVC (you could literally switch the entire backend and not have to touch javascript... loosely coupled). Now you css isn't tightly coupled to an ID or Class that may also be used by javascript. This also allows your javascript to be loaded after your html (best practice) and give the end user a better experience.

How to pass many Parameters in $.getJSON without the use of html helper

2 Answers2