我如何执行一个Ajax模态弹出基于"数据"财产

本文关键字：quot 财产 数据 Ajax 何执行 执行 一个 模态 | 更新日期: 2023-09-27 18:16:30

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

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

我目前使用JQM模态框(如果有人知道更好的东西，很高兴切换)。

下面的代码可以很好地使所有.ajaxpopup项启动同一个页面:

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

然而，我需要每个项目启动一个不同的页面(1/2…我事先不知道ID)。

我真的很喜欢Adam关于在元素中添加data-itemid标签的回答，但是，我似乎真的不能使这个工作。

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

我最接近的是:

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

我也用alert(itemId)代替了对话行，这是给出正确的结果，所以，我知道我沿着正确的道路走-我似乎无法完成这项工作!

有人能帮忙吗?

我如何执行一个Ajax模态弹出基于"数据"财产

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

如果我理解你的特殊情况，你希望这些文本节点，当点击时，启动jqm模态?你想让模型的itemId成为它的一部分吗?

首先，通过data属性将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
});

为什么不在控制器上创建一个JsonResult提供Action，它将提供您需要的项目列表?一旦这一切就绪，我将遍历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);
});​
相关文章：