Pomoc z AJAX Call

Mati Marecki
  • Rejestracja:ponad 4 lata
  • Ostatnio:prawie 2 lata
  • Postów:31
0

Podążam za microsoftową dokumentacją, działam sobie w tym projekcie Movie w MVC i rozwijam dalej.
Przyszedł czas na AJAX Calle, bo bez tego ta strona jakoś słabo wygląda. Z tego co widze, nie ma nic w microsoftowej dokumentacji o tym i jak używać w MVC, chyba, że to ukrywają przede mną.
Do sedna, tak wygląda View

Kopiuj
<div>
    <h2>ID</h2><h2 id="movieId"></h2>
    <h2>Name</h2><h2 id="nameId"></h2>
    <h2>Genre</h2><h2 id="genreId"></h2>

    <input type="button" onclick="BtnClick(1)" value="clickme"/>
</div>

skrypt ajax używając jQuery i tu się chyba pojawia problem:

Kopiuj
function BtnClick(movieId) {
        $.ajax({
            url: "/Home/GetMovieByIdAjax",
            data: { movieId: movieId }, //czy id: movieId
            method: "GET",
            succes: function (data) {
                data = JSON.parse(data);
                $("#movieId").text(data.Id)
            },
            error: function (err) {
                console.log(err)
            }
        })
    }

Nie umiem przekazać parametru (tu twardo wstawiłem do HTML), bo tak to bez parametru mi się udaje otrzymywać dane.
No i jeszcze z kontrolera:

Kopiuj
 public JsonResult GetMovieByIdAjax(int id)
        {

            var movie = _context.Movies.FirstOrDefault(m => m.ID == id);

            var json = JsonConvert.SerializeObject(movie);

            return Json(json, System.Web.Mvc.JsonRequestBehavior.AllowGet);
        }

Przepraszam, może ktoś zerknie i znajdzie szybko problem, bo z tym JS a w dodatku jQuery coś mi nie idzie.

edytowany 1x, ostatnio: Mati Marecki
JP
  • Rejestracja:ponad 7 lat
  • Ostatnio:4 miesiące
  • Postów:1065
0

Zmień na:

Kopiuj
data: { id: movieId }, //czy id: movieId // id jako nazwa parametru

albo

zmień url na

Kopiuj
 url: "/Home/GetMovieByIdAjax/"+movieId,

i usuń

Kopiuj
data: { movieId: movieId }, //czy id: movieId
Mati Marecki
  • Rejestracja:ponad 4 lata
  • Ostatnio:prawie 2 lata
  • Postów:31
0

Jednak sprawa nie jest prosta: mianowicie, być może w referncjach jest problem, gdy dodaje using System.Web.Mvc, jak sugeruje intellisense wyskakuje masa błędów.
To jest error z przeglądarku, próbowałem następujących sposobów:
Dodanie Microsoft.AspNetCore.Mvc.NewtonsoftJson w starup:

Kopiuj
services.AddControllers().AddNewtonsoftJson();
            services.AddControllersWithViews().AddNewtonsoftJson();
            services.AddRazorPages().AddNewtonsoftJson();

screenshot-20210505162220.png

screenshot-20210505162653.png

W tej linicje jest problem:

JP
  • Rejestracja:ponad 7 lat
  • Ostatnio:4 miesiące
  • Postów:1065
0

A zainstalowałeś paczkę Microsoft.AspNetCore.Mvc.NewtonsoftJson?

Mati Marecki
Była to jedna z pierwszych solucji w google. Nie rozumiem, czemu intellisense mi pokazuje, żeby instalować paczke Microsoft.AspNet.Mvc. Tu jest problem ale jaki, skąd nie wiem. Psycha mi siada, robie przerwe i lece znowu od 0.
Mati Marecki
Tzn JsonRequestBehavior.
JP
  • Rejestracja:ponad 7 lat
  • Ostatnio:4 miesiące
  • Postów:1065
1

Upewnij się, że masz newtonsoft dla , AspNetCore, CORE. Moze podpowiada Ci mvc bo masz ten pakiet dla mvc.

Mati Marecki
  • Rejestracja:ponad 4 lata
  • Ostatnio:prawie 2 lata
  • Postów:31
1

Udało się! Tera potrzebuje speca od jQuery. Niech mi wyjaśni jedno:
dlaczego działa to:

Kopiuj
document.getElementById("gameName").innerHTML = data.Name;

a to nie:

Kopiuj
 $("gameName").text(data.Name)

?

Mam więcej pytań, otóż rozumiem, że można te AJAX Calle robić bez jQuery?
Nie jestem tak zielony, tak wiem, że są biblioteczki? typu Axios itd. ale czemu wszystkie posty, nawet sprzed roku ludzie używają dalej AJAX jQuery?

Otóż, przeczytałem, że JsonRequestBehavior.AllowGet() jest derpicated,
pewno dlatego sugerują stare biblioteki i sprawia problemy.
znalazłem taki sposób:

Kopiuj
public JsonResult GetGameById(int id)
        {
            var game = _context.Game.FirstOrDefault(g => g.GameId == id);

            var gameSerialized = JsonConvert.SerializeObject(game);

           
            return Json(gameSerialized, new JsonSerializerSettings());
        }

i View:

Kopiuj
<h2>Game Name:</h2><h2 id="gameName">Have to be updated</h2>
<br />
<input type="button" onclick="BtnClick(1)" value="click me" />

Tylko szkoda, że nie znalazłem dokumentacji na temat AJAX jQuery w MVC.
Póki co rozumiem to, że pobieram coś z bazy danych, następnie JsonConvert serializuje z bazy danych do formatu Json, dalej zwracam obiekt JSON z ustawieniami jakie posiadam (JsonSerializerSettings) a w JS po stronie klienta, po zwróceniu obiektu parsuje z JSON na Vanilla/Raw JS.

Cięzki dzień, w dodatku wolny. Powiedzmy, że czegoś się nauczyłem.
Fajnie, jakby ktoś coś od siebie dorzucił w tym temacie, mając doświadczenie. Co? Nie wiem.

edytowany 4x, ostatnio: Mati Marecki
JP
Jak Ci się udało to napisz co było źle. Może komuś się przyda.
Mati Marecki
"Otóż, przeczytałem, że JsonRequestBehavior.AllowGet() jest derpicated, pewno dlatego sugerują stare biblioteki i sprawia problemy."
JP
  • Rejestracja:ponad 7 lat
  • Ostatnio:4 miesiące
  • Postów:1065
0
  1. Używaj debugera i narzędzi programistycznych w przeglądarce.
  2. Dla ajaxa nie ma znaczenia czy to mvc czy cokolwiek. Leci coś po http i coś przychodzi a rezultat to nie musi być json A np int albo string. Na Twoje błędy żadna dokumentacja nie pomoże.
  3. A $("gameName").innerHtml = data.Name działa?

Ogólnie to dość stara technologia. Solidne podstawy warto mieć ale są fajniejsze rzeczy. Jakieś Reacty, Blazory, Fluttery itp.

Mati Marecki
  • Rejestracja:ponad 4 lata
  • Ostatnio:prawie 2 lata
  • Postów:31
0

Nadejdzie czas na potężnego Blazora, ale, póki co chce porobić w tym MVC i RazorPages.
Nic i tak nie ucieknie a sporo myślę w tym Blazorze się przyda.
I tak chce siedzieć i ogarnąć cały back-end ale jest taka masa rzeczy, które mnie po prostu omija i nawet czytając całe dokumentacje nie dochodze do tych rzeczy i nie wiem skąd one się biorą. F12 w VStudio tera katuje zawsze i czytam, ile się da.
Robienie całej aplikacji w .NET - średnio mi się podoba, nie powiem. Cały back-end w .NET i front w czymś innym? Już dużo bardziej, ale póki co robiłem tylko bardzo proste aplikacje.
React fajny, ale mnie troche przytłoczył z tym reduxem. Raz wydaje mi się bardzo łatwe ale zaraz znowu wielki problem z tym miałem :). Celuje w Blazor i tego następce Xamarina jeśli chodzi o fronta a i jeszcze bardzo dluga droga w tym back-endzie.

JP
  • Rejestracja:ponad 7 lat
  • Ostatnio:4 miesiące
  • Postów:1065
1

Hmm. Przyznaje, że nie dawało mi to spokoju bo metoda, która jest deprecated nie powinno powodować aż takich problemów.
Sprawdziłem i jestem na 99% pewny, że utworzyłeś projekt ** asp.net core mvc** i wkleiłeś bez zastanowienia jakiś przykładowy kod z projektu asp.net mvc..
Przestrzeń nazw System.Web.Mvc.* chyba nawet nie powinna istnieć w projekcie Net Core bo to jest pakiet dla starego .Net Framework 4.* co pokazuje się nawet pod żółtą ikoną z odpowiednim komunikatem w Solution Explorer.
Więc chyba jednak się niczego nie nauczyłeś.

Jeśli szukasz przykładów to zwracaj uwagę czy to jest dla .net Core albo .NET 5.0.

Mati Marecki
Nie prawda, nic nie przeklejałem. Zresztą chyba co ja miałem przeklejać xd => zrobiłem klasę/model Game => scaffolder toolem reszte tzn baza danych, CRUD Controller i View do tego controllera. Potem działałem tylko i wyłącznie w kontrolerze no i ten skrawek w View=>Game=>Index bo jakoś ten response od tego Ajaxa musiałem sprawdzić. Za każdym razem, sugeruje mi tak samo Intellisense tak jak pisałem.
SO
@jacek.placek: ale to nie metoda jest deprecated (tym bardziej że JsonRequestBehavior to enum :P). Z tego co ja widzę to po prostu nie istnieje w ASP.NET Core
JP
@some_ONE: No tak, dlatego napisałem o podejrzeniach o kopiowaniu przykładu z asp.net mvc z .net 4.x
Mati Marecki
  • Rejestracja:ponad 4 lata
  • Ostatnio:prawie 2 lata
  • Postów:31
0

Masz jeszcze raz, w nowym projekcie screenshot-20210506123710.png
screenshot-20210506123738.png

edytowany 1x, ostatnio: Mati Marecki
SO
  • Rejestracja:ponad 10 lat
  • Ostatnio:około rok
1

A skąd przekleiłeś fragment z JsonRequestBehavior? Domyślnie metoda Json, której używasz do zwracania nie przyjmuje tego parametru.

Mati Marecki
  • Rejestracja:ponad 4 lata
  • Ostatnio:prawie 2 lata
  • Postów:31
0

Dobra z czaiłem o co wam chodzi, macie racje.

To podbije pytanie, czy da się normalnie zwracać rekord z bazy z related data i zwrócić jako Json?
Przkładowo:

screenshot-20210506125259.png

Mati Marecki
tam jest TYPO publisher2 powinno być publisher, wiem.
JP
  • Rejestracja:ponad 7 lat
  • Ostatnio:4 miesiące
  • Postów:1065
1

Da się ale powinieneś napisać własne klasy do przesyłania danych

Kopiuj
public class PublisherDTO
{
 ...
 public List<GameDTO> Games{get;set;}
}

public class GameDTO
{
...
}

Pobrać dane z bazy, zmapować na *DTO i te dane wysłać. Wtedy masz kontrolę nad tym co się wysyła.

Kliknij, aby dodać treść...

Pomoc 1.18.8

Typografia

Edytor obsługuje składnie Markdown, w której pojedynczy akcent *kursywa* oraz _kursywa_ to pochylenie. Z kolei podwójny akcent **pogrubienie** oraz __pogrubienie__ to pogrubienie. Dodanie znaczników ~~strike~~ to przekreślenie.

Możesz dodać formatowanie komendami , , oraz .

Ponieważ dekoracja podkreślenia jest przeznaczona na linki, markdown nie zawiera specjalnej składni dla podkreślenia. Dlatego by dodać podkreślenie, użyj <u>underline</u>.

Komendy formatujące reagują na skróty klawiszowe: Ctrl+B, Ctrl+I, Ctrl+U oraz Ctrl+S.

Linki

By dodać link w edytorze użyj komendy lub użyj składni [title](link). URL umieszczony w linku lub nawet URL umieszczony bezpośrednio w tekście będzie aktywny i klikalny.

Jeżeli chcesz, możesz samodzielnie dodać link: <a href="link">title</a>.

Wewnętrzne odnośniki

Możesz umieścić odnośnik do wewnętrznej podstrony, używając następującej składni: [[Delphi/Kompendium]] lub [[Delphi/Kompendium|kliknij, aby przejść do kompendium]]. Odnośniki mogą prowadzić do Forum 4programmers.net lub np. do Kompendium.

Wspomnienia użytkowników

By wspomnieć użytkownika forum, wpisz w formularzu znak @. Zobaczysz okienko samouzupełniające nazwy użytkowników. Samouzupełnienie dobierze odpowiedni format wspomnienia, zależnie od tego czy w nazwie użytkownika znajduje się spacja.

Znaczniki HTML

Dozwolone jest używanie niektórych znaczników HTML: <a>, <b>, <i>, <kbd>, <del>, <strong>, <dfn>, <pre>, <blockquote>, <hr/>, <sub>, <sup> oraz <img/>.

Skróty klawiszowe

Dodaj kombinację klawiszy komendą notacji klawiszy lub skrótem klawiszowym Alt+K.

Reprezentuj kombinacje klawiszowe używając taga <kbd>. Oddziel od siebie klawisze znakiem plus, np <kbd>Alt+Tab</kbd>.

Indeks górny oraz dolny

Przykład: wpisując H<sub>2</sub>O i m<sup>2</sup> otrzymasz: H2O i m2.

Składnia Tex

By precyzyjnie wyrazić działanie matematyczne, użyj składni Tex.

<tex>arcctg(x) = argtan(\frac{1}{x}) = arcsin(\frac{1}{\sqrt{1+x^2}})</tex>

Kod źródłowy

Krótkie fragmenty kodu

Wszelkie jednolinijkowe instrukcje języka programowania powinny być zawarte pomiędzy obróconymi apostrofami: `kod instrukcji` lub ``console.log(`string`);``.

Kod wielolinijkowy

Dodaj fragment kodu komendą . Fragmenty kodu zajmujące całą lub więcej linijek powinny być umieszczone w wielolinijkowym fragmencie kodu. Znaczniki ``` lub ~~~ umożliwiają kolorowanie różnych języków programowania. Możemy nadać nazwę języka programowania używając auto-uzupełnienia, kod został pokolorowany używając konkretnych ustawień kolorowania składni:

```javascript
document.write('Hello World');
```

Możesz zaznaczyć również już wklejony kod w edytorze, i użyć komendy  by zamienić go w kod. Użyj kombinacji Ctrl+`, by dodać fragment kodu bez oznaczników języka.

Tabelki

Dodaj przykładową tabelkę używając komendy . Przykładowa tabelka składa się z dwóch kolumn, nagłówka i jednego wiersza.

Wygeneruj tabelkę na podstawie szablonu. Oddziel komórki separatorem ; lub |, a następnie zaznacz szablonu.

nazwisko;dziedzina;odkrycie
Pitagoras;mathematics;Pythagorean Theorem
Albert Einstein;physics;General Relativity
Marie Curie, Pierre Curie;chemistry;Radium, Polonium

Użyj komendy by zamienić zaznaczony szablon na tabelkę Markdown.

Lista uporządkowana i nieuporządkowana

Możliwe jest tworzenie listy numerowanych oraz wypunktowanych. Wystarczy, że pierwszym znakiem linii będzie * lub - dla listy nieuporządkowanej oraz 1. dla listy uporządkowanej.

Użyj komendy by dodać listę uporządkowaną.

1. Lista numerowana
2. Lista numerowana

Użyj komendy by dodać listę nieuporządkowaną.

* Lista wypunktowana
* Lista wypunktowana
** Lista wypunktowana (drugi poziom)

Składnia Markdown

Edytor obsługuje składnię Markdown, która składa się ze znaków specjalnych. Dostępne komendy, jak formatowanie , dodanie tabelki lub fragmentu kodu są w pewnym sensie świadome otaczającej jej składni, i postarają się unikać uszkodzenia jej.

Dla przykładu, używając tylko dostępnych komend, nie możemy dodać formatowania pogrubienia do kodu wielolinijkowego, albo dodać listy do tabelki - mogłoby to doprowadzić do uszkodzenia składni.

W pewnych odosobnionych przypadkach brak nowej linii przed elementami markdown również mógłby uszkodzić składnie, dlatego edytor dodaje brakujące nowe linie. Dla przykładu, dodanie formatowania pochylenia zaraz po tabelce, mogłoby zostać błędne zinterpretowane, więc edytor doda oddzielającą nową linię pomiędzy tabelką, a pochyleniem.

Skróty klawiszowe

Skróty formatujące, kiedy w edytorze znajduje się pojedynczy kursor, wstawiają sformatowany tekst przykładowy. Jeśli w edytorze znajduje się zaznaczenie (słowo, linijka, paragraf), wtedy zaznaczenie zostaje sformatowane.

  • Ctrl+B - dodaj pogrubienie lub pogrub zaznaczenie
  • Ctrl+I - dodaj pochylenie lub pochyl zaznaczenie
  • Ctrl+U - dodaj podkreślenie lub podkreśl zaznaczenie
  • Ctrl+S - dodaj przekreślenie lub przekreśl zaznaczenie

Notacja Klawiszy

  • Alt+K - dodaj notację klawiszy

Fragment kodu bez oznacznika

  • Alt+C - dodaj pusty fragment kodu

Skróty operujące na kodzie i linijkach:

  • Alt+L - zaznaczenie całej linii
  • Alt+, Alt+ - przeniesienie linijki w której znajduje się kursor w górę/dół.
  • Tab/⌘+] - dodaj wcięcie (wcięcie w prawo)
  • Shit+Tab/⌘+[ - usunięcie wcięcia (wycięcie w lewo)

Dodawanie postów:

  • Ctrl+Enter - dodaj post
  • ⌘+Enter - dodaj post (MacOS)