Панель обновления AJAX, функции таймера в MVC 3.0 - PullRequest
0 голосов
/ 09 мая 2011

Слушай, я очень новичок в MVC 3.0, но я искал и искал простое простое руководство для замены asp: UpdatePanel в мире MVC.Есть много примеров функции jquery, которую нужно вызывать, но, поскольку я не знаю, как подключить ее в MVC, я все еще заблудился.Может ли кто-нибудь указать мне жесткий и быстрый пример того, как я могу сделать простое частичное представление «Обновление таймера», например, поставить дату на странице _layout.vbhtml?

Ответы [ 2 ]

2 голосов
/ 09 мая 2011

Вы будете работать в JavaScript на клиенте, возможно, используя библиотеку jQuery, поставляемую с шаблоном проекта MVC.Вы, вероятно, используете $ .ajax () или аналогичный, с # .html () в случае успеха.

На сайте asp.net есть примеры, такие как http://www.asp.net/mvc/tutorials/iteration-7-add-ajax-functionality-cs

Подумайте об этомбудучи разделенным на две отдельные части - во-первых, вам нужно действие контроллера, которое будет возвращать отформатированный контент;во-вторых, вам нужно действие на стороне клиента, которое вызовет контроллер и обработает ответ.Вы можете найти учебники общего назначения по jQuery более полезными для второй части, поскольку они охватывают всю библиотеку.

Редактировать: Чувствуя себя хорошо, вот и все:

Вот простой контроллер:

Public Class HomeController
    Inherits System.Web.Mvc.Controller

    Function Index() As ActionResult
        ViewData("Message") = "Welcome to ASP.NET MVC!"

        Return View()
    End Function

    Function About() As ActionResult
        Return View()
    End Function

    Function SayHello() As ActionResult
        Return Content("Hello!")
    End Function

    Function SayFormattedHello() As ActionResult
        Return Content("<span style='color:red'>Hello <span style='color:blue'>in colour</span></span>")
    End Function

    <HttpPost()>
    Function SayHelloPost(name As String) As ActionResult
        Return Content("Hello " & name)
    End Function

End Class

Действия Index и About полностью ванильны, они не затронуты в шаблоне.Я добавил 3 глупых метода, которые показывают суть того, как использовать MVC с клиентскими вызовами.Метод Content () на контроллере просто возвращает строку и может использоваться для такого рода вещей.Более полезными в реальных условиях являются Partial () и JSON (), которые возвращают частичное представление и данные в формате JSON соответственно.(Примечание: если вы запрашиваете JSON с GET-запросами, вам нужно указать JsonBehaviour.AllowGet в качестве второго параметра в методе - защита по умолчанию отключает это, и вы получите забавное сообщение об ошибке).Первые два метода будут получать запросы как GET, так и POST, третий будет отвечать только на запросы POST.

А вот соответствующее представление (я использовал Index, но может быть любым):

<%@ Page Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">
    Home Page
</asp:Content>
<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
    <script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
    <h2>
        <%: ViewData("Message") %></h2>
    <p>
        To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">
            http://asp.net/mvc</a>.
    </p>
    <div>
        <p id="link1">
            Say Hello</p>
        <p>
            <span id="output1"></span>
        </p>
    </div>
    <div>
        <p id="link2">
            Say Hello</p>
        <p>
            <span id="output2"></span>
        </p>
    </div>
    <div>
        <p id="link3">
            Say Hello</p>
        <p>
            <span id="output3"></span>
        </p>
    </div>

    <script type="text/javascript">
        $(document).ready(function () {

            $("#link1").click(function () {
                $.get('Home/SayHello', function (data) {
                    $('#output1').html(data);
                    alert('Load was performed.');
                });
            });

            $("#link2").click(function () {
                $.get('Home/SayFormattedHello', function (data) {
                    $('#output2').html(data);
                    alert('Load was performed.');
                });
            });

            $("#link3").click(function () {
                $.post('Home/SayHelloPost',
                { "name": "Richard" }, 
                function (data) {
                    $('#output3').html(data);
                });
            });

        });
    </script>
</asp:Content>

Довольно просто здесь.Первый бит - это снова ванильное содержимое представления Index, которое поставляется с шаблоном.Ниже, я просто добавил <div> для каждого из моих примеров, с произвольной активируемой кнопкой мыши - я использовал <p> s, может быть что угодно, что может быть адресовано каким-то образом, я использовал идентификаторы, но классы или что-то ещедолжно сработать.Существуют также произвольные заполнители, в которые будут попадать результаты, опять же я использовал <span>, но может быть любым.

Где-то в представлении - где-нибудь выше пользовательского сценария - вставьте ссылку на jQuery.В производстве, вероятно, лучше всего использовать минимизированный сервер или сервер Google для экономии трафика.Для разработки я бы остановился на vsdoc, который поддерживает intellisense и его легче читать, если вам нужно.

Второй тег script в основном устанавливает обработчики событий.Я сделал это прямо с сайта документации jQuery и просто изменил параметры.Документация по jQuery действительно хороша и дает множество примеров.

Если вам нужна помощь в отладке, в настоящее время большинство браузеров имеют отладку JavaScript, которую вы можете вызывать, будь то FireBug, IE Developer Tools или Chrome.Все они имеют точки останова и т. Д., Как и в коде .Net, так что вы можете видеть, что происходит.

0 голосов
/ 10 октября 2011

Эта ссылка положит конец вашему поиску. Лучший учебник по реализации панели обновления ASP.NET MVC ..

http://weblogs.asp.net/dwahlin/archive/2009/05/14/emulating-the-updatepanel-in-asp-net-mvc-1-0-with-ajaxhelper.aspx

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...