iT邦幫忙

0

asp.net GridView WebForm位置擺放問題

  • 分享至 

  • xImage

各位前輩好 , 初學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"/>

https://ithelp.ithome.com.tw/upload/images/20190730/20119284mgrjzNZA5w.jpg

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
前輩可以了 , 的確GridView和Button在旁邊了
但是下面的其他元件位置也都跑掉了 XD
我在試試看能不能喬的動
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
小魚
iT邦大師 1 級 ‧ 2019-07-30 14:15:09

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

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

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

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

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

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

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

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

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

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

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

.GridViewStyle
{

    font-family: Arial, Sans-Serif;

    font-size:small;

    table-layout: auto;

    border-collapse: collapse;

    border: #1d1d1d 1px solid;

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

既然不是 .net

我就可以試試看回答了/images/emoticon/emoticon07.gif

grid system

bootstrap 的 grid system 很好用

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

codepen

補充一下

要注意 .net mvc 的版本

根據之前的經驗

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

看更多先前的回應...收起先前的回應...
小魚 iT邦大師 1 級 ‧ 2019-07-30 17:12:25 檢舉

GridView明明就是.Net啊

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

我想說他後面好像是想問 bootstrap 的 grid/images/emoticon/emoticon48.gif

感謝前輩的回應 , 使用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 的功能

1
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打磨

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

右邊那個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一定要打好基礎!美工可有可無,沒美工打底,網頁一定醜不拉幾沒人理你

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

...

(為什麼重覆回文了???又不能刪文..........見笑了)
再多一個空的<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>

https://ithelp.ithome.com.tw/upload/images/20190731/20117954A2u1u07ogD.jpg

至於之後的元素排版亂亂的,你可以在最後一行</div>之後用<br>或<p></p>強制斷行即可

" "

搞定了 感謝japhenchen前輩 , 以及其他指導的前輩 感謝

我要發表回答

立即登入回答