如何使用JQuery显示用户控件？ [英] How to show User control using JQuery?

问题描述

Hello Experts，



我想创建一个jquery函数，就像一个对话框窗口，该对话框窗口应该显示我的用户控件。我创建了用户控件。但是我不知道jquery，所以有人可以帮我这个。



这是我的用户控制

Hello Experts,

I want to create a jquery function which is like a dialog window and that dialog window should show my user control. I created user control. But I don't know jquery, so can anyone help me with this please.

Here is my User control

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="Brands.ascx.vb" Inherits="Controls_Brands" %>
<asp:PlaceHolder ID="ucbrands" runat="server" />

<table id="tblBrands" border="3" cellspacing="3" cellpadding="0" style="padding:0px;margin:0px;border:0px">
<tr>

 <td colspan="2" align="center"><label>
 <input type="checkbox" name="chk1" id="chk1" />
  GoodYear</label></td>
  <td colspan="2" align="center"><label>
 <input type="checkbox" name="ch2" id="ch2" />
  Dunlop</label></td>
  <td colspan="2" align="center"><label>
 <input type="checkbox" name="ch3" id="ch3" />
  Kelly</label></td>

</tr>
<tr>
<td colspan="2" align="center"><label>
 <input type="checkbox" name="ch4" id="ch4" />
  Pirelli</label></td>
  <td colspan="2" align="center"><label>
 <input type="checkbox" name="ch5" id="ch5" />
  Kumho</label></td>
  <td colspan="2" align="center"><label>
 <input type="checkbox" name="ch6" id="ch6" />
  Aeolus</label></td>
</tr>
<tr>
<td colspan="2" align="center"><label>
 <input type="checkbox" name="ch7" id="ch7" />
  Centara</label></td>
  <td colspan="2" align="center"><label>
 <input type="checkbox" name="ch8" id="ch8" />
  Venezia</label></td>
  <td colspan="2" align="center"><label>
 <input type="checkbox" name="ch9" id="ch9" />
  Maxtrek</label></td>
</tr>
<tr>
<td colspan="2" align="center"><label>
 <input type="checkbox" name="ch10" id="ch10" />
  Michelin</label></td>
  <td colspan="2" align="center"><label>
 <input type="checkbox" name="ch11" id="ch11" />
  Uniroyal</label></td>
  <td colspan="2" align="center"><label>
 <input type="checkbox" name="chk12" id="chk12" />
  Continental</label></td>
</tr>
<tr>
<td colspan="2" align="center"><label>
 <input type="checkbox" name="chk13" id="chk13" />
  Yokohama</label></td>
  <td colspan="2" align="center"><label>
 <input type="checkbox" name="chk14" id="chk14" />
  Others</label></td>
</tr>
</table>

使用Jquery如何显示一个对话框窗口，其中包含上面列出的项目用户控制？非常感谢您的帮助。

Using Jquery how to show a dialog window with items as listed in the above user control? Your help is much appreciated.

推荐答案

您（而不是创建窗口或对话框）应使用简单的 div 元素，在里面你可以加载你的用户控件的内容。我一直说过，一旦流式传输到客户端的ASP.NET代码总是以HTML的形式出现。因此，无需担心内容的外观，它将是带有一些类ID和其他属性的简单HTML标记。



您可以创建一个简单的div元素，例如

You (instead of creating a window or a dialog) should use a simple div element, and inside you can load the content of your User control. I have always said, that ASP.NET code once streamed down to the client is in the form of HTML always. So, there is no need to worry of how you content would look like, it will be simple HTML markup with a few classes ids and other attributes.

You can create a simple div element, such as

<div id="user-control"></div>

完成。现在，您可以从控件所在的服务器网页加载数据，您可以使用jQuery的ajax或获取加载器来获取数据。我更喜欢使用get loader，或者加载以使用服务器中的内容填充元素。

Done. Now, you can load the data from the server's web page where your control is located at, and you can use jQuery's ajax or get loaders to get the data. I would prefer using the get loader, or load to fill the element with the content from the server.

（' ＃user-control'）。load（' < ; url-of-control>'）;

('#user-control').load('<url-of-the-control>');

这将加载用户控件的HTML标记的内容进入div元素。之后您可以使用CSS样式将div显示为浮动窗口;更像是一个对话框。现在它将是一个简单的HTML文档元素。这可以使用CSS或jQuery本身轻松编辑。



更多关于jQuery的加载功能 [ ^ ]。

添加到解决方案1，您可以浏览HTML5中引入的对话框元素以显示模型对话框，请参阅 jsfiddle 上的演示[ ^ ]

Add to solution 1, you may explore the dialog element introduced in HTML5 to show a model dialog, see demo at jsfiddle[^]

这篇关于如何使用JQuery显示用户控件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！