below is my cshtml view
<!DOCTYPE html>
<html>
#model IEnumerable<Employee.Models.Family>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
#Scripts.Render("~/bundles/bootstrap")
#Scripts.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jqueryval")
#Scripts.Render("~/bundles/jquery")
</head>
<body>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<table class=" table table-striped">
<thead class="table table-striped">
<tr>
<th>
#Html.DisplayNameFor(model => model.FirstName)
</th>
<th>
#Html.DisplayNameFor(model => model.Occupation)
</th>
<th>
#Html.DisplayNameFor(model => model.Gender)
</th>
<th>
#Html.DisplayNameFor(model => model.DateOfBirth)
</th>
<th>
#Html.DisplayNameFor(model => model.Age)
</th>
<th>Actions</th>
</tr>
</thead>
<tbody class="table table-striped">
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.FirstName)
</td>
<td>
#Html.DisplayFor(modelItem => item.Occupation)
</td>
<td>
#Html.DisplayFor(modelItem => item.Gender)
</td>
<td>
#Html.DisplayFor(modelItem => item.DateOfBirth)
</td>
<td>
#Html.DisplayFor(modelItem => item.Age)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
#Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
#Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
</td>
</tr>
}
</tbody>
</table>
</body>
</html>
I am creating asp.net mvc application. using bundleconfig.cs file
below is the bundleconfig.cs file
using System.Web;
using System.Web.Optimization;
namespace Employee
{
public class BundleConfig
{
// For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/bootstrap.min.js"
));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/bootstrap-theme.css",
"~/Content/site.css"));
}
}
}
below is the UI where i am unable to see boostrap class stripped table applied
Created new asp.net mvc application so already have bootstrap - css content script exist in project
Let me know if more information required.
Related
I populate this table from an API and try to do a multiple lookup filter from one entry separating each entry by a comma.
they load the data correctly but when trying to search it does nothing
Is this code any good or how could I do a multiple search from one input?
View
File ApiControllers.js
<script>
var testApp = angular.module("LogModule", []);
testApp.controller("TransController", function ($scope, $http) {
$http.get('/api/Trans').then(function (response) {
$scope.logTrans = response.data;
$scope.Show = [];
$scope.separator = ""
$scope.buscar = function () {
let search = $scope.separator.split(",");
$scope.Show =
$scope.logTrans
.filter((item) => {
let a = search.map((value) => {
return JSON.stringify(item)
.toUpperCase()
.indexOf(value.toUpperCase()) > -1 ? 1 : 0;
}).reduce((x, y) => x + y);
return a > 0
})
}
$scope.searchInput()
});
});
File html
<!DOCTYPE html>
<html ng-app="LogModule">
<head>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/ApiCotrollers.js"></script>
<link />
</head>
<body>
<h1>Consulta de transacciones</h1>
<div ng-app="LogModule" class="table-responsive" ng-controller="TransController">
<input type="text" ng-model="filter" ng-change="searchInput()" class="form-control" placeholder="Buscar documentos" aria-describedby="basic-addon2 ">
<br>
<table class="table table-bordered table-hover" align="center">
<tr class="active">
<th> Registro</th>
<th> FechaInsert</th>
<th> FechaModificacion</th>
<th>Observaciones</th>
<th> IdIntegracion</th>
<th>Integrado</th>
<th> Error</th>
<th>ObjetoIntegracion</th>
<th> Bodega</th>
</tr>
<tr ng-repeat=" p in Show track by $index">
<td class="success"> {{p.Registro}}</td>
<td class="success"> {{p.FechaInsert}} </td>
<td class="success"> {{p.FechaModificacion}} </td>
<td class="danger"> {{p.Observaciones}} </td>
<td class="success">{{p.IdIntegracion}} </td>
<td class="success"> {{p.Integrado}} </td>
<td class="success"> {{p.Error}} </td>
<td class="danger"> {{p.ObjetoIntegracion}}</td>
<td class="success">{{p.Bodega}}</td>
</tr>
</table>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
</body>
</html>
I'm creating an HTML form that lists line items from one organization that need to be mapped to another on. My idea was to take the id of the selected option, and pass that to the action via Html.Action. This is the code I have so far;
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.newID)
</th>
<th>
#Html.DisplayNameFor(model => model.oldserviceid)
</th>
<th>
#Html.DisplayNameFor(model => model.description)
</th>
<th>
#Html.DisplayNameFor(model => model.Avg)
</th>
<th>
#Html.DisplayNameFor(model => model.Count)
</th>
<th>
#Html.DisplayNameFor(model => model.acquisitionid)
</th>
<th></th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#* This is where I'm stuck *#
<form action=#Html.Action("Update", new { linemappingID = #item.LineMapID, newID = /*what goes here?*/ }) method="post" onsubmit="return updateForm()" id="#item.LineMapID">
<input list="serviceList" name="serviceList">
<datalist id="serviceList">
#foreach (var serv in ViewBag.serviceList)
{
#* Pass the ID value from here to the Html.Action *#
<option value="#serv.serviceid - #serv.servicedesc" id="#serv.serviceid">#serv.serviceid - #serv.servicedesc</option>
}
</datalist>
<input type="submit" value="update" />
</form>
</td>
<td>
#Html.DisplayFor(modelItem => item.oldserviceid)
</td>
<td>
#Html.DisplayFor(modelItem => item.description)
</td>
<td>
$#Html.DisplayFor(modelItem => item.Avg)
</td>
<td>
#Html.DisplayFor(modelItem => item.Count)
</td>
<td>
#Html.DisplayFor(modelItem => item.acquisitionid)
</td>
</tr>
}
</table>
I have a table in my view with a column of Checkboxes. I want the user to be able to select as many Checkboxes as they'd like and click a button at the bottom to deactivate them (Users in this model can be suspended/deactivated and reinstated/activated). I don't have any errors, but nothing is happening when I click on the buttons. I attached my code below. Thanks.
View
#using (Html.BeginForm("CheckBoxDeactivate"))
{
<table class="table">
<tr>
<th>
Select Users
</th>
<th>
#Html.DisplayNameFor(model => model.ID)
</th>
<th>
#Html.DisplayNameFor(model => model.FirstName)
</th>
<th>
#Html.DisplayNameFor(model => model.LastName)
</th>
<th>
#Html.DisplayNameFor(model => model.Email)
</th>
<th>
#Html.DisplayNameFor(model => model.UserName)
</th>
<th>
#Html.DisplayNameFor(model => model.suspended)
</th>
<th></th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
<input type= "checkbox" name="manageUsers" value="#item.ID" />
</td>
<td>
#Html.DisplayFor(modelItem => item.ID)
</td>
<td>
#Html.DisplayFor(modelItem => item.FirstName)
</td>
<td>
#Html.DisplayFor(modelItem => item.LastName)
</td>
<td>
#Html.DisplayFor(modelItem => item.Email)
</td>
<td>
#Html.DisplayFor(modelItem => item.UserName)
</td>
<td>
#Html.DisplayFor(modelItem => item.suspended)
</td>
</tr>
}
</table>
<br />
<input type="button" value="Add Roles" onclick="location.href'#Url.Action("CheckBoxDeactivate", "User")'" />
Controller
[HttpPost]
public ActionResult CheckBoxDeactivate(int[] ids)
{
tbl_Reg_User OAWUser = new tbl_Reg_User();
foreach (var id in ids)
{
OAWUser = db.tbl_Reg_User.Single(o => o.ID == id);
OAWUser.suspended = true;
db.SaveChanges();
}
ViewBag.Message = "Users deactivated successfully!";
return View();
}
<input type= "checkbox" name="manageUsers" value="#item.ID" />
This line should be
<input type= "checkbox" name="ids" id="ids" value="#item.ID" />
I think you are not getting the selected checkboxes in controller.
View
#using (Html.BeginForm("CheckBoxDeactivate","Home"))
{
<table class="table" border="1" style="border:1px solid black;border-collapse:collapse;">
<tr>
<th>Select Users
</th>
<th>
Sr.No.
</th>
<th>
FirstName
</th>
<th>
LastName
</th>
<th>
Phone
</th>
<th>
IsActive
</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
<input type= "checkbox" name="ids" id="ids" value="#item.Sr_No" />
</td>
<td>
#item.Sr_No
</td>
<td>
#item.FirstName
</td>
<td>
#item.LastName
</td>
<td>
#item.Phone
</td>
<td>
#item.IsActive
</td>
</tr>
}
</table>
<br />
<input type="submit" value="Add Roles" onclick="#Url.Action("CheckBoxDeactivate", "User")" />
}
Controller
[HttpPost]
public ActionResult CheckBoxDeactivate(int[] ids)
{
Temp OAWUser = new Temp();
if (ids != null)
{
foreach (var id in ids)
{
//Your code goes here
}
ViewBag.Message = "Users deactivated successfully!";
}
return RedirectToAction("Temp");
}
This piece of code did the job for me
I have Html code that generates a table that contains a lot of records.
Here is the code:
#model IEnumerable<UserContact>
#{
ViewBag.Title = "Contacts:";
}
<h2>
Contacts</h2>
<table>
<tr>
<th>
#Html.DisplayText("First Name")
</th>
<th>
#Html.DisplayText("First Name")
</th>
<th>
#Html.DisplayText("Email")
</th>
<th>
</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.CheckBox("misha", new { onclick = "this.form.submit();" })
</td>
<td>
#Html.DisplayFor(modelItem => item.firstName)
</td>
<td>
#Html.DisplayFor(modelItem => item.lastName)
</td>
<td>
#Html.DisplayFor(modelItem => item.email)
</td>
</tr>
}
</table>
This code is contained in razor partial view page.
My question is how can I create paging in table that described above?
As per your comment i m showing complete example of datatable here :
Jquery and CSS References :-
Links :-
http://code.jquery.com/jquery-1.11.1.min.js
http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js
http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css
Your Partial View :-
#model IEnumerable<UserContact>
#{
ViewBag.Title = "Contacts:";
}
<h2>
Contacts</h2>
<table id="mydatatable">
<thead>
<tr>
<th>
#Html.DisplayText("First Name")
</th>
<th>
#Html.DisplayText("First Name")
</th>
<th>
#Html.DisplayText("Email")
</th>
<th>
</th>
</tr>
<thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
#Html.CheckBox("misha", new { onclick = "this.form.submit();" })
</td>
<td>
#Html.DisplayFor(modelItem => item.firstName)
</td>
<td>
#Html.DisplayFor(modelItem => item.lastName)
</td>
<td>
#Html.DisplayFor(modelItem => item.email)
</td>
</tr>
}
<tbody>
</table>
<script type="text/javascript">
$(document).ready(function(){
$('#mydatatable').dataTable();
});
</script>
Last but not the least don't forget to add references of required jquery files on your page.
//cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css
//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js
/////////////////////////////////////
<table id="myTable">
<tr>
<th>
#Html.DisplayText("First Name")
</th>
<th>
#Html.DisplayText("First Name")
</th>
<th>
#Html.DisplayText("Email")
</th>
<th>
</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.CheckBox("misha", new { onclick = "this.form.submit();" })
</td>
<td>
#Html.DisplayFor(modelItem => item.firstName)
</td>
<td>
#Html.DisplayFor(modelItem => item.lastName)
</td>
<td>
#Html.DisplayFor(modelItem => item.email)
</td>
</tr>
}
</table>
<script type="text/javascript">
$(document).ready(function(){
$('#myTable').dataTable();
});
</script>
I have created a search function on my website that uses a partial view for users to input their search criteria, the results of the search should be displayed on the results page. My issues is that when the search is run the results page doesn't display instead I get a Server Error in '/' Application. error.
Any help would be great full
_SearchView
#using (Html.BeginForm("Results", "Search", FormMethod.Get))
{
<div class="search-button1">
<input type="text" class="form-control" placeholder="Search" name="SearchString" id="SearchString">
</div>
}
Search Controller
namespace BiteWebsite.Controllers
{
public class SearchController : Controller
{
//
// GET: /Search/
public ActionResult _SearchView()
{
return View();
}
[HttpPost]
public ActionResult Results(string SearchString)
{
using (var objCtx = new ApplicationDbContext())
{
var Restaurant = from u in objCtx.Restaurants
select u;
if (!String.IsNullOrEmpty(SearchString))
{
Restaurant = Restaurant.Where(s => s.Name.Contains(SearchString));
}
return View(Restaurant);
}
}
}
}
Results page
#model IEnumerable<BiteWebsite.Models.Restaurant>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.Name)
</th>
<th>
#Html.DisplayNameFor(model => model.Cuisine)
</th>
<th>
#Html.DisplayNameFor(model => model.StreetNumber)
</th>
<th>
#Html.DisplayNameFor(model => model.StreetName)
</th>
<th>
#Html.DisplayNameFor(model => model.County)
</th>
<th>
#Html.DisplayNameFor(model => model.PostCode)
</th>
<th>
#Html.DisplayNameFor(model => model.Contactnumber)
</th>
<th>
#Html.DisplayNameFor(model => model.Website)
</th>
<th>
#Html.DisplayNameFor(model => model.UserID)
</th>
<th></th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.Cuisine)
</td>
<td>
#Html.DisplayFor(modelItem => item.StreetNumber)
</td>
<td>
#Html.DisplayFor(modelItem => item.StreetName)
</td>
<td>
#Html.DisplayFor(modelItem => item.County)
</td>
<td>
#Html.DisplayFor(modelItem => item.PostCode)
</td>
<td>
#Html.DisplayFor(modelItem => item.Contactnumber)
</td>
<td>
#Html.DisplayFor(modelItem => item.Website)
</td>
<td>
#Html.DisplayFor(modelItem => item.UserID)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id=item.id }) |
#Html.ActionLink("Details", "Details", new { id=item.id }) |
#Html.ActionLink("Delete", "Delete", new { id=item.id })
</td>
</tr>
}
</table>