Reload partial view using ajax

Question

I tried to reload a partial view using ajax and jquery like this

$.ajax({
                type: "Get",
                async: false,
                url: "http://localhost:31569/api/Event/Get/" + eventId,

                success: function (data) {

                    console.log(data);

                    var ladate = data.eventDate.split('T')[0];
                    var an = ladate.split('-')[0];
                    var month_converted = Global.ConvertToMonth(ladate.split('-')[1]);
                    var day = ladate.split('-')[2];
                    var finaldate = day + " " + month_converted + " " + an;

                    $("#detailId").val(data.id);
                    $("#detailEventTitle").val(data.eventTitle);
                    $("#detailLieu").val(data.lieu);
                    $("#DetailEventDate").val(finaldate);
                    $("#detailDescription").val(data.description);
                    $("#detailNbParticipant").val(data.nbParticipant);
                    $("#detailNbParticipantActuel").val(data.nbParticipantActuel);
                    $("#detailLogo").val(data.logo);

                    $("#divLogo").empty();
                    $("#divLogo").append(' <img id="imgLogo" src="@Html.Action("Image","Event", new { byteArray = Model.Logo })" />');

                },
                error: function (xhr, status, error) { 
                    window.location = "/";
                }
            });

The problem is in this line

 $("#divLogo").append(' <img id="imgLogo" src="@Html.Action("Image","Event", new { byteArray = Model.Logo })" />');

the action is not called and I get as result

Html

<img id="imgLogo" src="@Html.Action(" image","event",="" new="" {="" bytearray="Model.Logo" })"="">

Javascript Error

@Html.Action(:1 GET http://localhost:31569/@Html.Action( 404 (Not Found)

So I need to know

What is the reason of this problem?
How can I fix it?

so that's your problem. You need to put the razor into your .cshtml (where it can run) then read the result of this, clientside, from this. Drop it into a hidden variable or a data- attribute then use it from there — Liam, Jun 15 '16 at 14:12
@Liam please can you more explain your solution (as an aswer) — Lamloumi Afif, Jun 15 '16 at 14:22

score 1 · Accepted Answer · edited May 23 '17 at 12:08

Your issue is you can't run Razor in the .js file. .js files are client side only and have no server side element. The only place you can put Razor is in the .cshtml file. So you'll need to take the result of the Razor code running on the server and put it somewhere where the js can read it.

I prefer to use data- attribute for this. You haven't put your full HTML so I'll have to use a bit of creative license here but, briefly do something like this:

<div id="somethingThatYouCanFind" 
              data-imgsrc="@Html.Action(" image","event",="" new="" {="" bytearray="Model.Logo" })">
    <img id="imgLogo" src="@Html.Action(" image","event",="" new="" {="" bytearray="Model.Logo" })"="">
</div>

You can alter your js to somehting like below:

var imgUrl = $('#somethingThatYouCanFind').data('imgsrc');
$.ajax({
                type: "Get",
                async: false,
                url: "http://localhost:31569/api/Event/Get/" + eventId,

                success: function (data) {

                    console.log(data);

                    var ladate = data.eventDate.split('T')[0];
                    var an = ladate.split('-')[0];
                    var month_converted = Global.ConvertToMonth(ladate.split('-')[1]);
                    var day = ladate.split('-')[2];
                    var finaldate = day + " " + month_converted + " " + an;

                    $("#detailId").val(data.id);
                    $("#detailEventTitle").val(data.eventTitle);
                    $("#detailLieu").val(data.lieu);
                    $("#DetailEventDate").val(finaldate);
                    $("#detailDescription").val(data.description);
                    $("#detailNbParticipant").val(data.nbParticipant);
                    $("#detailNbParticipantActuel").val(data.nbParticipantActuel);
                    $("#detailLogo").val(data.logo);

                    $("#divLogo").empty();
                    $("#divLogo").append(' <img id="imgLogo" src="'+imgUrl +'" />');

                },
                error: function (xhr, status, error) { 
                    window.location = "/";
                }
            });

I've left your Razor code as is, but it seems a bit odd?

@Html.Action(" image","event",="" new="" {="" bytearray="Model.Logo" })

I suppose so long as it produces what you want it to??

As well you should read What does “async: false” do in jQuery.ajax()?. Basically don't do this.

Reload partial view using ajax

1 Answers1