Как сделать панель обновления в ASP.NET MVC - PullRequest
Новая
       32

Как сделать панель обновления в ASP.NET MVC

42 голосов
/ 07 июня 2009

Как создать панель обновления в ASP.NET Model-View-Contoller (MVC) framework?

Ответы [ 3 ]

64 голосов
/ 07 июня 2009

Вы можете использовать частичное представление в ASP.NET MVC для получения аналогичного поведения. Частичное представление может по-прежнему создавать HTML-код на сервере, и вам просто нужно подключить HTML-код в нужном месте (на самом деле помощники MVC Ajax могут настроить его для вас, если вы хотите включить библиотеки MSFT Ajax).

В главном окне вы можете использовать форму Ajax.Begin для настройки асинхронного запроса. 

    <% using (Ajax.BeginForm("Index", "Movie", 
                            new AjaxOptions {
                               OnFailure="searchFailed", 
                               HttpMethod="GET",
                               UpdateTargetId="movieTable",    
                            }))

       { %>
            <input id="searchBox" type="text" name="query" />
            <input type="submit" value="Search" />            
    <% } %>

    <div id="movieTable">
        <% Html.RenderPartial("_MovieTable", Model); %>
   </div>

Частичное представление инкапсулирует раздел страницы, которую вы хотите обновить. 

<%@ Control Language="C#" Inherits="ViewUserControl<IEnumerable<Movie>>" %>

<table>
    <tr>       
        <th>
            Title
        </th>
        <th>
            ReleaseDate
        </th>       
    </tr>
    <% foreach (var item in Model)
       { %>
    <tr>        
        <td>
            <%= Html.Encode(item.Title) %>
        </td>
        <td>
            <%= Html.Encode(item.ReleaseDate.Year) %>
        </td>       
    </tr>
    <% } %>
</table>

Затем настройте действие вашего контроллера для обработки обоих случаев. Результат частичного просмотра хорошо работает с запросом asych. 

public ActionResult Index(string query)
{          
    var movies = ...

    if (Request.IsAjaxRequest())
    {
        return PartialView("_MovieTable", movies);
    }

    return View("Index", movies);      
}

Надеюсь, это поможет.

4 голосов
/ 07 июня 2009

По сути, «традиционные» серверные элементы управления (включая ASP.NET AJAX) не будут работать «из коробки» с MVC ... жизненный цикл страницы довольно сильно отличается. С MVC вы визуализируете свой Html-поток гораздо более напрямую, чем абстрагированный / псевдо-сохраняющий текст блок, в который вас оборачивает WebForms.

Чтобы «имитировать» UpdatePanel в MVC, вы можете подумать о заполнении <DIV> с использованием jQuery для достижения аналогичного результата. действительно простой пример только для чтения находится на этой странице "поиска"

HTML прост: 

<input name="query" id="query" value="dollar" />
<input type="button" onclick="search();" value="search" />

Данные для «панели» представлены в формате JSON - MVC может сделать это автоматически, см. NerdDinner SearchController.cs

    public ActionResult SearchByLocation(float latitude, float longitude) {
        // code removed for clarity ...
        return Json(jsonDinners.ToList());
    }

и jQuery / javascript тоже 

  <script type="text/javascript" src="javascript/jquery-1.3.2.min.js"></script>
  <script type="text/javascript">
  // bit of jquery help
  // http://shashankshetty.wordpress.com/2009/03/04/using-jsonresult-with-jquery-in-aspnet-mvc/
  function search()
  {
    var q = $('#query').attr("value")
    $('#results').html(""); // clear previous
    var u = "http://"+location.host+"/SearchJson.aspx?searchfor=" + q;
    $("#contentLoading").css('visibility',''); // from tinisles.blogspot.com
    $.getJSON(u,
        function(data){ 
          $.each(data, function(i,result){ 
            $("<div/>").html('<a href="'+ result.url+'">'+result.name +'</a>'
                            +'<br />'+ result.description
                            +'<br /><span class="little">'+ result.url +' - '
                            + result.size +' bytes - '
                            + result.date +'</span>').appendTo("#results");
          });
        $("#contentLoading").css('visibility','hidden');
        });
  }
  </script>

Конечно, UpdatePanel может использоваться в гораздо более сложных сценариях, чем этот (он может содержать INPUTS, поддерживает ViewState и запускается на разных панелях и других элементах управления). Если вам нужна такая сложность в вашем приложении MVC, я боюсь, что вы можете заняться какой-то индивидуальной разработкой ...

3 голосов
/ 07 июня 2009

Если вы новичок в asp.mvc, я рекомендую вам загрузить пример приложения NerdDinner ( source ). Там вы найдете достаточно информации, чтобы начать эффективно работать с mvc. У них также есть примеры AJAX. Вы обнаружите, что вам не нужно, и обновите панель.

...