MVC、Jquery 和 Ajax 根据下拉菜单显示对象答案

【问题标题】：MVC, Jquery, and Ajax to display object based on dropdownMVC、Jquery 和 Ajax 根据下拉菜单显示对象
【发布时间】：2009-07-20 00:46:41
【问题描述】：

我正在尝试设计一个视图来接受捐赠、出售会员资格或出售活动门票。

我有一个显示“捐款”、“购买会员资格”的下拉列表，随后的选项由控制器传递的IList<Event> 模型填充。我使用 javascript 来确定应该根据选择显示哪个面板（会员、捐赠或活动）。

我遇到的问题是，一旦选择了一个事件，我需要能够使用所选事件的属性动态填充事件面板（当然，不必让用户通过浏览器刷新）。有人告诉我，我应该能够使用 Ajax 来完成此任务。假设我可以转到我的 server/home/GetEventById 操作来执行此操作。但是，我找不到任何可以帮助我完成此任务的示例或教程。

任何人都可以通过如何解决这个问题为我阐明这一点，或者提供对我有帮助的示例或教程吗？

【问题讨论】：

标签： c# asp.net-mvc jquery

【解决方案1】：

这是一个通过 ajax 调用控制器方法来获取一些内容的代码示例，然后用它填充一个 jQuery 对话框。希望这有助于为您指明正确的方向。

控制器方法：

[AcceptVerbs(HttpVerbs.Get)]
public ActionResult GetItemsForJson()
{
    var items = Repository.GetItems();
    var result = Json(items);

    return result;
}

以及实现它的 jQuery：

$('#dialog_link').click(function () {
    $.getJSON("/Items/GetItemsForJson/", getItems);
});


function getItems(items) {
    $("#itemlist").text("");
    $.each(items, function (i, item) {
        $("#itemlist").append("<li>" + item.Id + item.Name + "</li>");
    });
}

【讨论】：

我不得不改成 $.getJSON("/Items/GetItemsForJson/", getItems());

【解决方案2】：

你的问题有点太宽泛了。我假设你已经在控制器中实现了你的动作，所以我们只专注于客户端脚本。

以下应该在 $.ready 内：

$("#ddlSelectEvent").change(function() { // this will fire when drop down list is changed
    var selection = $(this).attr("selected"); // text representation of selected value
    $(".panels").hide();
    $("#panel_" + selection).show(); // Assume the panel naming will be panel_MakeDonation and those...
    // Now is time for ajax - load html directly
    $.get("server/home/geteventbyId",
        {id: "12345"},
        function (data) { // callback when data is loaded
            $("#panel_" + selection).html(data);
        }
    );
});

以上代码假设您使用 html 填充面板的内容。您可能会使用 JSON 或其他类型，具体取决于您的实现方式。 http://docs.jquery.com/Ajax/jQuery.get#urldatacallbacktype

【讨论】：

【解决方案3】：

我不确定 MVC 是如何改变这一点的，但这里是我如何使用 Ajax 进行回调：

在下拉列表框的 onchange 事件中，您将调用一个使用 Ajax 的 PageMethod 的 java 函数，如下所示：

       PageMethods.getVersions(LoadVersionsCallback);

您在 .aspx.cs 文件中调用的方法必须是静态的，它可以接受参数并且看起来像：

     [System.Web.Services.WebMethod]    
    public static string getVersions()    {      
    StringBuilder sb = new StringBuilder();       
    ... etc.      
    return sb.ToString();    
    }

您在调用该方法时指定的 javascript 函数将在该方法完成时运行。它将通过结果。

   function LoadVersionsCallback(result) {    
// do something with the results - I load a dropdown list box.   
...etc.     
 }

【讨论】：

他指的是 JQuery、mvc 和 ajax。