DataGrid每次使用jquery自动生成列

时间:2016-01-31 02:53:38

标签: c# jquery asp.net

我有一个ASP.net站点,其中有一个名为DisplayPersons的方法,它列出了数据库中的所有人员。事情是,当我点击ShowUsers按钮时,它调用DisplayPersons函数并将数据绑定到gridview并正常工作。当我第二次单击该按钮时,它会通过重复数据将数据复制到网格视图。 我想要的是,如果单击ShowUsers按钮,它只需要显示数据库中存在的数据,而不管其点击的次数。请帮忙。请忽略其他功能

ASPX:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <script type="text/javascript">

        function SavePersonRecord() {

            var Name = $.trim($('#<%=txtName.ClientID %>').val());
            var LName = $.trim($('#<%=txtLastName.ClientID %>').val());

            var Messege = "";

            if (Name == '') {
                Messege = "FirstName is blank ";
            }

            if (LName == '') {
                Messege += "LastName is Blank";
            }

            if (Messege.length == 0) {

                $.ajax({
                    type: "POST",
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    url: "Default.aspx/InsertPersonRecord",
                    data: "{'Name':'" + Name + "', 'LName':'" + LName + "'}",
                    success: function (Record) {

                        $('#txtName').val();
                        $('#txtLastName').val();


                        if (Record.d == true) {

                            $('#Result').text("Your Record has been inserted successfuly");
                            $('#txtName').val('');
                            $('#txtLastName').val('');
                        }
                        else {
                            $('#Result').text("Your Record was Not Inserted");
                        }

                    },
                    Error: function (textMsg) {

                        $('#Result').text("Error: " + Error);
                    }
                });
            }
            else {
                $('#Result').html('');
                $('#Result').html(Messege);
            }
            $('#Result').fadeIn();
        }

        function DisplayPersons() {
            //document.write("a");
            $("#gvData").val('');
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "Default.aspx/BindUsers",
                data: "{}",
                dataType: "json",
                success: function (result) {
                    for (var i = 0; i < result.d.length; i++) {
                        $("#gvData").append("<tr><td>" + result.d[i].FirstName + "</td><td>" + result.d[i].LastName);
                        result.d[i] = null;
                    }
                },
                error: function (result) {
                    alert("Error");
                }
            });
        }
        function SearchData()
        {
            var search = $.trim($('#<%=txtserach.ClientID %>').val());
            if (search == "") {
                return;
            }
            $.ajax({
                type: "POST",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                url: "Default.aspx/Search",
                data: "{'term':'" + search + "'}",
                success: function (found) {
                    for (var i = 0; i < found.d.length; i++) {
                        $("#gvData").append("<tr><td>" + found.d[i].FirstName + "</td><td>" + found.d[i].LastName);
                        found.d[i] = null;
                    }
                }
            });

        }
    </script>

    <h3 id="Result"></h3>
    <form id="form1" runat="server">
        <div>
            <asp:Table ID="Table1" runat="server">
                <asp:TableRow>
                    <asp:TableCell>FirstName </asp:TableCell><asp:TableCell>
                        <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
                    </asp:TableCell>
                </asp:TableRow>

                <asp:TableRow>
                    <asp:TableCell>Last Name</asp:TableCell><asp:TableCell>
                        <asp:TextBox ID="txtLastName" runat="server"></asp:TextBox>
                    </asp:TableCell>
                </asp:TableRow>

                <asp:TableRow>
                    <asp:TableCell></asp:TableCell><asp:TableCell>
                        <asp:Button ID="btnInsertRecord" runat="server" Text="Save" OnClientClick="SavePersonRecord(); return false" />
                    </asp:TableCell>
                    <asp:TableCell><input type="button" value="Show Users" onclick="DisplayPersons()" /></asp:TableCell>
                </asp:TableRow>

            </asp:Table>
            <br /><br />

            <asp:TextBox ID="txtserach" runat="server"></asp:TextBox>
            <input type="button" value="Search" onclick="SearchData()" />
             <asp:GridView ID="gvData" runat="server" CellPadding="4" ShowHeaderWhenEmpty="true" ForeColor="#333333">
            <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <RowStyle BackColor="#EFF3FB" />
        </asp:GridView>
        </div>
    </form>
</body>
</html>

CS文件:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;
using System.Data.SqlClient;
using System.Data;
using System.Web.Services;

public partial class _Default : System.Web.UI.Page
{
    static string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    static List<Users> allUsers;
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindToGrid();
        }


    }
    [WebMethod]
    public static bool InsertPersonRecord(string Name, string LName)
    {
        bool InsertData;
        using (SqlConnection con = new SqlConnection(conString))
        {
            using (SqlCommand cmd = new SqlCommand("sp_PersonData", con))
            {

                cmd.CommandType = CommandType.StoredProcedure;

                cmd.Parameters.AddWithValue("@FName", Name);
                cmd.Parameters.AddWithValue("@LName", LName);
                if (con.State == ConnectionState.Closed)
                {
                    con.Open();
                }
                int Result = cmd.ExecuteNonQuery();
                if (Result > 0)
                {
                    InsertData = true;
                }
                else
                {
                    InsertData = false;
                }

                return InsertData;
            }
        }

    }
    [WebMethod]
    public static List<Users> BindUsers()
    {
        DataTable dt = new DataTable();
        allUsers = new List<Users>();
        allUsers.Clear();
        using (SqlConnection con = new SqlConnection(conString))
        {

                using (SqlCommand command = new SqlCommand("select FirstName, LastName from Users Order By FirstName", con))
                {

                    con.Open();
                    SqlDataAdapter da = new SqlDataAdapter(command);
                    da.Fill(dt);
                    foreach (DataRow dtrow in dt.Rows)
                    {
                        Users users = new Users();
                        users.FirstName = dtrow["FirstName"].ToString();
                        users.LastName = dtrow["LastName"].ToString();
                        allUsers.Add(users);

                    }
                }



        }
        return allUsers;

    }

    [WebMethod]
    public static List<Users> Search(string term)
    {
        //List<Users> result = new List<Users>();
        return allUsers.FindAll(x => x.FirstName.Contains("term"));
    }

    public void BindToGrid()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("FirstName");
        dt.Columns.Add("LastName");
        gvData.DataSource = dt;
        gvData.DataBind();
    }
}

public class Users
{
    public string FirstName { get; set; }
    public string LastName { get; set; }

}

1 个答案:

答案 0 :(得分:0)

您需要使用html('')清除网格视图,而不是val('')

function DisplayPersons() {
    $("#gvData").html('');
    // Removed for brevity.
}

方法val()仅适用于表单输入,如jQuery docs中所述:

  

.val()方法主要用于获取表单元素的值,例如inputselecttextarea

但是,html() works如果你想获取/设置任何元素的内容。

  

.html()用于设置元素的内容时,该元素中的所有内容都将被新内容完全替换。