2009-09-16 4 views
3

У меня есть div с частичным внутри где-то на странице. У меня есть событие на кнопке. Как я могу написать Javascript, который принимает div и перезагружает его, а также перезагружает частичный вид.Как я могу перезагрузить div с помощью PartialView в ASP.NET MVC с помощью jQuery?

У меня есть это в другом представлении. Но теперь я не могу этого сделать. Но мне нужно то же самое, чтобы выполняться только jQuery, а не непосредственно на странице. Могу ли я запустить, возможно, симуляторный код ajax в сценарии jQuery, потому что его javascript тоже не так ли?

<% using (Ajax.BeginForm("EditFeiertag", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "feiertage" })) 
    { %> 
<div id="feiertage"> 
    <% Html.RenderPartial("FeiertagTable"); %> 
</div> 
<% } %> 

Я помог бы мне, если бы я мог запустить сценарий выше, запустить событие щелчка или что-то подобное

ответ

8

Начнет с некоторыми основными действиями контроллера:

public class FeiertagController 
{ 
    IFeiertagService feiertagService = new FeiertagService(); 

    public ActionResult EditFeiertag() 
    { 
     // ... return your main edit view 
     return View(); 
    } 

    // Will be called by your jquery ajax call 
    public PartialResult GetFeiertagTable() 
    { 
     var feiertagData = messageService.getLatestFeiertagData(); 
     var viewModel = new FeiertagViewModel(); 
     feiertagViewModel.feirtagTableData = feiertagData; 

     return PartialView("FeiertagTableView", viewModel); 
    } 

} 

Итак, EditFeiertag () используется для рендеринга всей страницы редактирования, и эта страница будет делать вызов GetFeiertagTable(), когда она хочет асинхронно отобразить ваш частичный вид.

Теперь, на ваш взгляд, позволяет сказать, что у вас есть что-то вроде:

<div id="Container"> 
    <div id="LeftPanel"> 
     // ... Some menu items 
    </div> 
    <div id="RightPanel"> 
     <a id="ReloadLink" href="#">Reload Table</a> 
     <div id="FeiertagTable> 
      <% Html.RenderPartial("FeiertagTable", Model.feiertagTableData); %> 
     </div> 
    </div> 
</div> 

Это прекрасно работает и загружает таблицу один раз. Но вы хотите перезагрузить таблицу Feiertag, если вы нажмете на определенный элемент (в нашем случае #ReloadLink).

Добавьте следующие части вашей страницы:

<head> 
     <script src="../../Scripts/Jquery/jquery-1.3.2.min.js" type="text/javascript"></script> 
     <script type="text/javascript"> 
      jQuery(document).ready(function($) { 
       $('#ReloadLink').click(function(e) 
       { 
        e.preventDefault(); // stop the links default behavior 
        $('#FeiertagTable').load('/Feiertag/GetFeiertagTable'); 
       }); 
      }); 
     </script> 
</head> 

Это будет добавить событие на событие щелчка по вашей ссылке перегрузочной что будет вызывать метод JQuery нагрузки(). Этот метод является упрощенным запросом ajax get, и он заменит содержимое выбранного div (FeiertagTable), на то, что возвращается.

Действие нашего контроллера GetFeiertagTable() возвращает частичный вид, который затем вставляется в этот div.

Надеюсь, это заставит вас указывать в правильном направлении!

Смежные вопросы