I am using - Bootstrap table
I cannot figure out, how do i pass a model to the data-url property of bootstrap-table ?
My Razor Code:
#model IEnumerable<MyModel>
<table id="myTable" data-url=......">
<thead>
<tr>
<th data-field="MyProperty">
Some Example
</th>
<th data-field="MyProperty2">
Some Example
</th>
<th data-field="MyProperty3">
Some Example
</th>
</tr>
</thead>
</table>
My Controller Code - just in case.
[HttpGet]
public ActionResult GetMyValues()
{
List<MyTable> myList = myObj.GetValues();
return PartialView("MyPartialView", myList);
}
You will need to convert your Model i.e IEnumerable using below code
var data = #Html.Raw(Json.Encode(#Model));
then bind this data to html table
$(function () {
$('#table').bootstrapTable({
data: data
});
});
Related
I have a Vue3 component which make an ajax request to server which sends array with articles back. Then I need to render the html table according the filled model via v-for and then init DataTable via DataTable() call on this rendered table. But it seems the problem is that DataTable() call runs before html table is rendered so the table is empty.
The ajax code looks like:
getArticles()
{
axios.get( apiRoutes.ARTICLES_URL )
.then((response) => {
let data = response.data.articles;
// Fill the model
this.articles = data;
// Init DataTable
$('#dataTable').DataTable({ ... });
//setTimeout(this.setDataTable, 3000); // This works but want to avoid it.
})
},
The template code
<template>
<div class="table-responsive">
<table :id="id" class="table table-bordered nowrap" width="100%;">
<thead>
<tr>
<th>id</th>
<th>Title</th>
<th>Created</th>
<th>Visible</th>
<th>User</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="article in articles" :key="article.id">
<td>{{article.id}}</td>
<td>{{article.title}}</td>
<td data-order='{{article.created_at}}'>{{getCreatedAt(article.created_at)}}</td>
<td>{{article.visible}}</td>
<td>{{article.user.name}}</td>
<td>
{{article.visible === 1 ? 'hide' : 'show'}}
delete
</td>
</tr>
</tbody>
</table>
</div>
The question is how to properly wait for the render is done? Thanks for any help.
So if I understand it I need to use $nextTick() which will wait while the DOM render is done.
I have a view in MVC4 that looks like this:
#model List<Home.Models.Model>
#{
ViewBag.Title = "DPR";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#using (Html.BeginForm("AgendaNotes", "Home", FormMethod.Post, new { #id = "formDPR"}))
{
<table style="font-size:xx-small">
<thead>
<tr>
<th>Name</th>
<th>DOD ID</th>
<th>Last Review</th>
<th>Include?</th>
<th>Reason</th>
<th>Notes</th>
</tr>
</thead>
</table>
<div style="background-color:white">
#Html.EditorForModel()
</div>
<div>
</div>
}
And the model.cshtml is simply some of the fields in a single row. I don't want to put headers on that single row as they are repeated as many times as their are in the list. Is there a simple way to make a header for the rows of the model in the editorfor template?
This is how I did it:
<table style="font-size:xx-small" class="table_body">
<thead>
<tr>
<th>Name</th>
<th>DOD ID</th>
<th>Last Review</th>
<th>Include?</th>
<th>Reason</th>
<th>Notes</th>
</tr>
</thead>
#for (var i = 0; i < Model.Count; i++)
{
<tr>
#Html.EditorFor(m=>Model[i])
</tr>
}
</table>
And in the model.cshtml it simple some of the fields each in a TD element.
Not 100% sure that I understand you correctly. Create the table header in the view, then call the EditorTemplate in a for each
#using (Html.BeginForm("AgendaNotes", "Home", FormMethod.Post, new { #id = "formDPR" }))
{
<table style="font-size:xx-small">
<thead>
<tr>
<th>Name</th>
<th>DOD ID</th>
<th>Last Review</th>
<th>Include?</th>
<th>Reason</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.Details)
{
#testTemplate(item)
}
</tbody>
</table>
}
Then change the editor template to be for only one row eg.
#helper testTemplate(Details detail)
{
<tr>
<td>#detail.Propery1</td>
<td>#detail.Propery2</td>
</tr>
}
I used an inline helper just to illustrate what I mean. Now you should have a table with one header and lots of rows
FIXED
what i want to do is a viewpage that contains accountslist by clicking on any of account name it should open selected accountid Payablerecords and Reciveablerecords. Note:Payables and Receivables are two Propertiest Taken From same DataModel tbl_Transaction(Which is collection).So can i get Id for collections?
I am getting the Selected AccountID records in Payable view but I cant get the same id related record in Reciveable view plz help me out.
Here is the code.
public class AccountsController : Controller
{
private AccountBs objBs;
public AccountsController()
{
objBs = new AccountBs();
}
// GET: Shinwari/Accounts
public ActionResult Index()
{
var accounts = objBs.GetALL();
return View(accounts);
}
<%=#model IEnumerable<BOL.tbl_Accounts>
#{
ViewBag.Title = "Index";
}
<h2>Accounts</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.Name)
</th>
<th>
#Html.DisplayNameFor(model => model.Contact)
</th>
<th>
#Html.DisplayNameFor(model => model.Discription)
</th>
<th></th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.ActionLink(item.Name, "Index", "AccountDetailPayable", new {accountid=item.AId },null)
#*#Html.DisplayFor(modelItem => item.Name)*#
</td>
<td>
#Html.DisplayFor(modelItem => item.Contact)
</td>
<td>
#Html.DisplayFor(modelItem => item.Discription)
</td>
}
</table>%>
ReciveableAndPayablecontroller
private TransictionBs objbs;
public Details()
{
objbs = new TransictionBs();
}
// GET: Shinwari/AccountDetails
[HttpGet]
public ActionResult Index(int accountid)
{
ADetailsVm v = new ADetailsVm();
//Load both the collection properties
v.Payables = objbs.GetALL().Where(p => p.AId == accountid && p.tbl_TransictionType.Type.Contains("Payable")).ToList();
v.Reciveables = objbs.GetALL().Where(r => r.AId==accountid && r.tbl_TransictionType.Type.Contains("Reciveable")).ToList();
return View(v);
Veiw
#model BOL1.ADetailsVm
#{
ViewBag.Title = "Index";
}
<h2>AccountDetails</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<table id="Payables" class="table">
<tr>
<th>
Date
</th>
<th>
Discription
</th>
<th>
Amount
</th>
</tr>
#foreach (var item in Model.Payables)
{
<tr>
<td>
#item.Date
</td>
<td>
#item.TDiscription
</td>
<td>
#item.Amount
</td>
</tr>
}
</table>
**Note Payable and reciveable both views are identical **
TO have same table work like 2 different properties you need to create new model class, In my case it is as following..
public ADetailsVm
{
List<tbl_Transiction>Payables{get;set;}
List<tbl_Transiction>Reciveables{get;set;}
}
And then add the following class to DBContext Class ... it would be like
public DbSet<ADetailsVm>ADetailsVm{get;set;}
You have to create new class where you need to add two lists as following.
public NewClass
{
List<tbl_Transiction>Payables{get;set;}
List<tbl_Transiction>Reciveables{get;set;}
}
and Add the class to your DbContext Class as follows.
public DbSet<NewClass>PayablesAndReceiveables{get;set;}
And loop your newly created lists objects in View where you need them.
In my project, I want to extract all the fields, facilities, tanks from db based on BlockID. For each category like fields, facilities, tanks I prepared a partial view. When I run the solution, I am able to retrieve only the fields related to block in the dropdown control. I want to display all the fields' data related to that block in the partialview and also fill them in the dropdown. I could see the data in .cshtml files, but I am unable to render them on UI. Please help me.
// Controller Action
public PartialViewResult FieldsOfBlock(long blockid)
{
FacilityModel bkvm = new FacilityModel();
var fields = bkvm.FieldList(blockid); // comes from backend
ViewBag.Data = fields;
return PartialView("_PartialField");
}
// PartialView
#model List<ABC.Models.Field>
#{
var data = ViewBag.Data as List<ABC.Models.Field>;
}
<div class="table-responsive col-lg-12 margintop20">
<table class="table table-bordered table-hover" id="myTableDataField">
<thead>
<tr>
<th>Field Name</th>
</tr>
</thead>
<tbody>
#{
if(data.Count!=0)
{
foreach (var item in data)
{
<tr>
<td>#item.Name</td>
</tr>
}
}
}
</tbody>
</table>
</div>
Thanks in advance.
I am new to MVC 4 and I am stuck in a Problem, I have bound a table dynamically with some data from database as following on cshtml page
<table id="tblFeature">
<tr>
<th>
Include
</th>
<th>
Facilities
</th>
<th>
Description
</th>
</tr>
#foreach (var feature in Model)
{
<tr>
<td>#Html.EditorFor(item => feature.Checked)
</td>
<td>#Html.DisplayFor(item => feature.Name)
</td>
<td>#Html.TextAreaFor(item => feature.Description, 2, 70, null)
</td>
</tr>
}
</table>
Now I want to update the values like ,check or uncheck the checkbox,update the description in text area etc., in order to achieve that i need to add the updated values in the list in controller class and then I will update those values in database. but i don't know how to achieve that, it is something like following in plain english
foreach(feature in tblFeature)
{
if(feature is checked)
{
featureList.add(feature)
}
}
any help will be appreciated. thanks.
Change View for correct binding:
#using (Html.BeginForm("Save", "Controller"))
{
<table id="tblFeature">
<tr>
<th>
Include
</th>
<th>
Facilities
</th>
<th>
Description
</th>
</tr>
#for (int i = 0; i < Model.Count(); i++)
{
<tr>
#Html.HiddenFor(m => m[i].ProductSizeID)
<td>#Html.EditorFor(m => m[i].Checked)
</td>
...
</td>
</tr>
<input type="submit" value="save"/>
}
Post in Controller and save change
[HttpPost]
public ActionResult Save(IEnumerable<feature> ViewModels)
{
foreach (var feature in ViewModels)
{
if(feature.Checked)
{
featureList.add(feature)
}
}
}