使用 AJAX 渲染 ASP.NET 部分视图不起作用

Question

我正在开发一个 ASP.NET MVC Web 应用程序。 在剃须刀（cshtml）网页中，我编写了以下超链接：

<a href="#"  onclick="openStudentsRequestsDetail('@Url.Action("StudentRequestsDetail")', @item.RequestId , @item.EsameEstStudente.Id  );" style="display: block; font-size: 10px">@Recognition.Views.Students.Localization.Requests.CorrispondenceNotAutomatic</a>

正确引用了 javascript 文件并包含以下代码：

var DETAIL_STUDENT_REQUESTS_SELECTOR = "#lookup_student_requests_detail";

$(document).ready(function () {
   // Set ad_lookup_detail as dialog
   recognitionDialog(DETAIL_STUDENT_REQUESTS_SELECTOR);
   registerAjaxTooltip(DETAIL_STUDENT_REQUESTS_SELECTOR);
});

function openStudentsRequestsDetail(controllerActionURL, RequestId , EsameEstId) {


   showLoading();

   getStudentRequestsDetail(controllerActionURL, RequestId, EsameEstId);

}

function closeStudentsRequestsLookup() {
   $(DETAIL_STUDENT_REQUESTS_SELECTOR).dialog('close');
}


function getStudentRequestsDetail(controllerActionURL, pRequestId, pEsameEstId)
{

    ajaxPost(controllerActionURL, { EsameEstStudenteId: pEsameEstId, RichiestaAutorizzId: pRequestId }, function (data)
    {

    $(DETAIL_STUDENT_REQUESTS_SELECTOR).html(data);
    hideLoading();
    openDialog(DETAIL_STUDENT_REQUESTS_SELECTOR,true;

    }, null);

}

我在一行中放了一个断点

$(DETAIL_STUDENT_REQUESTS_SELECTOR).html(data)

并且数据包含正确的 HTML 代码。

选择器在部分视图中用作 div id，代码如下：

@model IEnumerable<Recognition.ViewModels.StudentRequestsViewModel>

<table class="age-table">
    <!--   Table header   -->
    <thead style="font-size: small;">
        <tr>

            <th>
                @Recognition.Views.Students.Localization.Requests.Status
            </th>
            <th>
                @Recognition.Views.Students.Localization.Requests.ForeignExam
            </th>
            <th>
                @Recognition.Views.Students.Localization.Requests.ItalianExam
            </th>
            <th>
                @Recognition.Views.Students.Localization.Requests.Ssd
            </th>
            <th>
                @Recognition.Views.Students.Localization.Requests.RatreExt
            </th>
            <th>
                @Recognition.Views.Students.Localization.Requests.RateBocconi
            </th>
            <th style="width: 25%;">
                @Recognition.Views.Students.Localization.Requests.Validity
            </th>
        </tr>

    </thead>

    <!-- End Table header -->
    <!--   Table Content   -->
    @foreach (var item in Model)
    {

        <tr id="stu_exam_@item.EsameEstStudente.Id">


            @if (item.EsameEstStudente.AutorizzEsameEst != null)
            {



                <td data-sort-value="@item.EsameEstStudente.AutorizzEsameEst.Stato">
                    @Html.DisplayFor(a => item.EsameEstStudente.AutorizzEsameEst.StatoEnum)
                    @if (item.EsameEstStudente.AutorizzEsameEst.AutorizzAutomatica == 0)
                    {
                        <a href="#" onclick="openStudentsRequestsDetail('@Url.Action("StudentRequestsDetail")', @item.RequestId , @item.EsameEstStudente.Id  );" style="display: block; font-size: 10px">@Recognition.Views.Students.Localization.Requests.CorrispondenceNotAutomatic</a>
                    }
                </td>
                <td>@Html.DisplayFor(a => item.EsameEstStudente.EsameEstero.Descrizione)</td>
                if (item.EsameEstStudente.AutorizzEsameEst.AD_COD != null && item.EsameEstStudente.AutorizzEsameEst.AA_OFF_ID.HasValue)
                {
                    <td>
                        [@Html.DisplayFor(a => item.EsameEstStudente.AutorizzEsameEst.AD_COD)]
                        @Html.DisplayFor(a => item.AdName)
                        <span style="display: block; color: gray;">(@GlobalResources.Teacher @Html.DisplayFor(a => item.EsameEstStudente.AutorizzEsameEst.V_ESSE3_DOCENTI.COGNOME))</span>

                    </td>
                    <td>@Html.DisplayFor(a => item.SSD)</td>
                    <td>@Html.DisplayFor(a => item.EsameEstStudente.VotoEst)</td>
                    <td>@Html.DisplayFor(a => item.EsameEstStudente.VotoIta)</td>
                }
                else
                {
                    <td>
                        @Recognition.Views.Students.Localization.Requests.WithoutCorrispondence.ToUpper()
                        <span style="display: block; color: gray;">(@GlobalResources.RespCDS @Html.DisplayFor(a => item.EsameEstStudente.AutorizzEsameEst.V_ESSE3_CARICHE.COGNOME))</span>
                    </td>
                    <td>@Html.DisplayFor(a => item.EsameEstStudente.AutorizzEsameEst.SettoreNoCorrisp)</td>
                    <td>@Html.DisplayFor(a => item.EsameEstStudente.VotoEst)</td>
                    <td>@Html.DisplayFor(a => item.EsameEstStudente.VotoIta)</td>
                }

                <td>@Html.DisplayWithFallback(a => string.Format("{0}/{1}", item.EsameEstStudente.AutorizzEsameEst.AnnoInizioValid + (item.EsameEstStudente.AutorizzEsameEst.Durata - 1), item.EsameEstStudente.AutorizzEsameEst.AnnoInizioValid + (item.EsameEstStudente.AutorizzEsameEst.Durata - 1) + 1), fallback: "", compareTo: "/")</td>
            }
            else
            {
                <td data-sort-value="-1"></td>
                <td></td>
                <td>@Html.DisplayFor(a => item.EsameEstStudente.EsameEstero.Descrizione)</td>
                <td></td>
            }

        </tr>

    }
    <!-- End Table Content -->
</table>

<div id="lookup_student_requests_detail"></div>

但是页面没有显示出来。

你能帮帮我吗？

谢谢， 西蒙娜

Answer 1

我解决了更改 javascript 文件的问题，如下所示：

var DETAIL_STUDENT_REQUESTS_SELECTOR = "#lookup_student_requests_detail";

var opt = {
  autoOpen: false,
  modal: true,
  width: 600,
  height: 300
};

$(document).ready(function () {
  // Set ad_lookup_detail as dialog
  recognitionDialog(DETAIL_STUDENT_REQUESTS_SELECTOR);
registerAjaxTooltip(DETAIL_STUDENT_REQUESTS_SELECTOR);
});

function openStudentsRequestsDetail(controllerActionURL, RequestId , EsameEstId) {


    showLoading();

    getStudentRequestsDetail(controllerActionURL, RequestId, EsameEstId);

}

function closeStudentsRequestsLookup() {
  $(DETAIL_STUDENT_REQUESTS_SELECTOR).dialog('close');
}


function getStudentRequestsDetail(controllerActionURL, pRequestId, pEsameEstId)
{

    ajaxPost(controllerActionURL, { EsameEstStudenteId: pEsameEstId, RichiestaAutorizzId: pRequestId }, function (data)
    {

    $(DETAIL_STUDENT_REQUESTS_SELECTOR).html(data);
    hideLoading();


   openDialogDetail(DETAIL_STUDENT_REQUESTS_SELECTOR);

    }, null);

}

function openDialogDetail(selector) {

   $(selector).dialog(opt).dialog("open");


}

Answer 2

容器“#lookup_student_requests_detail”是否放置在局部视图中？如果是，那么您需要将其移至以下代码下方

<a href="#"  onclick="openStudentsRequestsDetail('@Url.Action("StudentRequestsDetail")', @item.RequestId , @item.EsameEstStudente.Id  );" style="display: block; font-size: 10px">@Recognition.Views.Students.Localization.Requests.CorrispondenceNotAutomatic</a>