2013-08-14 16 views
10

Jestem bardzo nowy do tworzenia stron internetowych, ale mają duże doświadczenie w rozwoju w ogóle. Mam stronę ASP, która ma kilka pól wprowadzania i przycisk przesyłania. Ten przycisk przesyłania czysto wywołuje $ .ajax, który zamierzałem wywołać metodę w pliku z kodem. Zauważyłem jednak dwie interesujące rzeczy. Po pierwsze, wywołanie ajaxa powiedzie się bez względu na to, jakie dane zostaną mu dostarczone. Po drugie, pole responseText jest źródłem html całej strony.ASP.NET jQuery Ajax Calling Code-Behind Metoda

Przeczytałem this i inne artykuły, które wskazują na webconfig, ale te rozwiązania nie wydają się rozwiązywać mojego problemu.

Oto strona asp:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
    <script src="TesScript.js"></script> 
    <link rel="Stylesheet" type="text/css" href="TestStyle.css" /> 
</head> 
<body> 
    <div> 
     <ul class="tempList"> 
      <li>Name: 
       <input id="nameText" type="text" /> 
      </li> 
      <li>Attending: 
       <input id="yesButton" type="radio" name="attending" /> 
       Yes 
       <input id="noButton" type="radio" name="attending" /> 
       No </li> 
      <li>Return Address: 
       <input id="returnAddressText" type="text" /> 
      </li> 
      <li> 
       <input id="submitButton" type="button" onclick="submit()" value="Submit" /> 
      </li> 
     </ul> 
    </div> 
    <ul id="errorContainer" class="errorSection" runat="server" /> 
    <ul id="messageContainer" class="messageSection" runat="server" /> 
</body> 
</html> 

Kod za:

using System; 
using System.Web.Services; 
using System.Web.UI; 

namespace TestAspStuff 
{ 
    public partial class _Default : Page 
    { 
     protected void Page_Load(object sender, EventArgs e) 
     { 
     } 


     [WebMethod] 
     public static string OnSubmit(string name, bool isGoing, string returnAddress) 
     { 
      return "it worked"; 
     } 
    } 
} 

I JavaScript:

function submit() { 

    var name = "my name"; 
    var isAttending = true; 
    var returnAddress = "[email protected]"; 

    SendMail(name, isAttending, returnAddress); 
} 

function SendMail(person, isAttending, returnEmail) { 

    var dataValue = { "name": person, "isGoing": isAttending, "returnAddress": returnEmail }; 

    $.ajax({ 
     type: "POST", 
     url: "Default.aspx/OnSubmit", 
     data: dataValue, 
     error: function (XMLHttpRequest, textStatus, errorThrown) { 
      alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown); 
     }, 
     complete: function (jqXHR, status) { 
      alert("complete: " + status + "\n\nResponse: " + jqXHR.responseText); 
     } 
    }); 

} 

Teraz zauważyłem mogę zmienić właściwość url do cokolwiek chcę, a metoda błędu nigdy nie jest wywoływana, a status to sukces, a responseText jest całkowitym html pa ge. Mój webconfig ma wszystkie odpowiednie sekcje (w tym sekcję htmlModule). Pracuję w .Net 3.5. Doceniam każdą pomoc i, znowu, jestem naprawdę nowy, więc to, co jest oczywiste dla innych, najprawdopodobniej nie jest dla mnie oczywiste. A jeśli jest lepszy sposób na zrobienie tego (wywołanie metody kodu JavaScript z poziomu asp.net), prosimy o opublikowanie tego. Dzięki!!!

+3

Ponieważ prosić o lepszy sposób, IMO należy użyć MVC, Web API lub serwis internetowy, aby uzyskać json odpowiedzi. Chociaż można to zrobić na stronach aspx, ale jest to złudne rozwiązanie. Strony aspx są zaprojektowane, dla, dobrze, renderowania stron internetowych! –

+1

Tworzenie usługi internetowej jest prawdopodobnie najprostszym z tych ... to jest to, do czego zostały stworzone. – Nick

+0

Dziękuję wam obojgu. Rozejrzałem się trochę i prawdopodobnie spróbuję, kiedy będę miał lepsze zrozumienie. Chciałbym wiedzieć, jak to działa na tym poziomie. Dzięki! –

Odpowiedz

16

Po pierwsze, prawdopodobnie chcesz dodać zwrot false; w dolnej części metody Submit() w JavaScript (aby zatrzymać wysyłanie, ponieważ przetwarzasz ją w AJAX).

Ty podłączeniem do zdarzenia kompletny, nie sukces wydarzenie - istnieje znacząca różnica i dlatego wyniki debugowania nie są zgodnie z oczekiwaniami. Nigdy też nie dostosowałem metod podpisu do twoich, a zawsze podawałem contentType i dataType. Na przykład:

$.ajax({ 
     type: "POST", 
     url: "Default.aspx/OnSubmit", 
     data: dataValue,     
     contentType: 'application/json; charset=utf-8', 
     dataType: 'json', 
     error: function (XMLHttpRequest, textStatus, errorThrown) { 
      alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown); 
     }, 
     success: function (result) { 
      alert("We returned: " + result); 
     } 
    }); 
+0

Dziękuję. To nie rozwiązało problemu, mimo że dostarczyło więcej szczegółów. Nie obejmuje pól contentType i dataType, metoda sukcesu jest wykonywana, a wynikiem jest cała strona HTML. Dodając te dwa pola, zdarzenie błędu jest zgłaszane z wewnętrznym błędem serwera. Co miałeś na myśli mówiąc "Nigdy nie podjąłem metod podpisu pasującego do twojego"? –

+1

Naprawiono! Przekazane dane nie pasowały do ​​argumentów, których oczekiwały. –

+3

Witaj @WilliamCustode, czy możesz napisać, że jesteś naprawiony? – RMiranda

3

To również nie rozwiązało mojego problemu, więc nieznacznie zmieniłem parametry.
Ten kod pracował dla mnie:

var dataValue = "{ name: 'person', isGoing: 'true', returnAddress: 'returnEmail' }"; 

$.ajax({ 
    type: "POST", 
    url: "Default.aspx/OnSubmit", 
    data: dataValue, 
    contentType: 'application/json; charset=utf-8', 
    dataType: 'json', 
    error: function (XMLHttpRequest, textStatus, errorThrown) { 
     alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown); 
    }, 
    success: function (result) { 
     alert("We returned: " + result.d); 
    } 
}); 
Powiązane problemy