Question

在我的 ASP.NET MVC 5 应用程序中，我有Main View (Pharmacy.cshtml)呈现两个部分视图

搜索表单（_SearchFform.cshtml）
结果网格（Kend UI MVC包装器）_ResultsGrid.cshtml

在我的结果网格中，当我点击该操作链接我的页面被重定向时，我有一个使用Ajax.ActionLink的列。

要通过不显眼的和 jQuery验证参考进行测试，我在主视图上放置了一个Ajax.ActionLink以及2个部分视图。

当我点击主视图上的Ajax链接时，它将作为ajax工作，但网格中的动作链接不能作为ajax工作。

我认为这里的问题是网格数据是基于用户搜索条件加载的vial ajax调用，并且此数据是通过Ajax加载的，GRID中的标记未正确注册到DOM上，因此它无法识别<强大的>不引人注目的和 jQuery验证引用。

任何想法如何解决此问题

代码：

主视图（Pharmacy.cshtml）

<h2>@Html.Raw(ViewBag.Message)</h2>

@Html.Partial("_SearchPharmacy")

@Html.Partial("_PharmacyResults")   

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/bootstrap")
}

结果网格视图（_ResultsGrid.cshtml）

@model IEnumerable<ModelType>


@(Html.Kendo().Grid(Model)
    .Name("ResultsGrid")
    .Columns(columns =>
    {
 columns.Bound(p => p.PharmacyName);
  Ajax.ActionLink("Map", "GoogleMap", "Prescription", new { toAddress = "#= Address #" }, new AjaxOptions
         {
             OnSuccess = "ShowMapSuccessResponse"
         }, new { @class = "btn btn-default", id = "#= NCPDPID #" }).ToHtmlString()
           ).Title("");
    })
    .Events(ev => ev.DataBound("pxDataBound"))
    .Pageable()
    .Sortable()
        //.Scrollable()
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(5)
        .ServerOperation(false)
                    .Read(r => r.Action("action", "controller", new { }))
     )
)

//this is the test Ajax Link. This one works fine
@Ajax.ActionLink("Map", "GoogleMap", "Controller", new { toAddress = "70 Brown st. City 11001" }, new AjaxOptions
    {
        OnSuccess = "ShowMapSuccessResponse"
    }, new { @class = "btn btn-default", id = "myid" })

生成的锚标记标记

<a class="btnGoogleMap" data-ajax="true" data-ajax-success="ResponseFunction" href="/Controller/GoogleMap?toAddress="address" id="3110082">Map</a>

重要： 网格数据将使用jQuery调用填充。当用户点击搜索表单上的提交按钮时，我会执行event.preventDefault()并执行以下代码

pxGrid.dataSource.read($("#SearchForm").serializeFormToJSON());

更新发现问题，它是;在添加到网格的动态html上没有触发jquery事件。试过以下所有

$("a.btnGoogleMap").live("click", function () {
    e.preventDefault();
    alert("Goodbye!"); // jQuery 1.3+
});
$(document).delegate("a.btnGoogleMap", "click", function () {
    e.preventDefault();
    alert("Goodbye!"); // jQuery 1.4.3+
});
$(document).on("click", "a.btnGoogleMap", function () {
    e.preventDefault();
    alert("Goodbye!");  // jQuery 1.7+
});

$(document).on('click', '.btnGoogleMap', function (e) {
    e.preventDefault();
    alert("Goodbye!");  
});

但是，如果我在Google Chrome控制台上运行任何这些事件，然后点击“地图”按钮，那么它会按预期工作（点击事件将会触发）。

所以我想知道是否有办法在加载网格结果后将点击事件注册到DOM（动态标记）。

Answer 1

终于有了这个工作

$(document).on('click', '.btnGoogleMap', function (e) {
    e.preventDefault();
    //console.log(e);
    //console.log(e.toElement.href);
    $.get(e.toElement.href, {}, ShowMapSuccessResponse);
});

动态HTML中的Ajax.ActionLink无法作为Ajax调用

1 个答案: