如何在gridview中放入一些bootstrap css?

时间:2015-06-05 08:22:24

标签: html css twitter-bootstrap

我需要帮助在移动友好的引导程序中显示此gridview。因为这个数据库中有很多列 - 大约超过10列,我不认为它是一个用户友好的设计。我需要帮助设计和建议。感谢

ASPX.CS:

protected void Button1_Click(object sender, EventArgs e)
    {
        string modelValue = this.model.Value;
        string makeValue = this.make.Value;
        string minYearValue = this.minYear.Value;
        string maxYearValue = this.maxYear.Value;
        string query = null;
        //all have value
        if(makeValue != "select"  && modelValue != "Model" && (minYearValue != "0" && maxYearValue != "2015"))
        {
            query = "select * from vehicle where VehicleMake = '" + makeValue + "' and VehicleModel = '" + modelValue + "' and VehicleYear >= '" + minYearValue + "' and VehicleYear <= '" + maxYearValue + "'";
        } 

        MSConnector connector = new MSConnector();
        connector.ConnectionString = "SERVER=server;UID=user;Password=pass;DATABASE=data;";
        DataSet Make = connector.ExecuteQuery(query);
        DataTable dt = Make.Tables[0];
        data.DataSource = dt;
        data.DataBind();
    }

ASPX:

    <%@ Page Language="C#" AutoEventWireup="true"    CodeBehind="SearchVehicle.aspx.cs" Inherits="WebApplication1.eyeofheaven.SearchVehicle" %>

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <link rel="stylesheet" type="text/css" href="EyeOfHeavenStyle.css"/>
    <meta name="viewport" content = "width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="Content/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"/>
    <title>Vehicle Search</title>
    </head>
    <body>
     <div class="container form-group">
     <div class="row">
     <form runat="server">
       <div class="col-md-6"><select class="form-control" name="Make" id="make" runat="server"> 
        <option value="select" selected>Select Make</option>
        <option value="ALFA ROMEO">ALFA ROMEO</option>
      </select></div>
      <div class="col-md-6"> <select class="form-control" name="Model" id="model" runat="server">
        <option value="">x3</option>
      </select></div>
       <div class="col-md-6"><select class="form-control" name="minYear" id="minYear" runat="server">
        <option value="0" selected>Select Year</option>
        <option value="2015">2015</option>
      </select></div> 
         <div class="col-md-6"><select class="form-control" name="ShipName" id="shipName" runat="server">
        <option value="">Ship Name</option>
      </select></div>
       <div class="col-md-6">to &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<select class="form-control" name="maxYear" id="maxYear" runat="server">
        <option value="2015" selected>Select Year</option>
        <option value="2015">2015</option>
      </select></div>

      <div class="container">
        <div class="row">
          <div class="col-md-12"><button type="button" runat="server" id="searchButton" class="btn btn-primary" onserverclick="Button1_Click">Search</button></div>
        </div>
      </div>
        <div class="table-responsive">
            <asp:GridView runat="Server" id="data" CssClass="table table-striped table-bordered table-responsive">
                </asp:GridView>


        </div>
    </form>
    </div>
  </div>
  <div class="container">

  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <script src="Scripts/jquery-1.9.0.min.js" type="text/javascript"></script>  
  <script src="Scripts/bootstrap.min.js" type="text/javascript"></script>
  <script src="SearchVehicleJavascript.js"></script>
</body>
</html>

0 个答案:

没有答案