Question

我在方法中有一个动态创建的动作按钮。我已经为按钮分配了一个ID，但是单击按钮时需要打开一个模式。然后，我需要将按钮ID传递给模式，以便检索数据。如何在此方法中打开模态？

private static List<Details> LoadData()
{
    List<Details> infoObjs = new List<Details>();

    using (SqlConnection con = new SqlConnection(cs))
    {
        // ...
        con.Open();
        SqlDataReader rdr = cmd.ExecuteReader();
        while (rdr.Read())
        {
            Details infoObj = new Details();
            infoObj.CommentsID = rdr["COMMENT_ID"].ToString();
            infoObj.Comments = rdr["COMMENT"].ToString();
            infoObj.Status = rdr["STATUS"].ToString();
            infoObj.Date = rdr["DATE"].ToString();
            infoObj.Action = "<a class='btn btn-warning' ID=" + infoObj.CommentsID + 
                "> <i class=\"fas fa-pencil-alt\" aria-hidden=\"true\"></i></a>";
            //This button needs to open a modal.
            infoObjs.Add(infoObj);
        }
    }

    return infoObjs;
}

Answer 1

如果您使用的是jQuery。

private static List<Details> LoadData()
{
    List<Details> infoObjs = new List<Details>();

    using (SqlConnection con = new SqlConnection(cs))
    {
        // ...
        con.Open();
        SqlDataReader rdr = cmd.ExecuteReader();
        while (rdr.Read())
        {
            Details infoObj = new Details();
            infoObj.CommentsID = rdr["COMMENT_ID"].ToString();
            infoObj.Comments = rdr["COMMENT"].ToString();
            infoObj.Status = rdr["STATUS"].ToString();
            infoObj.Date = rdr["DATE"].ToString();
            infoObj.Action = "<a class='btn btn-warning' data-id=" + infoObj.CommentsID + " ID=" + infoObj.CommentsID + 
                "> <i class=\"fas fa-pencil-alt\" aria-hidden=\"true\"></i></a>";
            //This button needs to open a modal.
            infoObjs.Add(infoObj);
        }
    }

    return infoObjs;
}

创建一个父div，您将在其中附加Action属性。

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

假设这是由ajax请求返回的。

$.ajax({
  url: "RequestHandler.asmx/LoadData",
  type: "GET",
  dataType: 'json',
  success: function (response) {
        $.each(response.d, function (i, obj){
           $("div#id").append("<div>" + obj.Action + "</div>"); 
        });   
  }
});

此后，您可以调用一个函数，该函数将在单击该锚点时绑定所有事件，您可以通过data属性获取ID。

function setEvents() {
  $.each($("div#id").find("a.btn.btn-warning"), function(i, obj) {
    $(this).on("click", function (e){
       e.preventDefault();
       $("#modal").modal("toggle");
       $("#modalID").val($(this).data('id')); // this is a hidden field for the id in the modal
    });
  });
}

然后您可以在服务器中再次请求，然后从隐藏字段中传递ID。

通过动态创建的按钮打开模式

1 个答案: