MVC, Jquery и Ajax для отображения объекта на основе раскрывающегося списка

Question

Я пытаюсь создать представление, чтобы принимать пожертвования, продавать членство или продавать билеты на мероприятия.

У меня есть выпадающий список, в котором отображаются «Сделать пожертвование», «Приобрести членство», а последующие параметры заполняются из модели IList<Event>, переданной из контроллера. Я использую JavaScript, чтобы определить, какая панель (членство, пожертвование или событие) должна отображаться на основе выбора.

Проблема, с которой я столкнулся, заключается в том, что после выбора события мне нужно иметь возможность динамически заполнять панель «Событие» свойствами выбранного события (конечно, без необходимости обновлять браузер пользователем). ). Кто-то сказал мне, что я должен быть в состоянии использовать Ajax для этого. Предположительно, я мог бы перейти к своему действию server / home / GetEventById, чтобы сделать это. Однако я не смог найти ни примеров, ни руководств, которые бы помогли мне в этом.

Может ли кто-нибудь пролить некоторый свет на это для меня с помощью того, как это сделать, или предоставить примеры или учебные пособия, которые могут мне помочь?

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

 }

Answer 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

Answer 3

Я не уверен, как MVC меняет это, но вот как я делаю обратный вызов с Ajax:

В событии onchange окна выпадающего списка вы вызываете функцию Java, которая использует PageMethod Ajax, что-то вроде этого:

       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.     
 }