Bizzare поведение MVC Action/RenderAction, ajax post и Partial Views

Question

Итак, идеальный дизайн - это иметь одну страницу с несколькими разными «виджетами» в этом приложении MVC. Каждый «виджет» должен иметь возможность отправлять информацию обратно себе и перезагружать только себя. Простой в веб-формах, не столько с MVC, кажется

Во-первых, у нас есть наш главный контроллер страницы, ничего особенного

public ActionResult Index() 
{ 
    return View(); 
} 

Далее, мы имеем нашу главную страницу View. Обратите внимание, что я попытался как Action и RenderAction и нет никаких изменений в поведении

@Html.Action("Index", "Monitor", new { area = "Statistics" }); 

<div id="messages"> 
    @Html.Action("Index", "Messages", new { area = "Data"}); 
</div> 

@section Script { 
    <script src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")" type="text/javascript"></script> 
<script type="text/javascript"> 
    $('#filter').click(function() { 
     $.ajax({ 
      method: 'POST', 
      url: '@Url.Action("Index", "Messages", new { area = "Data"})', 
      success: function(data){ 
       $('#messages').html(data); 
      } 
     }); 
     return false; 
    }); 
</script> 

Индекс ActionResult в контроллере Сообщения:

public ActionResult Index() 
{ 
    var model = GetMessages(); 
    return PartialView(model); 
} 

Для краткости, пропустим весь Monitor Index View, и только предоставить краткую версию Индекс сообщений

@using (Html.BeginForm("Index", "Messages", FormMethod.Post)) 
{ 
    //Some fields to limit results are here, with style classes 
    <button type="submit" id="filter">Filter</button> 
} 

@foreach(var item in Model) 
{ 
    //Display results 
} 

При загрузке главной страницы все выглядит хорошо. Отображаются поля для ограничения результатов, а также сообщения. Я могу ввести что-то в поля, нажать «Фильтр», и я вернусь на главную страницу, но! ... поля потеряли свои классы стиля, и сообщения нефильтрованы.

Странно, но более странно, если я снова вводим информацию в полях и нажимаю «Фильтр», на этот раз меня не забирают на главную страницу, а получают только частичный вид отображаемого сообщения и сообщения не фильтруются ,

Я не могу сказать, что фильтрация, не работающая, связана с этой проблемой или нет, но несогласованное поведение нажатия фильтра - это часть, которая меня беспокоит. Кто-нибудь хотел указать, что я делаю неправильно здесь?

Answer 1

Возможно, вы используете в своих видах Ajax.BeginForm, а не Html.BeginForm. Это позволит виджеты управлять своими сообщения:

<div id="messages"> 
    @using (Ajax.BeginForm("Index", "Messages", new AjaxOptions { UpdateTargetId = "messages" })) 
    { 
    // fields content 
    } 
    // other widget content 
</div> 

«странным» поведением вы видите, что происходит потому, что на странице загрузки отправке событие для кнопки #filter был взломан с помощью JQuery, но после первой замены содержимого виджета #filter отправить событие больше не увлекается, поэтому при нажатии на него отправляется вся страница. Если вы не хотите использовать Ajax.BeginForm, вам нужно будет использовать $.on, а не $.click, чтобы регистрировать события, поскольку он будет обрабатывать события для соответствия элементам, которые создаются после запуска скрипта регистрации событий.