AJAX updatepanel, MVC 3.0에서의 타이머 기능

Question

듣기 나는 MVC 3.0에 익숙하지 만, MVC 세계에서 asp : UpdatePanel을 대체하기위한 간단한 직선 튜토리얼을 찾고있다. jquery 함수에 대한 예제가 많이 있지만 MVC에서 와이어 링하는 방법을 모르기 때문에 호출해야합니다. 누군가가 _layout.vbhtml 페이지에 날짜 시간을 넣는 것과 같은 간단한 "타이머 새로 고침"부분보기를 수행하는 방법에 대한 어렵고 빠른 예제를 가르쳐 주시겠습니까?

Answer 1

MVC 프로젝트 템플릿과 함께 제공되는 jQuery 라이브러리를 사용하면 클라이언트에서 JavaScript로 작업하게 될 것입니다. 성공하려면 $ .ajax() 또는 유사하게, # .html()을 사용하십시오.

이의 같은 http://www.asp.net/mvc/tutorials/iteration-7-add-ajax-functionality-cs

생각해 2 개 별개의 부분으로 분할되는 것으로 asp.net 웹 사이트에 대한 예제를있다 - 첫째로 당신은 포맷의 콘텐츠를 반환하는 컨트롤러 액션이 필요합니다; 둘째, 컨트롤러를 호출하고 응답을 처리하는 클라이언트 측 작업이 필요합니다. 두 번째 부분에서 범용 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 

색인 및 작업에 대한 완전히 바닐라, 그들은 템플릿에서 그대로입니다. 클라이언트 호출과 함께 MVC를 사용하는 방법의 요지를 보여주는 3 가지 방법을 추가했습니다. 컨트롤러의 Content() 메서드는 단순히 문자열을 반환하며 이러한 종류의 작업에 사용될 수 있습니다. 실제 환경에서 더 유용하게 사용되는 부분적인 뷰와 JSON 형식의 데이터를 각각 반환하는 Partial()과 JSON()이 있습니다. (참고 - GET 요청을 사용하여 JSON을 요청하는 경우 메소드의 두 번째 매개 변수로 JsonBehaviour.AllowGet을 지정해야합니다. 기본 보안은이를 비활성화하고 재미있는 오류 메시지를받습니다. 처음 두 메소드는 GET 및 POST 요청 모두에 수신되고, 세 번째 메소드는 POST 요청에만 응답합니다. 여기 아주 간단한

<%@ 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> 

:

그리고 여기에는 해당 뷰 (I 색인을 사용하지만 하나가 될 수 있습니다)입니다. 첫 번째 비트는 다시 템플릿과 함께 제공되는 인덱스보기의 바닐라 내용입니다. 그 아래에서 임의의 클릭 가능 객체로 각 예제에 대해 <div>을 추가했습니다. <p>을 사용했는데, 어떤 방식 으로든 주소 지정이 가능하고 ID를 사용했지만 클래스 나 기타 다른 것들은 사용할 수있었습니다. 결과가 갈 임의의 자리 표시 자도 있는데 다시 <span>을 사용했지만 아무거나 될 수 있습니다.

어디서나 사용자 정의 스크립트 위의 모든 부분 - jQuery에 대한 참조로 척하십시오. 프로덕션 환경에서는 서버 또는 Google에서 최소화 된 대역폭으로 대역폭을 절약하는 것이 가장 좋습니다. 디자인을 위해 인텔리 센스를 지원하고 필요할 경우 읽기가 더 쉬운 vsdoc을 사용합니다.

두 번째 스크립트 태그는 기본적으로 이벤트 처리기를 설정합니다. jQuery 문서 사이트에서 바로이 부분을 짤막하게 훑어보고 매개 변수를 수정했습니다. jQuery 문서는 정말 훌륭하고 많은 예제를 제공한다.

디버깅 도움말이 필요한 경우 대부분의 브라우저는 요즘 FireBug, IE 개발자 도구 또는 Chrome과 같은 자바 스크립트 디버깅을 사용할 수 있습니다. 이 모든 것들은 .Net 코드와 같은 중단 점을 가지므로, 당신은 무슨 일이 일어나고 있는지 볼 수 있습니다.

Answer 2

이 링크를 누르면 검색이 종료됩니다. ASP.NET MVC 업데이트 패널을 구현하기에 가장 좋은 자습서 ..

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