Как сделать панель обновления AJAX? (MVC2)

Question

Я использую Telerik control view:

• http://demos.telerik.com/aspnet-mvc/treeview
• http://demos.telerik.com/aspnet-mvc/treeview/clientsideevents

Что я хочу сделать, это настроить этослева, затем «панель» справа, которая обновляется при нажатии на древовидное представление.

Итак, я хочу сделать AJAX-вызов для получения информации из БД, когда в древовидном представлении сделан щелчок.Затем я могу обновить «панель» информацией о текущем элементе.

Как я могу создать эту «панель»?И все элементы управления, разработанные для ASP.NET MVC2, лучше, потому что именно это я и реализую. Я увидел что-то под названием UFRAME, но оно напомнило мне об IFRAME и подумал, что, вероятно, следует его избегать.сделать это с частичным представлением, а затем только с частичной областью просмотра обновлений страницы?

Спасибо.

Answer 1

Telerik TreeView имеет:

1. OnSelect клиентское событие, которое
2. вы хотите подписаться и
3. вызов Ajax, когда происходит выбор
4. к действию контроллера приложения Asp.net MVC, которое
5. вернет PartialView, который
6. затем вы можете добавить к правой панели

Это процесс, который будет разработан.

Я никогда не использовал элементы управления Telerik в своей жизни , но, основываясь на документации на их странице, кажется, что это работает именно так. Все это в основном обычный Asp.net MVC + jQuery, за исключением OnSelect клиентского события, которое вы должны использовать. Так что ничего особенно сложного, если управление Telerik работает должным образом (что может быть историей).

Какой-то код

Поскольку я никогда не использовал Telerik, я все еще думаю, что это можно сделать следующим образом:

1. Ваш TreeView определен в одном из ваших представлений, таких как:

   <%= Html.Telerik().TreeView().Name("ClientSideID") %>
   

2. Затем используйте jQuery, чтобы сделать остальное:

   $(function(){
       $("#ClientSideID").bind("select", function(e){
           e.preventDefault();
           $.ajax({
               url: "SomeURL",
               data: e.item,
               type: "POST",
               success: function(partialView) {
                   partialView = $(partialView);
                   $("RightPanelSelector").append(partialView);
               },
               error: function(xhr, status, err){
                   // handle error
               }
           });
       });
   });
   

Этот код не проверен, но поможет вам начать работу.