asp.net GridView WebForm位置擺放問題

asp.net gridview

secondchen 2019-07-30 13:49:34 ‧ 4575 瀏覽

分享至

各位前輩好 , 初學WebForm新手 , 有些問題想請教
目前使用Visual Studio 2019做為開發的IDE
我在Web Form新增了一個GridView元件 , 想要在該元件旁邊新增一個Button元件
但Button卻會跑到GridView的下方去
我有試過Form的整體寬度是可以容納下兩個元件的寬度(使用多個Button測試)
請問要調整GridView的什麼屬性才能達成我的目的

<asp:Button ID="Button1" runat="server" Text="Button" />
    <asp:Button ID="Button3" runat="server" Text="Button" />
    <asp:Button ID="Button4" runat="server" Text="Button" />
    <asp:Button ID="Button5" runat="server" Text="Button" />
    <asp:Button ID="Button6" runat="server" Text="Button" />
    <asp:Button ID="Button7" runat="server" Text="Button" />
    <asp:Button ID="Button8" runat="server" Text="Button" />
    <asp:Button ID="Button9" runat="server" Text="Button" />
    <p></p>
    <asp:GridView ID="GridView1" runat="server" Width="200px" >
    </asp:GridView>
    <asp:Button ID="Button2" runat="server" Text="Button" />
    <asp:Image ID="imgWaferMap" runat="server" Width="200px" Height="200px"/>

player iT邦大師 1 級 ‧ 2019-07-30 18:09:31 檢舉

弄2個<div style="float:left"></div>分別放你的GridViw與Button,這樣試看看

player iT邦大師 1 級 ‧ 2019-07-30 18:11:50 檢舉

別想得太複雜, 如果太閒的話, 你可以重新學HTML與CSS

secondchen iT邦新手 5 級 ‧ 2019-07-30 18:30:34 檢舉

前輩可以了 , 的確GridView和Button在旁邊了
但是下面的其他元件位置也都跑掉了 XD
我在試試看能不能喬的動

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

4 個回答

小魚

iT邦大師 1 級 ‧ 2019-07-30 14:15:09

你要學的是CSS,
WebForm是可以快速開發,
但是那已經是很多年前的東西了,
很多功能趕不上現在的需求,
還是要回歸Html, CSS 跟 JavaScript.

回應 2
分享
檢舉

secondchen iT邦新手 5 級 ‧ 2019-07-30 16:45:29 檢舉

請問前輩可以指導一下girdview的CSS的關鍵字要搜尋什麼嗎?

小魚 iT邦大師 1 級 ‧ 2019-07-30 17:11:08 檢舉

只需要 F12開發人員工具,
可以治百病,
延年益壽,
百毒不侵...

剩下的就是Google+看書學習.

登入發表回應

Homura

iT邦高手 1 級 ‧ 2019-07-30 14:29:39

這是CSS的問題
排版建議你去學學Boostrap的Grid System
官方的文件

回應 3
分享
檢舉

secondchen iT邦新手 5 級 ‧ 2019-07-30 16:45:21 檢舉

請問前輩可以指導一下girdview的CSS的關鍵字要搜尋什麼嗎?

Homura iT邦高手 1 級 ‧ 2019-07-30 17:06:53 檢舉

secondchen
webform控制向要套用CSS使用CssClass屬性
還是你的問題是你不知道CSS是什麼東西?....

secondchen iT邦新手 5 級 ‧ 2019-07-30 18:19:59 檢舉

我知道CssClass的屬性 , 我的意思是說要達到我的目的需要調整gridview css中的哪個屬性呢?

.GridViewStyle
{

    font-family: Arial, Sans-Serif;

    font-size:small;

    table-layout: auto;

    border-collapse: collapse;

    border: #1d1d1d 1px solid;

}

登入發表回應

dragonH

iT邦超人 5 級 ‧ 2019-07-30 17:10:46

既然不是 .net

我就可以試試看回答了

grid system

bootstrap 的 grid system 很好用

可以幫你解決 87% 的排版和簡易的 RWD

codepen

補充一下

要注意 .net mvc 的版本

根據之前的經驗

不同版本用的 bootstrap 好像不一樣

回應 4
分享
檢舉

看更多先前的回應...收起先前的回應...

小魚 iT邦大師 1 級 ‧ 2019-07-30 17:12:25 檢舉

GridView明明就是.Net啊

dragonH iT邦超人 5 級 ‧ 2019-07-30 17:13:53 檢舉

我想說他後面好像是想問 bootstrap 的 grid

secondchen iT邦新手 5 級 ‧ 2019-07-30 18:24:09 檢舉

感謝前輩的回應 , 使用bootstrap 的 grid是不是代表要針對grid
做Event的撰寫是否都是要用JavaScript寫在前端(比如說DataBind或Validation) , 因為小弟JavaScript程度非常之爛..但我知道bootstrap提供的介面都滿漂亮美觀的 , 希望有類似的SAMPLE可供我參考學習 , 請前輩不吝指教

dragonH iT邦超人 5 級 ‧ 2019-07-30 18:52:20 檢舉

bootstrap 你大概可以理解成是一個別人寫好的 css file

然後你透過 class name 去調用

你說的 databind 和 Validation

不是 bootstrap 的功能

登入發表回應

japhenchen

iT邦超人 1 級 ‧ 2019-07-31 08:00:35

最簡單的方法，在＜asp:gridview＞跟＜asp:button＞
上加一層＜div style="display:inline-block;"＞

<asp:Button ID="Button1" runat="server" Text="Button" />
    <asp:Button ID="Button3" runat="server" Text="Button" />
    <asp:Button ID="Button4" runat="server" Text="Button" />
    <asp:Button ID="Button5" runat="server" Text="Button" />
    <asp:Button ID="Button6" runat="server" Text="Button" />
    <asp:Button ID="Button7" runat="server" Text="Button" />
    <asp:Button ID="Button8" runat="server" Text="Button" />
    <asp:Button ID="Button9" runat="server" Text="Button" />
    <p></p>
    <div style="inline-block;">
        <asp:GridView ID="GridView1" runat="server" Width="200px" >
        </asp:GridView>
    </div>
    <div style="inline-block;">
        <asp:Button ID="Button2" runat="server" Text="Button" />
    </div>
    <asp:Image ID="imgWaferMap" runat="server" Width="200px" Height="200px"/>

搞定收工，選我正解，完全不需要jQuery/bootstrap.........純CSS打磨

回應 6
分享
檢舉

看更多先前的回應...收起先前的回應...

japhenchen iT邦超人 1 級 ‧ 2019-07-31 08:11:15 檢舉

右邊那個asp:button會預設vertical-align:bottom而沉在相對偏下方的地方，自己改到top或middle即可
兩個div一般來講各佔一半上一層的空間，必要的話在asp:gridview上的div裡style內再加width:90%;讓表格寬一點，按鍵空間少一點會比較好看些

<div style="inline-block;width:80%;">
    <asp:GridView ID="GridView1" runat="server">
    </asp:GridView>
</div>
<div style="inline-block;vertical-align:middle;">
    <asp:Button ID="Button2" runat="server" Text="Button" />
</div>

CSS一定要打好基礎！美工可有可無，沒美工打底，網頁一定醜不拉幾沒人理你

secondchen iT邦新手 5 級 ‧ 2019-07-31 10:43:34 檢舉

請問前輩這兩個div中間可以加上讓他分開一點比較好看嗎?

japhenchen iT邦超人 1 級 ‧ 2019-07-31 11:04:23 檢舉

...

japhenchen iT邦超人 1 級 ‧ 2019-07-31 11:11:41 檢舉

(為什麼重覆回文了？？？又不能刪文..........見笑了)
再多一個空的＜div．．．．．．．．＞擺中間嘛........

<div style="inline-block;width:80%;">
    <asp:GridView ID="GridView1" runat="server">
    </asp:GridView>
</div>
<div style="width:100px;display:inline-block;"> </div>
<div style="inline-block;vertical-align:middle;">
    <asp:Button ID="Button2" runat="server" Text="Button" />
</div>