ASP.NET 4.5 and ASP.NET Core 1 Hosting BLOG

Tutorial and Articles about ASP.NET 4.0 and the latest ASP.NET 4.5 Hosting

ASP.NET 4.5 HOSTING - ASPHostPortal :: How to Create Nested WebGrid in ASP.NET MVC6.

clock November 19, 2014 05:51 by author Mark

How to Create Nested WebGrid with Expand/Collapse in ASP.NET MVC6.

Introduction

In this post, I am explain How to Create Nested WebGrid with Expand/Collapse in ASP.NET MVC6.
Steps :

Step - 1 : Create New Project.

  • Go to File > New > Project > Select asp.net MVC6 web application > Entry Application Name > Click OK > Select Internet Application > Select view engine Razor > OK

Step-2: Add a Database.

  • Go to Solution Explorer > Right Click on App_Data folder > Add > New item > Select SQL Server Database Under Data > Enter Database name > Add.

Step-3: Create table for fetch data.

  • Open Database > Right Click on Table > Add New Table > Add Columns > Save > Enter table name > OK.

In this example, I have used two tables as below

Step-4: Add Entity Data Model.

  • Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select ADO.net Entity Data Model under data > Enter model name > Add.
  • A popup window will come (Entity Data Model Wizard) > Select Generate from database > Next >
  • Chose your data connection > select your database > next > Select tables > enter Model Namespace > Finish.

Step-5: Add a class for create a view model.

  • 1st : Add a folder.
  • Go to Solution Explorer > Right Click on the project > add > new folder.
  • 2nd : Add a class on that folder
  • Go to Solution Explorer > Right Click on that folder > Add > Class... > Enter Class name > Add.

Write the following code in this class

using System.Collections.Generic;
namespace MVCNestedWebgrid.ViewModel
{
    public class OrderVM
    {
        public OrderMaster order { get; set; }
        public List<OrderDetail> orderDetails { get; set; }
    }
}

Step-6: Add a new Controller.

  • Go to Solution Explorer > Right Click on Controllers folder form Solution Explorer > Add > Controller > Enter Controller name > Select Templete "empty MVC Controller"> Add.

Step-7: Add new action into your controller for show nested data in a webgrid.

Here I have added "List" Action into "Order" Controller. Please write this following code

public ActionResult List()
{
    List<OrderVM> allOrder = new List<OrderVM>();
 
    // here MyDatabaseEntities is our data context
    using (MyDatabaseEntities dc = new MyDatabaseEntities())
    {
        var o = dc.OrderMasters.OrderByDescending(a => a.OrderID);
        foreach (var i in o)
        {
            var od = dc.OrderDetails.Where(a => a.OrderID.Equals(i.OrderID)).ToList();
            allOrder.Add(new OrderVM { order= i, orderDetails = od });
        }
    }
    return View(allOrder);
}

Step-8: Add view for the Action & design.

  • Right Click on Action Method (here right click on form action) > Add View... > Enter View Name > Select View Engine (Razor) > Check "Create a strong-typed view" > Select your model class > Add.

NOTE " Please Rebuild solution before add view

Html Code
@model IEnumerable<MVCNestedWebgrid.ViewModel.OrderVM>

@{
    ViewBag.Title = "Order List";
    WebGrid grid = new WebGrid(source: Model, canSort: false);
}
<div id="main" style="padding:25px; background-color:white;">
    @grid.GetHtml(
    htmlAttributes: new {id="gridT", width="700px" },
    columns:grid.Columns(
            grid.Column("order.OrderID","Order ID"),
            grid.Column(header:"Order Date",format:(item)=> string.Format("{0:dd-MM-yyyy}",item.order.OrderDate)),
            grid.Column("order.CustomerName","Customer Name"),
            grid.Column("order.CustomerAddress","Address"),
            grid.Column(format:(item)=>{
                WebGrid subGrid = new WebGrid(source: item.orderDetails);
                return subGrid.GetHtml(
                    htmlAttributes: new { id="subT" },
                    columns:subGrid.Columns(
                            subGrid.Column("Product","Product"),
                            subGrid.Column("Quantity", "Quantity"),
                            subGrid.Column("Rate", "Rate"),
                            subGrid.Column("Amount", "Amount")
                        )                   
                    );
            })
        )
    )
</div>
Css Code
<style>
th, td {
        padding:5px;
    }
    th
    {
        background-color:rgb(248, 248, 248);       
    }
    #gridT,  #gridT tr {
        border:1px solid #0D857B;
    }
    #subT,#subT tr {
        border:1px solid #f3f3f3;
    }
    #subT {
        margin:0px 0px 0px 10px;
        padding:5px;
        width:95%;
    }
    #subT th {
        font-size:12px;
    }
    .hoverEff {
        cursor:pointer;
    }
    .hoverEff:hover {
        background-color:rgb(248, 242, 242);
    }
    .expand {
        background-image: url(/Images/pm.png);
        background-position-x: -22px;
        background-repeat:no-repeat;
    }
    .collapse  {
        background-image: url(/Images/pm.png);
        background-position-x: -2px;
        background-repeat:no-repeat;
    }
</style>
Write the following Jquery code for make webgrid collapsible
<script>
    $(document).ready(function () {
        var size = $("#main #gridT > thead > tr >th").size(); // get total column
        $("#main #gridT > thead > tr >th").last().remove(); // remove last column
        $("#main #gridT > thead > tr").prepend("<th></th>"); // add one column at first for collapsible column
        $("#main #gridT > tbody > tr").each(function (i, el) {
            $(this).prepend(
                    $("<td></td>")
                    .addClass("expand")
                    .addClass("hoverEff")
                    .attr('title',"click for show/hide")
                );
            //Now get sub table from last column and add this to the next new added row
            var table = $("table", this).parent().html();
            //add new row with this subtable
            $(this).after("<tr><td></td><td style='padding:5px; margin:0px;' colspan='" + (size - 1) + "'>" + table + "</td></tr>");
            $("table", this).parent().remove();
            // ADD CLICK EVENT FOR MAKE COLLAPSIBLE
            $(".hoverEff", this).live("click", function () {
                $(this).parent().closest("tr").next().slideToggle(100);
                $(this).toggleClass("expand collapse");
            });
        });
        //by default make all subgrid in collapse mode
        $("#main #gridT > tbody > tr td.expand").each(function (i, el) {
            $(this).toggleClass("expand collapse");
            $(this).parent().closest("tr").next().slideToggle(100);
        });    
    });
</script>



ASP.NET 4.5.1 Hosting - ASPHostPortal.com :: How to Create a Sign Up/Registration Page in ASP.NET

clock January 10, 2014 07:17 by author Ben

Here is the simple step to create a sign up/registration page in ASP.NET. Lets check this out :
1. Open the Microsoft Visual Studio
2. Select one New Asp.Net Web application
3. Open the Design Default.aspx page
4. Drag and Drop one DropDown list and button from the Tool box.
5. Add one new item( i.e., New Registration Page) for the Drop down list
6. Procedure for adding items : Right click on the DropDown List and select properties and select items and add NewRegistration in Text Field.
7. Change the properties of the Dropdown list
a.Kept AutopostBack = True;
b.select the SelectedIndexChanged Event for that..
8. Open the code page that is Default.aspx.cs and and create a method in SelectedIndexChanged event of dropdownlist

using System; 
using System.Collections; 
using System.Configuration; 
using System.Data; 
using System.Linq; 
using System.Web; 
using System.Web.Security; 
using System.Web.UI; 
using System.Web.UI.HtmlControls; 
using System.Web.UI.WebControls; 
using System.Web.UI.WebControls.WebParts; 
using System.Xml.Linq; 
using System.Data.SqlClient; 
 
public partial class Dynamic_controls : System.Web.UI.Page 

    SqlConnection con; 
    SqlCommand com; 
  protected void Page_Load(object sender, EventArgs e) 
    {        
        
    } 
protected void ddlist_SelectedIndexChanged(object sender, EventArgs e) 
    { 
        Createnewaccount();  
    } 

9. Create new methods for Different controls by using the main method(i.e., Createnewaccount)

private void Createnewaccount ()
         {
             CreateDynamicTextBoxes ();
             CreateDynamicTextBoxes1 ();
             CreateDynamicCheckBoxes ();
             CreateDynamicCheckBoxes1 ();
             CreateDynamicRadioButtons1 ();
             BindDropDownLists ();
         }

10. Create all types of dynamic controls

 protected void CreateDynamicTextBoxes ( )
        {
           
            int c = 1 ;
            TextBox [ ] textBoxArr = new TextBox [ c ] ;/ / array of textboxes
            for (int i = 0 ; i < c ; i + + )
            {
                 
                textBoxArr [ i ] = new TextBox ( ) ;
                textBoxArr [ i ] . ID = " txtBox " + i.ToString ( ) ;
                PH_Name.Controls.Add ( textBoxArr [ i ] ) ;
                RequiredFieldValidator reqfldVal = new RequiredFieldValidator ( ) ;
                reqfldVal.ID = " RequiredValidator " + i ;
                reqfldVal.ControlToValidate = " txtBox " + i ;
                reqfldVal.ErrorMessage = " Not Empty " ;
                reqfldVal.SetFocusOnError = true ;
                PH_Name.Controls.Add ( reqfldVal ) ;
            }
        }
        protected void CreateDynamicTextBoxes1 ( )
        {
            int c = 1 ;
            TextBox [ ] textBoxArr1 = new TextBox [ c ] ;/ / array of textboxes
            for (int i = 0 ; i < c ; i + + )
            {
      
                textBoxArr1 [ i ] = new TextBox ( ) ;
                textBoxArr1 [ i ] . ID = " txtBox1 " + i.ToString ( ) ;
                PH_pwd.Controls.Add ( textBoxArr1 [ i ] ) ;
                RequiredFieldValidator reqfldVal1 = new RequiredFieldValidator ( ) ;
                reqfldVal1.ID = " RequiredValidator1 " + i ;
                reqfldVal1.ControlToValidate = " txtBox1 " + i ;
                reqfldVal1.ErrorMessage = " Not Empty " ;
                reqfldVal1.SetFocusOnError = true ;
                PH_pwd.Controls.Add ( reqfldVal1 ) ;
                 
            }
        }
        private void BindDropDownLists ( )
        {
            SqlDataSource sqlDS = new SqlDataSource ( ) ;
            sqlDS.ConnectionString = ConfigurationManager.ConnectionStrings [ " SAMPLE_2 " ] . ToString ( ) ;
            sqlDS.SelectCommand = " Select CountryID , COUNTRY_NAME from countrynames " ;
            PH_country.Controls.Add ( sqlDS ) ;
            DropDownList ddl = new DropDownList ( ) ;
            ddl.ID = " ddlrank " ;
            ddl.DataSource = sqlDS ;
            ddl.DataTextField = " COUNTRY_NAME " ;
            ddl.DataValueField = " CountryID " ;
            PH_country.Controls.Add ( ddI ) ;
            foreach ( Control ctl in PH_country.Controls )
            {
                if ( ctl is DropDownList )
                {
                    ( ctl as DropDownList ) . DataBind ( ) ;
                }
            }
        }
        protected void CreateDynamicCheckBoxes ( )
        {
                   
                CheckBox chk ;
                chk = new CheckBox ( ) ;
                chk.ID = " chkhobbies " ;
                chk.Text = " savings " ;
                chk.AutoPostBack = false ;
                PH_trans.Controls.Add ( chk ) ;
             
        }
        protected void CreateDynamicCheckBoxes1 ( )
        {
           
            int c = 1 ;
            CheckBox [ ] chk = new CheckBox [ c ] ;
            for (int i = 0 ; i < c ; i + + )
            {
                chk [ i ] = new CheckBox ( ) ;
                chk [ i ] . ID = " chkhobbies1 " + i.ToString ( ) ;
                chk [ i ] . Text = " Current" ;
                chk [ i ] . AutoPostBack = false ;
                PH_trans.Controls.Add ( chk [ i ] ) ;
            }
        }
        protected void CreateDynamicRadioButtons ( )
        {
                Male = new RadioButton RadioButton ( ) ;
                Female = new RadioButton RadioButton ( ) ;
                male = new RadioButton ( ) ;
                female = new RadioButton ( ) ;
                male.Text = " Male " ;
                female.Text = " Female " ;
                male.Checked = false ;
                female.Checked = false ;
                male.GroupName = " unknown " ;
                female.GroupName = " unknown " ;
                male.ID = " malegender " ;
                female.ID = " unknown " ;
                male.AutoPostBack = false ;
                female.AutoPostBack = false ;
                PH_gender.Controls.Add ( male ) ;
                PH_gender.Controls.Add (female ) ;
        }
        protected void CreateDynamicRadioButtons1 ( )
        {
            RadioButtonList radio = new RadioButtonList ( ) ;
            radio.ID = " rblRow " ;
            radio.Items.Add ( new ListItem ( " Male " ) ) ;
            radio.Items.Add ( new ListItem ( " Female " ) ) ;
            PH_gender.Controls.Add ( radio ) ;
             
        }
        protected void CreateDynamicPanel ( )
        {
           
            int c = 1 ;
            TextPanel panel = new Panel ( ) ;
            for (int i = 0 ; i < c ; i + + )
            {
                TextPanel.ID = " txtPanel " + i.ToString ( ) ;
                PlaceHolder1.Controls.Add ( TextPanel ) ;
            }
        }

11. Add the following code to store the data in database

protected void btn_submit_Click ( object sender , EventArgs e )
        {
            for (int i = 0 ; i < 1 ; i + + )
            {
                 
                txtvalue string = " txtBox " + i.ToString ( ) ;
                txtvalue1 string = " txtBox1 " + i.ToString ( ) ;
                ddlvalue string = " ddlrank " ;
                chkvalue string = " chkhobbies " ;
                chkvalue1 string = " chkhobbies1 " + i.ToString ( ) ;
                rbvalue string = " rblRow " ;
                 
                TextBox txt = ( TextBox ) PlaceHolder1.FindControl ( txtvalue ) ;
                TextBox txt1 = ( TextBox ) PlaceHolder1.FindControl ( txtvalue1 ) ;
                DropDownList Dddl = ( DropDownList ) PlaceHolder1.FindControl ( ddlvalue ) ;
                CheckBox Dchk = ( CheckBox ) PlaceHolder1.FindControl ( chkvalue ) ;
                CheckBox Dchk1 = ( CheckBox ) PlaceHolder1.FindControl ( chkvalue1 ) ;
                RadioButtonList Drd = ( RadioButtonList ) PlaceHolder1.FindControl ( rbvalue ) ;
                if ( txt ! = null )
                {
                    try
                    {
                        string strText = txt.Text ;
                        strText1 string = txt1.Text ;
                        strddl string = Dddl.SelectedItem.Text ;
                        strchk string = Dchk.Text ;
                        strchk1 string = Dchk1.Text ;
                        strrdb string = Drd.Text ;
                        / / Store value in database textbox Cell
                        con = new SqlConnection ( ConfigurationManager.ConnectionStrings [ " SAMPLE_2 " ] . ToString ( ) ) ;
                        con.Open ( ) ;
                        com = new SqlCommand ( " insert into Dynamic_Form ( UserName , LastName , DropdownlistValue , Chksavings , Chkcurrent , Radiovalue ) values ​​( ' " + strText + " ' , ' " + strText1 + " ' , ' " + strddl + " ' , ' " strchk + + " ' , ' " + strchk1 + " ' , ' " + strrdb + " ' ) " , con ) ;
                        com.ExecuteNonQuery ( ) ;
                        con.Close ( ) ;
                        lbl_error.Text = " Account Successfully Created " ;
                         
                    }
                    catch ( Exception ex )
                    {
                        throw ex ;
                        / / lbl_error.Text = " There is a problem while creating Account " ;
                         
                    }
                }
            }
        }

Now, run your program and see the result :



Cheap ASP.NET 4.5 Hosting

We’re a company that works differently to most. Value is what we output and help our customers achieve, not how much money we put in the bank. It’s not because we are altruistic. It’s based on an even simpler principle. "Do good things, and good things will come to you".

Success for us is something that is continually experienced, not something that is reached. For us it is all about the experience – more than the journey. Life is a continual experience. We see the Internet as being an incredible amplifier to the experience of life for all of us. It can help humanity come together to explode in knowledge exploration and discussion. It is continual enlightenment of new ideas, experiences, and passions


Author Link


 

Corporate Address (Location)

ASPHostPortal
170 W 56th Street, Suite 121
New York, NY 10019
United States

Tag cloud

Sign in