Jak renderować częściowy widok w MVC5 poprzez wywołanie ajax do kontrolera i zwracać HTML

Jak można użyć AJAX do załadowania pełnego częściowego widoku renderowanego w html (więc po prostu ustawiłem div.html)

Potrzebuję wywołania ajax do wywołania akcji kontrolera, która wyrenderuje pełny częściowy widok (czerwony) i doda go na końcu aktualnie załadowanego?

[wiem jak dodawać do DOM i jak wykonywać połączenia AJAX]

Muszę wiedzieć, co jest najlepsze hydraulika podejście do tego, jaki rodzaj działania powinien zwrócić działanie i jeśli jest już wbudowany mechanizm do tego , aby uniknąć wymyślania koła na nowo?

Tutaj wpisz opis obrazka

Author: Luke, 2015-09-16
Source

2 answers

Jest wbudowany helpers ajax w ASP.NET MVC, który może obejmować podstawowe scenariusze.

Musisz zainstalować i odwołać jquery.unobtrusive-ajax bibliotekę JavaScript (+zależność jQuery). Następnie w głównym widoku (powiedzmy indeks.cshtml) umieścić następujący kod:

Indeks.cshtml 

@Ajax.ActionLink("Load More Posts", "MorePosts", new AjaxOptions()
{
    HttpMethod = "GET",
    AllowCache = false,
    InsertionMode = InsertionMode.InsertAfter,
    UpdateTargetId = "posts-wrapper"
})

<div id="posts-wrapper"></div>

Uwaga: @Ajax.ActionLink helper akceptuje parametr AjaxOptions dla większej liczby dostosowań.

W kontrolerze (powiedzmy HomeController.cs ) powinieneś zwrócić PartialViewResult:

public ActionResult MorePosts(int? offset, int? count)
{
    IEnumerable<Post> posts = myService.GetNextPosts(offset, count); 
    return PartialView(posts);
}

Wreszcie definiujesz więcej punktów.CSHTML widok częściowy: 

@model IEnumerable<Post>

@{
    Layout = null;
}

@foreach (var post in Model)
{
    <div class="post">
        <div>>@post.Prop1</div>
        <div>@post.Prop2</div>
    </div>
    <hr />
}

I tyle. Gdy jakiś użytkownik kliknie na przycisk Load More, załaduje się więcej postów.

Uwaga 1: możesz zaimplementować funkcję OnBegin, aby zaimplementować rzeczywistą logikę decydowania, które następne posty mają być załadowane (np. Pobierz id ostatniego załadowanego posta i wyślij go na serwer).

Uwaga 2: ten sam wynik można uzyskać za pomocą niestandardowych wywołań jQuery.ajax (bez jquery.dyskretny). Jedynymi różnicami będą ręczne wywołania ajax i zdarzenia kliknięć.

Mam nadzieję, że to pomoże. W razie potrzeby mogę napisać pełniejszy przykład.
 20
Author: Viktor Bahtev,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-16 14:24:39

Zalecam pobranie biblioteki Westwind.Web.Mvc z NUGET i możesz uruchomić dowolny z widoków do ciągu znaków, aby powrócić jako wynik JSON 

public JsonResult GetPosts()
{
    string postsHtml = ViewRenderer.RenderPartialView("~/views/yourcontroller/_PostsPartial.cshtml",model);

    return Json(new { html = postsHtml });
}

Jak powiedział @Guruprasad w komentarzach, możesz po prostu zwrócić częściowy widok z kontrolera MVC za pomocą return PartialView(model), ale z RenderPartialView otrzymasz go jako ciąg znaków, który możesz wypisać jako JSON wraz z innymi wartościami, jeśli jest to wymagane. Będzie to działać, jeśli zdecydujesz się użyć WebAPI, ponieważ nie ma możliwości renderowania zbudowanego widoku do środka.

 1
Author: Luke,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-16 14:03:38