Diskuze: ASP.NET MVC Změna obrázku v otevřeném View

V předchozím kvízu, Test znalostí C# .NET online, jsme si ověřili nabyté zkušenosti z kurzu.

Absolvováno

Označit lekci jako neabsolvovanou

Pokračovat ve výuce

Jak se ti líbí článek?

Před uložením hodnocení, popiš prosím autorovi, co je špatněZnaků 0 z 50-500

Jak se ti kurz líbí?

Tvé hodnocení kurzuZnaků 0 z 50-500

Aktivity

Michal Pflegshörl

Člen

Michal Pflegshörl:12.11.2020 11:28

Potřeboval bych z controleru změnit obrázek v otevřeném view bez znovunačtení celého view

Zkusil jsem: Umím změnit obrázek pomocí Ajaxu po stisknutí tlačítka.

Chci docílit: Potřebuji aby se po zobrazení view v controleru spustila akce na pozadí, která provede nějakou déle trvající akci na jejímž konci se v otevřeném view provede změna src konkrétního obrázku, bez znovunačtení celého view

Odpovědět

12.11.2020 11:28

Michal Pflegshörl

Člen

Michal Pflegshörl:13.11.2020 11:25

Už jsem na to příšel.
ve View

<img id="_Obrazek" src="@Url.Content("~/Obrazky/Web.png")" onload="ZmenObrazekZa5s()" />

<script>
        function ZmenObrazekZa5s()
        {
                $.ajax({
                        url: '@Url.Action("ZmenObrazek", "Test")',
                        data: { },
                        type: "post",
                        success: function (newurl)
                        {
                                $('#_Obrazek').attr('src', 'Url.Content(newurl)');
                        },
                        error: function ()
                        {
                                alert('error');
                        }
                });
        }
</script>

a v Controller

[HttpPost]
public ActionResult ZmenObrazek()
{
        System.Threading.Thread.Sleep(5000); //Simulace časově náročné operace
        return Json("~/Obrazky/Odskrtnuto.png");
}

Neví jestli je to úplně nejlepší řešení, ale funguje to :-P

Nahoru Odpovědět

13.11.2020 11:25

Michal Pflegshörl

Člen

Michal Pflegshörl:13.11.2020 12:46

Tak ještě oprava
ve View

<img id="_Obrazek" src="@Url.Content("~/Obrazky/Web.png")" onload="ZmenObrazekZa5s()" />

<script>
        function ZmenObrazekZa5s()
        {
                $.ajax({
                        url: '@Url.Action("ZmenObrazek", "Test")',
                        data: { },
                        type: "post",
                        success: function (newurl)
                        {
                                $('#_Obrazek').attr('src', newurl);
                        },
                        error: function ()
                        {
                                alert('error');
                        }
                });
        }
</script>

a v Controller

[HttpPost]
public ActionResult ZmenObrazek()
{
        System.Threading.Thread.Sleep(5000); //Simulace časově náročné operace
        return Json(Url.Content("~/Obrazky/Odskrtnuto.png"));
}

Bohužel jsem zjistil, že onload nefunguje při načtení stránky, ale pouze při změně src v případě <img>
Napadá někoho jak funkci na změnu obrázku spustit při otevření stránky?

Editováno 13.11.2020 12:47

Nahoru Odpovědět

13.11.2020 12:46

Patrik Řepa

Člen

Patrik Řepa:13.11.2020 19:16

Ahoj, zkus toto.

<img id="_Obrazek" src="@Url.Content("~/Obrazky/Web.png")" />

<script>
    $(document).ready(
        function(){
            $.ajax({
                url: '@Url.Action("ZmenObrazek", "Test")',
                data: { },
                type: "post",   //endpoint by mohl být typu GET pokud tam neposíláš data. Pokud se tak rozhodneš, tak změnit i endpoint na serveru na GET
                success: function (newurl)
                {
                    $('#_Obrazek').attr('src', newurl);
                },
                error: function ()
                {
                    alert('error');
                }
        });
    })
</script>

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

13.11.2020 19:16

Michal Pflegshörl

Člen

Michal Pflegshörl:16.11.2020 8:12

Tohle je to co potřebuji, bohužel to funguje pouze pokud ten script vložím do _Layout.cshtml.
Já bych to potřeboval spustit až při otevření konkrétního View.

Zjistil jsem, že to jde vyřešit takto, ale trošku se bojím zahlcení a nepřehlednosti v případě, že tam takových scriptů bude více.

@if (@ViewData["Title"] == "Test")
    {
        <script>
                $(document).ready(
                function(){
                    $.ajax({
                        url: '@Url.Action("ZmenObrazek", "Test")',
                        data: { },
                        type: "post",   //endpoint by mohl být typu GET pokud tam neposíláš data. Pokud se tak rozhodneš, tak změnit i endpoint na serveru na GET
                        success: function (newurl)
                        {
                            $('#_Obrazek').attr('src', newurl);
                        },
                        error: function ()
                        {
                            alert('error');
                        }
                });
            })
        </script>
    }

Nahoru Odpovědět

16.11.2020 8:12

Tadeáš Burda

Člen

Tadeáš Burda :16.11.2020 10:15

Proc testujes nazev teho vievu cez ViewData[Title]???? Vloz ten script rovno do Viewu a on sa nacita do Layoutu az sa ten VIew zobrazy....

@RenderSection("Scripts", required: false) // toto je v _Layout.cshtml

// toto je v ten Viewu
@section Scripts{
<script>
// tvuj script
</script>
}

Editováno 16.11.2020 10:16

Nahoru Odpovědět

16.11.2020 10:15

Michal Pflegshörl

Člen

Michal Pflegshörl:16.11.2020 12:32

Super, teď už to funguje přesně tak jak potřebuju.
Díky za pomoc ;-)

Nahoru Odpovědět

16.11.2020 12:32

Naučíme tě pracovat na home-office.

Zjistit více...

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 7 zpráv z 7.

Nejčastěji vyhledáváné

Diskuze: ASP.NET MVC Změna obrázku v otevřeném View