ASp.net MVC Ajax Call shows indifferent Behaviour

Question

I have a simple registration form in asp.net mvc4 in my application i had put two buttons one for data save and one for display the saved data in to a div, and for displaying purpose i had write an ajax call to a code behind function.

The Problem the Result will be showed to the page and suddenly it dissipates when i click show table button .i try with breakpoints and i found that each time the control is redirected to ActionResult and come back to function.

I don't know why it is happend please help me to solve this

View

  <button type="submit" id="btnSave" name="Command" value="Register">Register</button>
     <input type="submit" value="Clear" name="Command"/>
     <input type="submit" id="Tabledata" />
    <div id="div1"></div>


<script type="text/javascript">
    var obj = document.getElementById("div1");
    $("#Tabledata").click(function () {
        $.ajax({
            url: 'sample/data',
            dataType:"text",
            type: "GET",
            contentType: "text/plain",
            async: true,
            processData: false,
            cache: false,
            success: function (data) {
                $("#div1").html(data);
            },
            error: function (xhr) {
                alert('error');
            }
        });
    });

Controller

public ActionResult submit(sample sam,string Command,dbconnection db)
        {


            SqlConnection con = new SqlConnection(db.GetconString());
            if (Command == "Register")
            {

                SqlCommand sqlCmd = new SqlCommand("sp_Sp_Register", con);
                con.Open();
                sqlCmd.CommandType = CommandType.StoredProcedure;  
                sqlCmd.Parameters.Add(new SqlParameter("@FirstName", @sam.FirstName));
                sqlCmd.Parameters.Add(new SqlParameter("@LastName", @sam.LastName));
                sqlCmd.Parameters.Add(new SqlParameter("@Address", @sam.Address));
                sqlCmd.Parameters.Add(new SqlParameter("@PhoneNumber", @sam.PhoneNumber));
                sqlCmd.Parameters.Add(new SqlParameter("@Location", @sam.Location));

                sqlCmd.ExecuteNonQuery();


                con.Close();
            }
            else if (Command == "Clear")
            {
            }
            else if (Command == "ShowTable")
            {

                 sam.tabledata = "<table>";
                DataTable dt;
                dt = db.BuildDT("select * from MVCsample");
                foreach (DataRow row in dt.Rows)
                {
                    sam.tabledata += "<tr border='1'><td>" + Convert.ToString(row["First Name"]) + "</td>";
                    sam.tabledata += "<td>" + Convert.ToString(row["Last Name"]) + "</td>";
                    sam.tabledata += "<td>" + Convert.ToString(row["Address"]) + "</td>";
                    sam.tabledata += "<td>" + Convert.ToString(row["PhoneNumber"]) + "</td>";
                    sam.tabledata += "<td>" + Convert.ToString(row["Location"]) + "</td></tr>";

                }
                sam.tabledata += "</table>";

                ViewBag.tabledata = sam.tabledata;

            }

            return View();

        }
        public string data(sample s,dbconnection db)
        {


           SqlConnection con = new SqlConnection(db.GetconString());

                 s.tabledata = "<table>";
                DataTable dt;
                dt = db.BuildDT("select * from MVCsample");
                foreach (DataRow row in dt.Rows)
                {
                    s.tabledata += "<tr border='1'><td>" + Convert.ToString(row["First Name"]) + "</td>";
                    s.tabledata += "<td>" + Convert.ToString(row["Last Name"]) + "</td>";
                    s.tabledata += "<td>" + Convert.ToString(row["Address"]) + "</td>";
                    s.tabledata += "<td>" + Convert.ToString(row["PhoneNumber"]) + "</td>";
                    s.tabledata += "<td>" + Convert.ToString(row["Location"]) + "</td></tr>";

                }
                s.tabledata += "</table>";

                //ViewBag.tabledata = s.tabledata;
                return s.tabledata;
        }

Answer 1

Instead of submit type you should use button type.

Replace

<input type="submit" id="Tabledata" />

with

<input type="button" id="Tabledata" />

will work perfectly

Hope this helps.