我有这个用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>
有人知道如何解决这个问题吗?