0

//嗨，我正在构建一个 MVC4 项目，其中我有一个程序列表，每个程序都绑定到一个 Outlets 列表，一旦用户从我的下拉列表中选择一个程序，我就会尝试显示一个 Outlets 表，到目前为止我有一个jQuery function which fires whenever the selection changes and I am able to retrieve the program id for it .. great , but how do I make an ajax call to populate a table with the associated outlets to that program

我有一个负责绘制出口表的部分视图，我需要做的就是从我的 jQuery 函数中对我的控制器中的函数进行 ajax 调用并传递程序 ID，在这种情况下是var $input = $(this).find('option:selected').val();

控制器

 public ActionResult AddOutletFromExisting()
    {
        int selectedValue = 0;

        ViewBag.Programs = new SelectList(new ProgramRepository().GetPrograms(), "ProgramID", "ProgramName", selectedValue);
        return View();
    }
 [HttpPost]
    public ActionResult AddOutletFromExisting(FormCollection collection, int selectedValue=0)
    {
        var outlets = new OutletRepository().GetStoresByProgram(selectedValue).ToPagedList(1, 10);
        return PartialView("_Outlets", outlets);
    }

看法

    @Html.DropDownList("ProgramID", (SelectList)ViewBag.Programs, string.Empty, new { id="dropdown" })

jQuery

$("#dropdown").change(function () {
    var $input = $(this).find('option:selected').val();
    //call a function in my controller and pass $input to this function
});
4

2 回答 2

1

您想根据下拉值过滤网格，对吗？
为此，您必须按照以下步骤操作。

  1. 创建一个控制器动作，它根据参数过滤结果（这将来自 ajax 调用 - 您将在下一步中看到）
  2. 为此操作创建视图。它将包含表格的代码
  3. 使用 jQuery ajax/post 方法调用 action 方法
  4. 更新网格内容

这是在 ASP.NET MVC中过滤数据网格的链接，它通过示例进行了解释

更新

$("#dropdown").change(function () {
    var selectedValue = $(this).find('option:selected').val();
    //call a function in my controller and pass $input to this function
    $.ajax({
       url:"/Controller/GridFilterActionMethod",
       type: "POST",
       data: { selectedValue: selectedValue },
       success:function(result){
           $("#div1").html(result); //here, div1 would be your grid-div id
       }
    });
});

根据上面的代码，您的操作方法参数名称应该 -selectedValue应该与 json 对象名称匹配。

于 2013-07-24T15:30:52.310 回答
0

一种方法是对服务器进行 ajax 调用并检索 HTML 以获取网点列表。然后只需将列表附加到页面上的元素：

$("#dropdown").change(function () {
    var $input = $(this).find('option:selected').val();
    $.get('/outlets/' + input, function(data) {
        $('.result').html(data);
    });
});

另一种解决方案是，它不会返回 HTML，而是返回 JSON。在这种情况下，您将绑定到您定义的模板。这有点复杂，但允许操作方法简单地专注于返回数据而不用担心渲染。

于 2013-07-24T15:32:18.973 回答