How to change html so all newly added Views like Edit, Detail, list Views have that html instead of default html.
e.g. Instead default html (below one)
<h3>ListPage</h3>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.PO_PoolName)
</th>
<th>
#Html.DisplayNameFor(model => model.PO_Code)
</th>
</tr>
</table>
I want following html by default
<h3 class="page-header">ListPage</h3>
<div class="section-container section-with-top-border">
<!-- begin panel -->
<div class="panel pagination-inverse m-b-0 clearfix">
<div class="row">
<div class="col-lg-12">
<span class="pull-right ">
<a href="/Pools/Create" class="btn btn-lime btn-sm">
<i class="fa fa-fw fa-plus"></i>
Create New
</a>
</span>
</div>
</div>
<table id="data-table" data-order='[[1,"asc"]]' class="table table-bordered table-hover">
<thead>
<tr class="inverse">
<th>#Html.DisplayNameFor(model =>model.PO_PoolName)</th>
<th>#Html.DisplayNameFor(model => model.PO_Code)</th>
</tr>
</table>
Thanks in Advance
I find the solution
I modified and change the html of the t4 templates in the below directory
C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web\Mvc\Scaffolding\Templates\MvcView
which work fine for me.
Related
I have a serious problem with data list I HATE IT so much. I have a list of data that displays cart items in a table.. basic right?
Sure, but not for data list! its like data list says I MUST DESTROY YOU. The data list does not show any items that I should display!
Here are some screenshots that will let you understand my issue here.
So basically the items are displayed in VS, but in the web application it doesn't.
PLEASE HELP :(
Here is the code:
<div class="container-sm cart-page">
<table>
<tr>
<th>المنتج</th>
<th>الكمية</th>
<th>السعر الفرعي</th>
</tr>
<asp:DataList ID="DataList1" runat="server" RepeatColumns="1" RepeatLayout="Flow">
<ItemTemplate>
<tr>
<td>
<div class="cart-info">
<img src="http://bestjquery.com/tutorial/product-grid/demo8/images/img-1.jpg" alt="camera">
<div>
<p>Camera 211</p>
<small>السعر: 50 ر.س.</small>
<br>
حذف
</div>
</div>
</td>
<td>
<input type="number" value="1" min="1" max="10"></td>
<td>50 ر.س.</td>
</tr>
</ItemTemplate>
</asp:DataList>
</table>
<div class="total-price">
<table>
<tr>
<td class="titles">السعر الفرعي</td>
<td>150 ر.س.</td>
</tr>
<tr>
<td class="titles">VAT</td>
<td>22.50 ر.س.</td>
</tr>
<tr>
<td class="titles">المجموع</td>
<td>172.50 ر.س.</td>
</tr>
<tr>
<td>
<a href="store.aspx">
<button type="submit" class="btn btn-primary btn-continue-shopping">إكمال التسوق</button>
</a>
</td>
<td>
<a href="checkout.aspx">
<button type="submit" class="btn btn-primary btn-checkout">إكمال الدفع</button>
</a>
</td>
</tr>
</table>
</div>
</div>
You need to set the DataSource property with some list or table of data.
Here is a link to the MSDN article: https://learn.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.basedatalist.datasource?view=netframework-4.8#System_Web_UI_WebControls_BaseDataList_DataSource
What is your data source? Are you using a database?
If you do not have a database you can mockup a dataset in XML, JSON, or CSV and then deserialize into your code.
I believe that you can bind anything that implements IList.
Needed some assistance,
Please look at the picture below, as you can see, When I click the input which has calender, the calender pop up inside the table and it generates a scroll bar which I have to scroll down to see the bottom calender, how do I make sure it is send to front which will show the entire calender outside that table ?
Thanks!
Calender CSS: https://github.com/benitolopez/hotel-datepicker/tree/master/dist
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><i class="fa fa-shopping-cart"></i> Shopping cart</h4>
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<td class="text-center"></td>
<td class="text-center">Image</td>
<td class="text-left">Product Name</td>
<td class="text-left">Rental Period</td>
<td class="text-left">Rental Rate</td>
<td class="text-left">Deposit Amount</td>
<td class="text-right">Total</td>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center"><p></p><button type="button" data-toggle="tooltip" title="Remove" class="btn btn-danger" onClick=""><i class="fa fa-times-circle"></i></button></td>
<td class="text-center"><img width="60px" src="image/demo/shop/product/E4.jpg" alt="Xitefun Causal Wear Fancy Shoes" title="Xitefun Causal Wear Fancy Shoes" class="img-thumbnail"></td>
<td class="text-left">Emasa rumas gacem</td>
<td class="text-left"><div class="input-group btn-block" style="min-width: 100px;">
<form method="POST" action="checkout.html">
<input type="text" name="input-id" id="input-id" value="" class="form-control">
</form>
<span class="input-group-btn">
<button type="submit" data-toggle="tooltip" title="Update" class="btn btn-primary"><i class="fa fa-refresh"></i></button>
</span></div></td>
<td class="text-right">$114.35</td>
<td class="text-right">$114.35</td>
<td class="text-right">$114.35</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="text-right" colspan="1"><strong>Meeting Location:</strong></td>
<td class="text-left" colspan="6">$93.73</td>
</tr>
<tr>
<td class="text-right" colspan="6"><strong>Total Amount Payable:</strong></td>
<td class="text-right">$121.85</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
Update:
I removed the "position" in the css of the calender and it now looks like this.
Everytime the calender pop up, the table will adjust/squeeze to fit the calender, how to make sure that calender just shows without changing the size of the table?
Thanks!
There is a mvc application, in which I am trying to modify in pre-compiled CSHTML page(Index.cshtml)
#using System.Web.Mvc.Html
#model Services.Admin.ViewModels.IndexViewModel
#{
Layout = "~/Views/Admin/_Layout.cshtml";
ViewBag.Title = Resources.AdminResources.Index_Title;
}
<div class="container">
<div class="masonry">
<div class="item col-lg-4 col-md-4 col-sm-4">
<h3>Event Clinics</h3>
<table class="table table-striped table-bordered table-hover">
<tbody>
<tr>
<td class="max-width">
#Html.ActionLink("Premier Instructors", "Index", "PremierInstructor")
</td>
<td></td>
</tr>
<tr>
<td class="max-width">
#Html.ActionLink("Reports", "Index", "Reports")
</td>
<td></td>
</tr>
<tr>
<td class="max-width">
#Html.ActionLink("Users", "Index", "Users")
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
Here is also respective Index.generated.cs, in which all code is written with help of "WriteLiteral".
When I am trying to add/modify in .cshtml form, it's impact not showing on UI.
I have also find out on various sites and found that these cshtml is already compiled using "RazorGenerator" tools.
Now My problem is this, when I am going to make any changes in this type of cshtml file, it is not reflected on screen.
In case of RazorGenerator based pre-compiled .cshtml forms as there is need to modify it's html then follow below steps.
Right Click on .chstml file (ex. index.cshtml).
Click on "Properties".
Under "Advanced" section remove "RazorGenerator" from "Custom Tool" option.
DO CHANGES IN CSHTML FILE.
Again follow above 1,2 steps.
Under "Advanced" section add "RazorGenerator" in "Custom Tool" option.
Save form and run it.
Now you will be seeing all the changes in UI.
I'm coding a web page using C# MVC and AngularJS, and i need tomake a horizontal list of radio buttons (and check cuttons) with labels assigned to them. the problem is that they are presented in a vertical list, in every way that I try.
I've tried:
<div align="center">
<label class="col col-20" style="display:inline" align="center"><input id="WeekRad" align="center" type="radio" style="display:inline" ng-model="Week" ng-click="ThisWeek()" />This Week</label>
<label class="col col-20" style="display:inline" align="center"><input id="DatesRad" align="center" type="radio" style="display:inline" ng-model="Dates" ng-click="BetweenDates()" />Between Dates</label>
</div>
I've also tried:
<span>
<ul>
<li style="display:inline">
<label class="col col-20" style="display:inline" align="center"><input id="WeekRad" align="center" type="radio" style="display:inline" ng-model="Week" ng-click="ThisWeek()" />This Week</label>
</li>
<li style="display:inline">
<label class="col col-20" style="display:inline" align="center"><input id="DatesRad" align="center" type="radio" style="display:inline" ng-model="Dates" ng-click="BetweenDates()" />Between Dates</label>
</li>
</ul>
</span>
I've tried with and without <span> and with and without labels, with and without style="display:inline" but each time it remained vertical.
Finally got the soluton:
<div class="row" align="center" style="margin:auto; max-width:300px">
<div class="col-lg-6" align="center">
<div class="input-group" align="center">
<span class="input-group-addon" align="center">
<label class="col col-20" style="display:inline" align="center">
<input id="WeekRad" align="center" type="radio" style="display:inline" />This Week
</label>
</span>
</div>
</div>
<div class="col-lg-6" align="center">
<div class="input-group" align="center">
<span class="input-group-addon" align="center">
<label class="col col-20" style="display:inline" align="center">
<input id="DatesRad" align="center" type="radio"/>Between dates
</label>
</span>
</div>
</div>
</div>
Give a width to outer div and place the radio buttons in inside div's.
Play around the width to adjust the alignment.
<div align="center" style="width:***px">
<div style="float:left; width:48%">
**radio
</div>
<div style="float:left; width:48%">
**radio
</div>
</div>
this should work
In my web page i am using panel then div. panel is loading first and then div tag, but I want two at a time. I tried Ajax update process and java script Loading image but not working.
please help me.
<div class="container-fluid contentStart" >
<div class="row-fluid">
<div data-layout='{"type": "border", "hgap": 3, "vgap": 3}' class="layout mailVertical">
<asp:Panel ID="pnlRefDet" runat="server" class="layout mailVertical" >
....
</asp:panel>
<div class="west" style="background-color:#FAFAFA; width:32%" runat="server" id="divMessageInbox">
.....
</div>
</div>
</div>
</div>
You can put both in table then it will load at once
<table>
<tr>
<td>
panel goes here
</td>
</tr>
<tr>
<td>
div goes here
</td>
</tr>
</table>