Question

我尝试使用像这样的ajax和jquery重新加载局部视图

$.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 = "/";
                }
            });

问题出在这一行

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

未调用该操作，我得到结果

HTML

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

Javascript错误

@ Html.Action（：1 GET http://localhost:31569/@Html.Action（404（未找到）

所以我需要知道

这个问题的原因是什么？
我该如何解决？

Answer 1

您的问题是您无法在.js文件中运行Razor。 .js文件只是客户端，没有服务器端元素。你可以放Razor的唯一地方是.cshtml文件。所以你需要在服务器上运行Razor代码的结果并把它放在js可以读取的地方。

我更喜欢使用data-属性。你没有放完整个HTML，所以我必须在这里使用一些创意许可，但是，简单地做一些喜欢这个：

<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>

您可以将您的js改为如下所示：

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 = "/";
                }
            });

我按原样保留了你的Razor代码，但似乎有点奇怪？

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

我想只要它能产生你想要的东西？

同样你应该阅读What does “async: false” do in jQuery.ajax()?。基本上不要这样做。

使用ajax重新加载部分视图

1 个答案: