FINÁLNÍ VÝPRODEJ KREDITŮ na ITnetwork je tady. Využij poslední šanci a získej až 80 % extra kreditů ZDARMA na náš interaktivní e-learning. Zjisti více:
NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
Avatar
Michal Pflegshörl
Člen
Avatar
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
Avatar
Michal Pflegshörl
Člen
Avatar
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
Avatar
Michal Pflegshörl
Člen
Avatar
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
 
Nahoru Odpovědět
13.11.2020 12:46
Avatar
Patrik Řepa
Člen
Avatar
Odpovídá na Michal Pflegshörl
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č
Řešení problému
 
Nahoru Odpovědět
13.11.2020 19:16
Avatar
Michal Pflegshörl
Člen
Avatar
Odpovídá na Patrik Řepa
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
Avatar
Tadeáš Burda
Člen
Avatar
Odpovídá na Michal Pflegshörl
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
 
Nahoru Odpovědět
16.11.2020 10:15
Avatar
Michal Pflegshörl
Člen
Avatar
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
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.