2012-11-02 12 views
8

Mam funkcję jQuery, która po kliknięciu elementu div pobiera te elementy z predefiniowaną wartością identyfikatora. Co chcę zrobić, to załadować te elementy rodzica dzieci, więc planuję dynamicznie zbudować trochę html za pomocą jQuery. Nie wiem, jak to zrobić, należy nawiązać połączenie z kontrolerem (ASP.NET MVC 3) i poprosić kontroler, aby zwrócił kolekcję do klienta.Jak dynamicznie pobierać dane z kontrolera ASP.NET MVC do jQuery?

Wiem, jak wysłać obiekt JSON z jQuery do kontrolera, ale nie na odwrót.

Z góry dzięki!

Odpowiedz

17

Oto kod, jak przesłać dane z kontrolera do json:

$.ajax({ 
    url: '@Url.Action("GetData", "Home")', 
    type: "GET", 
    success: function (result) { 
     $("#somediv").append(result.FirstName); 
     $("#somediv").append(result.LastName); 
     $("#somediv").append(result.Age); 
    } 
}); 

Rozważmy klasę jak poniżej ....

public class User 
{ 
    public string FirstName { get; set; } 
    public string LastName { get; set; } 
} 

twoje działanie powinno wyglądać następująco.

public JsonResult GetData() 
{ 
    User user = new User(); 
    user.FirstName = "Yasser"; 
    user.LastName = "Shaikh"; 
    user.Age = 100; 

    return Json(user, JsonRequestBehavior.AllowGet); 
} 

Further Reading

+1

Wszystkie dobre odpowiedzi, trudno wybrać jeden jako odpowiedź. Wybrany Yasser's jako dodatkowy link do czytania był szczególnie pomocny, ale wszyscy postawili mnie we właściwym kierunku. Dziękuję wszystkim –

+0

Co jest domem w tym przykładzie? –

+0

@KalaJ home to "HomeController" to tylko nazwa nadana kontrolerowi. – Yasser

1

Można skorzystać z funkcji jquery ajax i MVC Razor Url własności:

$.ajax({ 
    url: '@Url.Action("Home")', 
    type: "GET", 
    success: function (data) { 
     $("my-div").append(data); 
    } 
}); 

Wartość nieruchomości sukcesu jest funkcją z jednym argumentem: danych. Jest to wynik tego, co jest zwracane przez kontroler.

3

Próbka:

Javascript:

$.ajax({ 
     type: 'POST', 
     url: '@(Url.Action("SomeAction", "SomeController"))', 
     data: someInputData, 
     error: OnErrorFunction, 
     success: function (data, textStatus, XMLHttpRequest) { 
      alert(JSON.stringify(data)); 
     }, 
     dataType: "json" 
    }); 

Kontroler:

public ActionResult SomeAction(InputDataType someInputData) 
    { 
     if (someInputData== null) 
      return null; 
     return new JsonResult {Data = SomeOutputData(someInputData)}; 
    } 
Powiązane problemy