C# MVC、Jquery和Ajax基于下拉菜单显示对象

我正试图设计一个接受捐款、出售会员资格或出售活动门票的视图

我有一个下拉列表，显示“捐赠”、“购买会员资格”，随后的选项是从控制器传递的

IList

模型填充的。我使用javascript根据选择确定应该显示哪个面板（成员资格、捐赠或事件）

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

---

有没有人可以通过如何进行这项工作来为我解释一下，或者提供一些可以帮助我的示例或教程？

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

在dropdownlist框的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.     
 }

---

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

在dropdownlist框的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.     
 }

---

你的问题有点太宽泛了。我假设您已经在controller中实现了您的操作，所以我们只关注客户端脚本

以下内容应在$.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或其他类型，具体取决于您如何实现它。

---

你的问题有点太宽泛了。我假设您已经在controller中实现了您的操作，所以我们只关注客户端脚本

以下内容应在$.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或其他类型，具体取决于您如何实现它。

---

下面是一个代码示例，通过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）；
});
函数getItems（items）{
$（“#项目列表”）.text（“”）；
$。每个（项目，功能（i，项目）{
$（“#itemlist”）.append（“
”+item.Id+item.Name+”
”）；
});
}

下面是一个代码示例，通过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）；
});
函数getItems（items）{
$（“#项目列表”）.text（“”）；
$。每个（项目，功能（i，项目）{
$（“#itemlist”）.append（“
”+item.Id+item.Name+”
”）；
});
}

他指的是JQuery、mvc和ajax。他指的是JQuery、mvc和ajax。我不得不改成$.getJSON（“/Items/GetItemsForJson/”，getItems（））；我不得不改成$.getJSON（“/Items/GetItemsForJson/”，getItems（））；