Question

我尝试在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>

JSON

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

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

Answer 1

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

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

此外，尝试使用Url.Action或Url.RouteUrl辅助方法来构建操作方法的相对URL。如果您的js代码位于剃刀视图中，这将起作用。但是如果您的javascript代码位于外部js文件中，请构建基本URL并将其传递给您的js文件，并使用它来构建路径，如this answer中所述。

您可以将代码重写为

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

Answer 2

所有代码紧密耦合。我强烈建议您阅读Decoupling Your HTML, CSS, and JavaScript。

我会推荐以下内容：

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

并更新您的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") })

现在你的javascript一直不知道MVC（你可以直接切换整个后端而不必触摸javascript ......松散耦合）。现在你的css没有与javascript也可能使用的ID或类紧密耦合。这也允许您的html在您的html（最佳实践）之后加载，并为最终用户提供更好的体验。

如何在不使用html helper的情况下在$ .getJSON中传递许多参数

2 个答案: