I want to show Components in a tabs , so first of all create few components. In this project we have three components, First View Component public class AllViewComponent : ViewComponent { private readonly UserManager<ApplicationUser> _userManager; public AllViewComponent(UserManager<ApplicationUser> userManager) { _userManager = userManager; } public async Task<IViewComponentResult> InvokeAsync() { List<StudentViewModel> allUsers = new List<StudentViewModel>(); var items = await _userManager.Users.ToListAsync(); foreach (var item in items) { allUsers.Add(new StudentViewModel {Id=item.Id, EnrollmentNo = item.EnrollmentNo, FatherName = item.FatherName, Name = item.Name, Age = item.Age, Birthdate = item.Birthdate, Address = item.Address, Gender = item.Gender, Email = item.Email }); }
Resizable() is the method, through which we can resize our asp.net control. Actually here we resize division tag using jquery and css, that is already available on this path.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
Through the jquery-ui.css, we can create a outer box around the controls. This css file contain a single class that is ui-widget-content, in which define some properrties, Check this snapshot.
And the jquery-ui.js file contain resizable() method, check this snap.
2. Add this script tag , in which call resizable() method by the id of div tag.
3. Add a <div> tag with ui-widget-content class and id proerty
4. Take controls inside the <div>Controls</div> tag.
5. Bound the controls from data source.
6. Run this application
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
Through the jquery-ui.css, we can create a outer box around the controls. This css file contain a single class that is ui-widget-content, in which define some properrties, Check this snapshot.
And the jquery-ui.js file contain resizable() method, check this snap.
How to take some steps for doing this
1. Add a one link and two script file in the head tag.2. Add this script tag , in which call resizable() method by the id of div tag.
3. Add a <div> tag with ui-widget-content class and id proerty
4. Take controls inside the <div>Controls</div> tag.
5. Bound the controls from data source.
6. Run this application
Full code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="aspnetcontrolresize.aspx.cs" Inherits="aspnetcontrolresize" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Resizable ASP.NET Control</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("#divresize").resizable();
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="divresize" class="ui-widget-content" style="width:200px;padding:0.2em">
<asp:GridView ID="GridView1" runat="server" Width="100%">
<HeaderStyle ForeColor="Orange" BackColor ="Green"
/>
</asp:GridView>
</div>
</form>
</body>
</html>
Comments
Post a Comment