Asp.net 将参数传递到jqueryui对话框

嗨，我需要将所选下拉列表值传递给jqueryui对话框，例如，当用户单击链接时， 如果使用用户选择product one并单击链接，则会弹出对话框，显示已选择的product 1，我可以显示该对话框：

<script>
    $(document).ready({
     $('a.login').click(function(){

        $( "#dialog:ui-dialog" ).dialog( "destroy" );

        $( "#product" ).dialog({
            height: 140,
            modal: true
        });
    });
    </script>

 <div class="login-homepage">
    <asp:DropDownList ID="DropDownList1" runat="server">
    <asp:ListItem Text="product1" Value="product1">Camera</asp:ListItem>
    <asp:ListItem Text="product2" Value="product2">DVD</asp:ListItem>
    <asp:ListItem Text="product3" Value="product3">LCD</asp:ListItem>
    </asp:DropDownList>
 <a href="#" id="login">login</a>
<div id="product" title="product-container">
    //show the selected dropdownlist
</div> 

$（文件）。准备好了吗({
$（'a.login'）。单击（函数（）{
$（“#dialog:ui dialog”）.dialog（“销毁”）；
$（“#产品”）。对话框({
身高：140，
莫代尔：对
});
});
//显示选定的下拉列表

问题是我不能 传递下拉列表的选定值，我尝试使用ajax json传递，由于缺乏知识，没有成功， 谁能帮助我或提供任何关于如何解决这个问题的建议

---

谢谢

无论是否显示，您的下拉列表都是页面的一部分。因此，您可以像处理任何下拉框一样对其进行操作。例如：

$(document).ready({

    $("a#login").click(function(e) {

        $("#dialog:ui-dialog").dialog("destroy");

        $("#product").dialog({

            height: 140,
            modal: true

        }).html($("#DropDownList1 option:selected").attr("Text"));

        e.preventDefault();

    });

});

如下所示设置值：

$("#DropDownList1").val("product2");

根据从下拉列表中选择的值，按如下方式填充

#product

的文本：

$("#product").text( $("#DropDownList1").val() );

---

无论是否显示，您的下拉列表都是页面的一部分。因此，您可以像处理任何下拉框一样对其进行操作。例如：

$(document).ready({

    $("a#login").click(function(e) {

        $("#dialog:ui-dialog").dialog("destroy");

        $("#product").dialog({

            height: 140,
            modal: true

        }).html($("#DropDownList1 option:selected").attr("Text"));

        e.preventDefault();

    });

});

如下所示设置值：

$("#DropDownList1").val("product2");

根据从下拉列表中选择的值，按如下方式填充

#product

的文本：

$("#product").text( $("#DropDownList1").val() );

您是否尝试过使用该方法？您可以执行以下操作：

$(document).ready({

    $("a#login").click(function(e) {

        $("#dialog:ui-dialog").dialog("destroy");

        $("#product").dialog({

            height: 140,
            modal: true

        }).html($("#DropDownList1 option:selected").attr("Text"));

        e.preventDefault();

    });

});

您尝试过使用该方法吗？您可以执行以下操作：

$(document).ready({

    $("a#login").click(function(e) {

        $("#dialog:ui-dialog").dialog("destroy");

        $("#product").dialog({

            height: 140,
            modal: true

        }).html($("#DropDownList1 option:selected").attr("Text"));

        e.preventDefault();

    });

});

---

由于您可以在同一页面上访问DOM，而无需Ajax

$(document).ready({
     $('a.login').click(function(){

        $( "#dialog:ui-dialog" ).dialog( "destroy" );
        $( "#product .product-info" ).html('You have selected product ' +  $("#DropDownList1").val() + ' from the list.');
        $( "#product" ).dialog({
            height: 140,
            modal: true
     });
});


<div id="product" title="product-container">
    <div class="product-info"></div>
</div> 

$（文档）。准备好了吗({
$（'a.login'）。单击（函数（）{
$（“#dialog:ui dialog”）.dialog（“销毁”）；
$（“#product.product info”）.html（'您已从列表中选择了产品'+$（“#DropDownList1”）.val（）+'）；
$（“#产品”）。对话框({
身高：140，
莫代尔：对
});
});

由于您的应用程序位于同一页面上，因此无需Ajax即可访问DOM

$(document).ready({
     $('a.login').click(function(){

        $( "#dialog:ui-dialog" ).dialog( "destroy" );
        $( "#product .product-info" ).html('You have selected product ' +  $("#DropDownList1").val() + ' from the list.');
        $( "#product" ).dialog({
            height: 140,
            modal: true
     });
});


<div id="product" title="product-container">
    <div class="product-info"></div>
</div> 

$（文档）。准备好了吗({
$（'a.login'）。单击（函数（）{
$（“#dialog:ui dialog”）.dialog（“销毁”）；
$（“#product.product info”）.html（'您已从列表中选择了产品'+$（“#DropDownList1”）.val（）+'）；
$（“#产品”）。对话框({
身高：140，
莫代尔：对
});
});

我猜您希望使用ajax将下拉列表中的选定值传递到另一个服务器页面，并获得响应并在对话框中显示。我将这样做

$(function(){

 $('a.login').click(function(){

     var selectedVal=$("#DropDownList1").val();
     var url="myserverpage.aspx?product="+selectedVal;

        var dialog = $("#dialog");
        if ($("#dialog").length == 0) {
            dialog = $('<div id="dialog" style="display:hidden"></div>').appendTo('body');
        }
        dialog.load(
            url,
            {}, // omit this param object to issue a GET request instead a POST request, otherwise you may provide post parameters within the object
            function (responseText, textStatus, XMLHttpRequest) {
                dialog.dialog({                       
                    close: function (event, ui) {                            
                        dialog.remove();
                    },
                    modal: true,
                    width: 460
                });
            }
        );
    }); 

});

$（函数（）{
$（'a.login'）。单击（函数（）{
var selectedVal=$（“#DropDownList1”）.val（）；
var url=“myserverpage.aspx？product=“+selectedVal；
变量对话框=$（“#对话框”）；
如果（$（“#对话框”）.length==0{
dialog=$（''）.appendTo（'body'）；
}
dialog.load(
网址，
{}，//省略此param对象以发出GET请求，而不是POST请求，否则您可能会在对象内提供POST参数
函数（responseText、textStatus、XMLHttpRequest）{
dialog.dialog（{
关闭：函数（事件，ui）{
dialog.remove（）；
},
莫代尔：是的，
宽度：460
});
}
);
}); 
});

在myserverpage.aspx中，读取querystring产品中的值，并返回要在对话框中显示给用户的相关HTML标记。如果将jQuery和jQuery UI正确加载到页面中，则该标记将起作用

---

脚本将动态地为弹出窗口本身创建一个div。您不需要为此添加一个页面。

我猜您希望使用ajax将下拉列表中的选定值传递到另一个服务器页面，并获得响应并在对话框中显示。我将这样做

$(function(){

 $('a.login').click(function(){

     var selectedVal=$("#DropDownList1").val();
     var url="myserverpage.aspx?product="+selectedVal;

        var dialog = $("#dialog");
        if ($("#dialog").length == 0) {
            dialog = $('<div id="dialog" style="display:hidden"></div>').appendTo('body');
        }
        dialog.load(
            url,
            {}, // omit this param object to issue a GET request instead a POST request, otherwise you may provide post parameters within the object
            function (responseText, textStatus, XMLHttpRequest) {
                dialog.dialog({                       
                    close: function (event, ui) {                            
                        dialog.remove();
                    },
                    modal: true,
                    width: 460
                });
            }
        );
    }); 

});

$（函数（）{
$（'a.login'）。单击（函数（）{
var selectedVal=$（“#DropDownList1”）.val（）；
var url=“myserverpage.aspx？product=“+selectedVal；
变量对话框=$（“#对话框”）；
如果（$（“#对话框”）.length==0{
dialog=$（''）.appendTo（'body'）；
}
dialog.load(
网址，
{}，//省略此param对象以发出GET请求，而不是POST请求，否则您可能会在对象内提供POST参数
函数（responseText、textStatus、XMLHttpRequest）{
dialog.dialog（{
关闭：函数（事件，ui）{
dialog.remove（）；
},
莫代尔：是的，
宽度：460
});
}
);
}); 
});

在myserverpage.aspx中，读取querystring产品中的值，并返回要在对话框中显示给用户的相关HTML标记。如果将jQuery和jQuery UI正确加载到页面中，则该标记将起作用

---

脚本将动态为弹出窗口本身创建一个div。您不需要为此添加一个页面。

首先，您的问题中存在脚本问题

• 准备好的文件格式不正确
• 登录选择器使用一个类，它应该是一个id“a#login”，但更简单的是，作为id选择器的“#login”将比标记更快
• 我看不出为什么要销毁对话框，而且该id甚至不在标记中
• 我认为您不需要首先自动打开对话框，然后在注入新的select值后打开它

您希望从列表中选择，然后在对话框中动态填充另一个列表

所有这些都不是很难，但需要一些返工，使其符合您的要求。因此，我将此示例与您的统计数据一起呈现