Asp.net 如何在不使用html帮助程序的情况下在$.getJSON中传递多个参数

Asp.net 如何在不使用html帮助程序的情况下在$.getJSON中传递多个参数,asp.net,json,asp.net-mvc,razor,Asp.net,Json,Asp.net Mvc,Razor,我试图在get JSON结果中传递多个参数,但该代码不起作用,如果我只传递1个参数,它就起作用,但如果我传递多个参数,则不起作用。也许我的语法错了?请帮忙 查看 $(document).ready(function () { $("#ddltype").change(function () { var id = $(this).val(); $("#subject").change(function ()

我试图在get JSON结果中传递多个参数,但该代码不起作用,如果我只传递1个参数,它就起作用,但如果我传递多个参数,则不起作用。也许我的语法错了?请帮忙

查看

 $(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>

只要在getJSON调用中发送正确的属性值,它就可以正常工作

我看到了另一个问题。在
ddltype
drpdown上的
change
事件中,您正在注册另一个下拉列表
subject
change
事件。因此,每当用户为第一个下拉列表更改某些内容时,它都会为第二个下拉列表的更改事件不断添加事件处理程序。第二次和第三次下拉之间也发生了同样的事情。这不好

另外,尝试使用
Url.Action
Url.RouteUrl
helper方法来构建操作方法的相对Url。如果js代码在razor视图中,这将起作用。但是,如果javascript代码位于外部js文件中,则构建基本url并将其传递给js文件,然后在那里使用它来构建路径,如中所述

您可以根据需要重写代码

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();
    });
});

所有代码都是紧密耦合的。我强烈推荐阅读

我建议如下:

随便吧

$(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);
  });
});
以及更新您的Razor代码:

@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") })
@Html.DropDownListFor(model=>model.g_类型,新列表{
新建SelectListItem{Value=“1”,Text=“书面工作”},
新建SelectListItem{Value=“2”,Text=“性能任务”},
新建SelectListItem{Value=“3”,Text=“季度评估”},
},“选择类型”,
新{
@class=“js ddltype js refresh”
data\u refresh\u url=url.Action(“getWeightedAverage”、“Home”)})

现在,您的javascript对MVC一无所知(您可以切换整个后端,而不必接触javascript…松散耦合)。现在,css与javascript可能使用的ID或类没有紧密耦合。这还允许在html(最佳实践)之后加载javascript,并为最终用户提供更好的体验。

您的问题在于传递的参数值。Javascript/JQuery对
model.subject\u id
model.section\u id
一无所知,因为它是在模型值呈现为HTML后在客户端运行的。您需要访问HTML元素,而不是模型。$.getJSON(“../Employee/getWeightedAverage“,{id:id,subject:id1,section:id2},function(Ave){我也尝试过这个方法,但不起作用。呈现的HTML元素是否具有id=“id1”和id=“id2”??我对此表示怀疑。请阅读如何从Razor访问您的模型。抱歉可能重复。更改主题和部分文本框的功能我只想获取主题和部分文本框的值并将其传递给getJson。只有ddltype是下拉列表,其余是文本框请尝试我发布的代码,它应该可以工作ne.打开浏览器控制台/网络选项卡,检查在ajax requestsubject和节中发送的值是否未通过..可能是因为它在.change函数中..我只想获取EditorForId的当前值,您可以尝试我发布的版本。这应该会发送所有内容,因为我们正在读取所有三个值,然后再进行修改我不知道为什么,但我只得到idVal,而没有section和subject的值
@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") })