如何在asp.NET WebForm中使用UIkit Form

时间:2015-06-05 13:35:36

标签: html css asp.net webforms uikit

我有这个用UIkit设计的单页网页。 现在我想在WebForm中使用它,并在代码隐藏文件中使用C#Code处理按钮事件。

第一个问题是,只要我将网页添加到表单,第一个表单的布局就会发生变化。这是为什么?

其次,按钮总是提供页面刷新。我怎么能避免这种情况?

这是我的网页代码:

<div class="uk-block uk-block-secondary uk-width-1-1">
    <div class="uk-grid uk-width-5-6 uk-container-center uk-grid-match" data-uk-grid-match="{target:'.uk-panel'}" data-uk-margin="{cls:'uk-margin-top'}">
        <div class="uk-width-small-1-1 uk-width-medium-1-1 uk-width-large-1-3">
            <div class="uk-width-1-1">
                <div class="uk-grid uk-grid-match" data-uk-grid-match="{target:'.uk-panel'}" data-uk-margin="{cls:'uk-margin-top'}">
                    <div class="uk-width-small-1-1 uk-width-medium-1-2 uk-width-large-1-1">
                         <div class="uk-panel uk-panel-box uk-panel-box-primary">
                            <form class="uk-form">
                                <fieldset data-uk-margin>
                                    <legend>User</legend>
                                    <div class="uk-form-row">
                                        <input type="text" placeholder="Username" OnKeyDown ="return (event.keyCode!=13);" class="uk-width-1-1">
                                    </div>
                                    <div class="uk-form-row">
                                        <input type="password" placeholder="Password" OnKeyDown ="return (event.keyCode!=13);" class="uk-width-1-1">
                                    </div>
                                    <div class="uk-form-row">
                                        <button class="uk-button uk-width-1-1">Login</button>
                                    </div>
                                </fieldset>
                            </form>
                        </div>
                    </div>
                    <div class="uk-width-small-1-1 uk-width-medium-1-2 uk-width-large-1-1">
                         <div class="uk-panel uk-panel-box uk-panel-box-primary">
                            <form class="uk-form">
                                <fieldset data-uk-margin>
                                    <legend>Search</legend>
                                    <div class="uk-form-row">
                                        <input type="text" placeholder="Forname" OnKeyDown ="return (event.keyCode!=13);" class="uk-width-1-1">
                                    </div>
                                    <div class="uk-form-row">
                                        <input type="text" placeholder="Name" OnKeyDown ="return (event.keyCode!=13);" class="uk-width-1-1">
                                    </div>
                                    <div class="uk-form-row">
                                        <input type="" data-uk-datepicker="{format:'DD.MM.YYYY'}" placeholder="Birthday" OnKeyDown ="return (event.keyCode!=13);" class="uk-width-1-1">
                                    </div>
                                    <div class="uk-form-row">
                                        <div class="uk-grid">
                                            <div class="uk-width-1-2">
                                               <button class="uk-button uk-width-1-1">Search</button>
                                            </div>
                                            <div class="uk-width-1-2">
                                                <button class="uk-button uk-width-1-1">Print</button>
                                            </div>
                                        </div>
                                    </div>
                                </fieldset>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="uk-width-large-2-3">
            <div class="uk-panel uk-panel-box uk-panel-box-primary">
                <div class="uk-grid">
                    <div class="uk-width-1-1">
                        <form class="uk-form">
                            <fieldset data-uk-margin>
                              <legend>Result</legend>
                            </fieldset>
                        </form>
                        <div style="visibility:visible">
                            <div class="uk-grid">
                                <div class="uk-width-1-1">
                                    <strong>Person</strong>
                                    <hr class="uk-margin-top-remove"/> 
                                </div>
                                <div class="uk-width-1-1">
                                    <div class="uk-grid uk-margin-top">
                                        <div class="uk-width-1-1">
                                            <div class="uk-grid">
                                                <div class="uk-width-large-1-4 uk-width-medium-1-3">
                                                    <strong>Forname:</strong>
                                                </div>
                                                <div class="uk-width-large-3-4 uk-width-medium-2-3">
                                                    Forname
                                                </div>
                                            </div>
                                        </div>
                                        <div class="uk-width-1-1">
                                            <div class="uk-grid">
                                                <div class="uk-width-large-1-4 uk-width-medium-1-3">
                                                    <strong>Name:</strong>
                                                </div>
                                                <div class="uk-width-large-3-4 uk-width-medium-2-3">
                                                    Name
                                                </div>
                                            </div>
                                        </div>
                                        <div class="uk-width-1-1" style="">
                                            <div class="uk-grid">
                                                <div class="uk-width-large-1-4 uk-width-medium-1-3">
                                                    <strong>Birthday:</strong>
                                                </div>
                                                <div class="uk-width-large-3-4 uk-width-medium-2-3">
                                                    01.01.1990
                                                </div>
                                            </div>
                                        </div>
                                        <div class="uk-width-1-1">
                                            <div class="uk-grid">
                                                <div class="uk-width-large-1-4 uk-width-medium-1-3">
                                                    <strong>Birthplace:</strong>
                                                </div>
                                                <div class="uk-width-large-3-4 uk-width-medium-2-3">
                                                    Birthplace
                                                </div>
                                            </div>
                                        </div>
                                        <div class="uk-width-1-1">
                                            <div class="uk-grid">
                                                <div class="uk-width-large-1-4 uk-width-medium-1-3">
                                                    <strong>Adress:</strong>
                                                </div>
                                                <div class="uk-width-large-3-4 uk-width-medium-2-3">
                                                    Streetname 2, 12345 Village
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="uk-grid">
                                <div class="uk-width-1-1">
                                    <strong>Newest Info</strong>
                                    <hr class="uk-margin-top-remove"/> 
                                </div>
                            </div>
                            <div class="uk-grid">
                                <div class="uk-width-1-1">
                                    <div class="uk-grid">
                                        <div class="uk-width-large-1-4 uk-width-medium-1-3 uk-width-small-1-1">
                                            Info1:
                                        </div>
                                        <div class="uk-width-large-1-4 uk-width-medium-2-3 uk-width-small-1-1">
                                            Info abcdefg 123456789
                                        </div>
                                        <div class="uk-width-large-1-4 uk-width-medium-1-3 uk-width-small-1-1">
                                            Info2:
                                        </div>
                                        <div class="uk-width-large-1-4 uk-width-medium-2-3 uk-width-small-1-1">
                                            Info abcdefg 123456789
                                        </div>
                                    </div>
                                </div>
                                <div class="uk-width-1-1">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

这是从http://getuikit.com/使用的css内容:

<link rel="stylesheet" href="css/uikit.gradient.css" />
<script src="js/jquery.js"></script>
<script src="js/uikit.min.js"></script>
<!-- CSS -->
<link rel="stylesheet" href="css/components/datepicker.gradient.css" />
<link rel="stylesheet" href="css/components/tooltip.gradient.css" />
<link rel="stylesheet" href="css/components/notify.gradient.css" />
<!-- Javascript -->
<script src="js/components/datepicker.js"></script>
<script src="js/components/tooltip.js"></script>
<script src="js/components/notify.js"></script>

有人知道如何解决这个问题吗?

0 个答案:

没有答案