Editable MultiView Using TextBoxes In ASP.NET

In this tutorial, we will guide you through another approach for an editable MultiView in an ASP.NET, using C#, where I had taken three views inside MultiView. In the first view, we will take the name and city from the user and on the second view; we will make a view to edit the previous details and on the third view, we will show all the details in the gridcontrol.

INITIAL CHAMBER

Step1

Open Your Visual Studio 2010 and create an empty Website. Give a suitable name [data_demo].

Step2

In Solution Explorer, you get your empty Website. Add a Web form, SQL database. Proceed, as shown below.

For Web Form

data_demo (Your Empty Website) -> Right click on Add New Item -> Web Form. Name it as -> data_demo.aspx.

For SQL Server database

data_demo (Your empty Website) -> Right Click on Add New Item -> SQL Server database. [Add the database inside the App_Data_folder].

DATABASE CHAMBER

Step3

Get to your database [Database.mdf], we will create a table - -> tbl_datas1. Go to the database.mdf - -> Table - -> Add New table and design your table, as shown below.

DESIGN CHAMBER

Step4

Open your data_demo.aspx file to create the design. We will drag a Mutiview Control. Inside it, take three views and add an appropriate control, as shown below.

Here, inside the third view, we had taken GridView control to show all the details about the student data. If you find any difficulty in making this design, I had also shared the code too. You can have a look at it.

CODE CHAMBER

Step5

Open data_demo.aspx.cs file to write the code for making editable MultiView. 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using System.Data.Sql;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class Multiview : System.Web.UI.Page
{
    string Name = "";
    string City = "";
   static int id = 0;
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            MultiView1.ActiveViewIndex = 0;
        }

    }

    protected void Button2_Click(object sender, EventArgs e)
    {

        SqlConnection con = new SqlConnection(@"Data Source=Nilesh;Initial Catalog=test_db;Integrated Security=True");
        SqlCommand cmd = new SqlCommand("insert into tbl_datas1 values(@name,@city)", con);
        cmd.Parameters.AddWithValue("@name", txt_Name.Text);
        cmd.Parameters.AddWithValue("@city", txt_City.Text);
        con.Open();
        cmd.ExecuteNonQuery();
        con.Close();
        MultiView1.ActiveViewIndex = 1;
    }



    protected void Button4_Click(object sender, EventArgs e)
    {
        if (txt_Name_Edit.Text.Trim() == "")
        {
            lbl_Name_Val_Edit.Text = "Enter Student Name.";
            txt_Name_Edit.Focus();
            return;
        }
        if (txt_City_Edit.Text.Trim() == "")
        {
            lbl_City_Val_Edit.Text = "Enter Student City.";
            txt_City_Edit.Focus();
            return;
        }

        SqlConnection con = new SqlConnection(@"Data Source=Nilesh;Initial Catalog=test_db;Integrated Security=True");
        SqlCommand cmd = new SqlCommand("update tbl_datas1 set name= @name,city= @city where id = " + id.ToString(), con);
        cmd.Parameters.AddWithValue("@name", txt_Name_Edit.Text);
        cmd.Parameters.AddWithValue("@city", txt_City_Edit.Text);
        con.Open();
        cmd.ExecuteNonQuery();
        con.Close();
        MultiView1.ActiveViewIndex = 2;



        SqlCommand cmd1 = new SqlCommand("select * from tbl_datas1", con);
        SqlDataAdapter sda = new SqlDataAdapter(cmd1);
        DataTable dt = new DataTable();
        sda.Fill(dt);
        GridView1.DataSource = dt;
        GridView1.DataBind();



    }

    protected void LinkButton3_Click(object sender, EventArgs e)
    {
        txt_Name_Edit.ReadOnly = true;
        txt_City_Edit.ReadOnly = true;

        txt_Name_Edit.Text = Name;
        txt_City_Edit.Text = City;
    }

    protected void txt_Name_TextChanged(object sender, EventArgs e)
    {
        if (MultiView1.ActiveViewIndex == 0)
            if (txt_Name.Text.Trim() != "")
            {
                lbl_Name_Val.Text = "";
            }

        if (MultiView1.ActiveViewIndex == 1)
            if (txt_Name_Edit.Text.Trim() != "")
            {
                lbl_Name_Val_Edit.Text = "";
            }
    }

    protected void txt_City_TextChanged(object sender, EventArgs e)
    {
        if (MultiView1.ActiveViewIndex == 0)
            if (txt_City.Text.Trim() != "")
            {
                lbl_City_Val.Text = "";
            }

        if (MultiView1.ActiveViewIndex == 1)
            if (txt_City_Edit.Text.Trim() != "")
            {
                lbl_City_Val_Edit.Text = "";
            }
    }

    protected void View2_Activate(object sender, EventArgs e)
    {
        if (MultiView1.ActiveViewIndex != 1) return;

        SqlConnection con = new SqlConnection(@"Data Source=Nilesh;Initial Catalog=test_db;Integrated Security=True");

        SqlCommand cmd = new SqlCommand("select TOP(1) id, name, city from tbl_datas1 order by id DESC", con);
        SqlDataAdapter sda = new SqlDataAdapter(cmd);
        DataSet ds = new DataSet();
        sda.Fill(ds);
        con.Open();


            Name = txt_Name_Edit.Text = ds.Tables[0].Rows[0]["name"].ToString();
            City = txt_City_Edit.Text = ds.Tables[0].Rows[0]["city"].ToString();

            id = Convert.ToInt32(ds.Tables[0].Rows[0]["id"]);

            txt_Name_Edit.ReadOnly = true;
            txt_City_Edit.ReadOnly = true;

        con.Close();

    }

    protected void LinkButton1_Click(object sender, EventArgs e)
    {

        txt_Name_Edit.ReadOnly = false;
        txt_City_Edit.ReadOnly = false;
    }
}

OUTPUT CHAMBER

Here, we will insert name and city from the first view and see is it saving in the database or not?

First View

Tbl_datas1 - Name and City

Second View

Here, in the second view, the data has come from first view, so that we can edit it. I am updating my city here as DELHI.

Check this in the database to see whether it is stored properly or not. 

Check also in Gridview on third view

It's perfect. I am sorry for the dummy data in the GridView. I have tested it so many times due to which it is showing like this, otherwise it's working  fine.

I hope you like it. Thank you for reading. Have a good day.