如何基于“data-”属性执行 Ajax 模态弹出窗口？答案

【问题标题】：How do I perform an Ajax Modal Popup based on a "data-" property?如何基于“data-”属性执行 Ajax 模态弹出窗口？
【发布时间】：2011-12-03 23:28:31
【问题描述】：

基本上，我有一个动态创建的列表，我事先不知道会有多少项目。

我需要每个人在点击时启动一个稍微不同的 Ajax 函数。

我目前正在将 JQM 用于模态框（如果有人知道更好的东西，很乐意切换）。

以下代码适用于使所有 .ajaxpopup 项目启动同一页面：

  $().ready(function () {
            $('#dialog').jqm({ ajax: "/QuestionManager/AjaxPopup/1", trigger: ".ajaxpopup" });

            $(".ajaxpopup").click(function (e) {
                e.preventDefault();
            });

但是，我需要每个项目启动一个不同的页面（1/2...我不知道事先的 ID）。

我真的很喜欢亚当关于向元素添加 data-itemid 标记的回答，但是，我似乎无法真正做到这一点。

我不知道这是 JQM 限制还是由于它的启动方式。

我最接近的是：

$(document).on("click", "a", function () {
        var itemId = $(this).data("itemid");

        $('#dialog').jqm({ ajax: "/QuestionManager/AjaxPopup/"+itemId, trigger: ".ajaxpopup" });
    });

我还用alert(itemId) 替换了对话框行，这给出了正确的结果，所以，我知道我走在正确的道路上 - 我似乎无法完成这件事！

谁能帮忙？

【问题讨论】：

标签： c# javascript jquery asp.net-mvc-3 razor

【解决方案1】：

您可以通过 jQuery 的 live 和 on 函数连接动态添加的内容以响应事件。

所以，如果我了解您的特殊情况，您希望这些文本节点在单击时启动 jqm 模式？并且您希望您的模型的 itemId 成为其中的一部分？

首先，通过数据属性将 itemId 添加到您的文本中：

@foreach (var item in Model.Routines)
{
    <text data-itemid='@item.itemId'></text>
} //(sorry if the razor syntax is off a bit - that's not my expertise

然后：

$(document).on("click", "text", function() { 
    var itemId = $(this).data("itemid");
    var textnodeText = $(this).text();
    $('#dialog').jqm({ ajax: "/QuestionManager/_AjaxCreateQuestionInitial/" + textnodeText, 
                       trigger: itemId });
});

编辑

根据您的评论，如果您有此 html：

<a href="/test/AddData" data-itemid="1">Add Data</a>

你可以这样处理点击事件：

$(document).on("click", "a", function() {
    var itemId = $(this).data("itemid");
    //now run your ajax call
});

【讨论】：

根据示例，我需要创建一个 Ajax 模型框来启动其中包含 ID 的页面...我不认为您可以举一个实际这样做的示例过去一个小时我一直在尝试，但没有运气:(
@WilliamHilsum - 我想我现在了解您的要求 - 我的最后一次编辑是否符合您的要求？
看起来不错...我很高兴，因为我真的很想从中学习！...我现在正在尝试实施。 +1 表示感谢，如果有效，将标记为答案！
@WilliamHilsum - 甜蜜。祝你好运！
谢谢 - 我真的很感谢你的帮助，我想我知道这里发生了什么，最后一次更新让我更接近......触发器：需要是一个 ID 或类，所以，它是不附加。无论如何，在我的键盘上睡着了 - 我有一个关于如何解决这个问题的想法，并将在早上尝试。再次感谢您的帮助。

【解决方案2】：

为什么不在你的控制器上创建一个提供 Action 的 JsonResult，它会提供你需要的项目列表？一旦到位，我将遍历 JSON 数组并生成框。

假设您的数据是（一个示例 - 这需要由您的控制器生成）

var data = [ 
 {"Id": 1, "Name": "A"}, 
 {"Id": 2, "Name": "B"}, 
 {"Id": 3, "Name": "C"}
];

你的 javascript (jquery) 循环来处理你的盒子是

$.each(data, function(i, item) {
    //replace with your dialog code 
    alert(data[i].Id+" "+data[i].Name);
});

【讨论】：