How to show User control using JQuery?

Question

0.00/5 (No votes)

See more:

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

XML

<%@ 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>

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

Posted 25-Feb-15 10:34am

sudevsu

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Afzaal Ahmad Zeeshan · Answer 1 · 2015-02-25T10:38:00

Solution 1

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

HTML

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

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.

JavaScript

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

This would load the content of your User control's HTML markup into the div element. You can after that use the CSS styles to show the div as a floating window; more like a dialog box. It now then would be a simple HTML document's element. That can be easily edited using CSS, or jQuery itself.

More on jQuery's load function[^].

Posted 25-Feb-15 10:38am

Afzaal Ahmad Zeeshan

Updated 25-Feb-15 10:40am

v2

Comments

sudevsu 26-Feb-15 8:44am

Well, My main content page is very tightly packed. So I want to create a usercontrol and show that as popup or dialog window. Do you think your solution works for my requirement. because I am not sure of Jquery. I have like 0 knowledge on it.

Afzaal Ahmad Zeeshan 26-Feb-15 8:48am

Yes, because I myself have tried using the same thing in my applications, to load some external data from server (using Ajax or a load function) and then displaying it in a div; using CSS and styling the div as a popup. Just the way, Facebook and/or many other web sites do.

sudevsu 26-Feb-15 8:59am

Ok Thank you Ahmad.
Now div element should be created in normal webpage page1.ASPX correct?. On this page1.ASPX I want to show my Popup.
Sorry for repeating same thing. Because I don't know how to start this. This work is my career decider. So plz bear with me.
I will call you back incase I need some help.

Afzaal Ahmad Zeeshan 26-Feb-15 9:05am

Yes, you can simply just create an empty container (that is an empty div), and using the jQuery you can populate that empty container whenever you want to. Using the above code. You can then show the popup, make sure the div have enough CSS styles to display the container as a popup. You can set some backgrounds, z-index etc.

sudevsu 26-Feb-15 9:11am

Alright so my checkboxes, drop downs will be in my user control page.
Div tag will be in ASPX web page where I want the pop to be show.

Afzaal Ahmad Zeeshan 26-Feb-15 9:20am

Yes, while the data will be sent it will be just HTML markup. So there won't be any problem in loading them on your web page.

sudevsu 26-Feb-15 9:22am

Let me try and get back to you.

sudevsu 26-Feb-15 10:04am

Ok Ahmad,
Here is what I tried...
This is the page CodeFile="DealerTireSearchResults.aspx.vb" where I should get my pop up window that has usercontrol.ASCX
Here is my User control page
CodeFile="Brands.ascx.vb"

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

<p>
<select id="Manufacturer" name="Manufacturer" <asp:Literal ID='litManfDis' runat="server" />
<option>SELECT MANUFACTURER</option>
<asp:Literal ID="litManf" runat="server" />
</p>
<p>
<select id="ConCom" name="Consumer-Commercial" <asp:Literal ID='litConcomDis' runat="server" />
<option>CONSUMER/COMMERCIAL</option>
<asp:Literal ID="litConCom" runat="server" />
</p>
<p>
<select id="TireLine" name="Tireline" <asp:Literal ID='litTirelineDis' runat="server" />
<option>TIRELINE</option>
<asp:Literal ID="litTireline" runat="server" />
</p>

function Brands()
{
debugger;
$('#usercontrol').load('Brands.ascx');
}

This is my Jquery function.
Nothing happens as expected.

sudevsu 26-Feb-15 10:04am

Is there any way I chat with you to show my code?

sudevsu 26-Feb-15 13:34pm

I am closing this thread and will open in a new thread

Peter Leow · Answer 2 · 2015-02-25T15:15:00

Solution 2

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

Posted 25-Feb-15 15:15pm

Peter Leow