I'm using j_query data_tables for searching in M_V_C, and want to be able to sort the table using my buttons outside the table. and want to sort by profession. How can I do it?
i have used Ajax.ActionLink fro my buttons:
<pre>
<div class="personal_types">
#*<button type="button" class="btn btn-default active">All</button>*#
#Ajax.ActionLink(
"All",
"AllStaff",
"Staff",
new AjaxOptions { UpdateTargetId = "result" },
new { #class = "btn btn-default default" }
)
#Ajax.ActionLink(
"Managers",
"StaffPosition",
"Staff",
new { id = 2 },
new AjaxOptions { UpdateTargetId = "result" },
new { #class = "btn btn-default default" }
)
</div>
<div id="result">
<div class="manage_list">
<table class="table table-hover" id="_staff">
<thead>
<tr>
<th width="5%">Code</th>
<th width="24%">Full Name</th>
<th width="15%">Position</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<th scope="row">#item.user_id</th>
<td>#item.full_name</td>
<td>#item.group_name_geo</td>
<td>#item.shop_name</td>
<td>#item.reg_date</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</pre>
Related
I'm developing a web application where I want to populate some field if I type computer_number I want to populate staff_old_name field that will select from staffs table.
This is what I've tried:
Template
<div>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Computer Number</th>
<th>Old Name</th>
<th>New Name</th>
<th>Remarks</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr v-for="(staff, index) in staffs">
<td>
<span v-if="staff.editmode"><input class="form-control" v-model="staff.computer_number"/></span>
<span v-else>{{staff.computer_number}}</span>
</td>
<td>
<span v-if="staff.editmode"><input class="form-control" v-model="staff.old_name"/></span>
<span v-else>{{staff.old_name}}</span>
</td>
<td>
<span v-if="staff.editmode"><input class="form-control" v-model="staff.new_name"/></span>
<span v-else>{{staff.new_name}}</span>
</td>
<td>
<span v-if="staff.editmode"><input class="form-control" v-model="staff.remarks"/></span>
<span v-else>{{staff.remarks}}</span>
</td>
<td>
<span v-if="!staff.editmode"><button class="btn btn-info" type="button" #click="edit(staff)">Edit</button></span>
<span v-else><button class="btn btn-success" type="button" #click="save(staff)">Save</button></span>
<span><button type="button" class="btn btn-danger" #click="remove(index)"><i class="fa fa-trash"></i></button></span>
</td>
</tr>
</tbody>
</table>
<div class="box-footer">
<button class="btn btn-info" type="button" #click="cloneLast">Add Row</button>
</div>
</div>
Script
export default {
data() {
return {
staffs: [],
data_results: []
}
},
computed:{
autoComplete(){
this.data_results = [];
if(this.computer_number.length > 2){
axios.get('/api/staffs/autocomplete',{params: {computer_number: this.computer_number}}).then(response => {
console.log(response);
this.data_results = response.data;
});
}
}
},
methods: {
edit :function(obj){
this.$set(obj, 'editmode', true);
},
save : function(obj){
this.$set(obj, 'editmode', false);
},
remove: function(obj){
this.staffs.splice(obj,1);
},
cloneLast:function(obj){
//var lastObj = this.staffs[this.staffs.length-1];
//lastObj = JSON.parse(JSON.stringify(lastObj));
obj.editmode = true;
this.staffs.push(obj);
},
},
created() {
axios.get('/staff-names')
.then(response => this.staffs = response.data);
},
}
when I type the computer number I want the staff_old_name field populated base on staff name which is stored in staffs table.
i am use asp.net core 1.0 and in this i want to add client confirmation on delete record
my code belowe
#model IEnumerable<Login.Model.UserAccount>
#{
ViewData["Title"] = "Home Page";
}
<div class="row">
<div class="col-md-12">
<h2>Registered user</h2>
#if (Model.Any())
{
<table class="table">
<tr>
<th>First name</th>
<th>Last Name</th>
<th>EmaiID</th>
<th>Use Name</th>
<th></th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>#item.FirstName</td>
<td>#item.LastName</td>
<td>#item.Email</td>
<td>#item.UserName</td>
<td>
<a asp-action="Edit" asp-route-id="#item.UserID">Edit</a> |
<a asp-action="Delete" asp-route-id="#item.UserID">Delete</a>
</td>
</tr>
}
</table>
}
else
{
<p> There is no registered users.</p>
}
</div>
</div>
in above code delete operation perform successfully but i want to add add client confirmation before delete, if action ok than delete and if action cancle than not delete.
function ConfirmDelete()
{
var x = confirm("Are you sure you want to delete?");
return X;
}
<input type="button" Onclick="ConfirmDelete()">
I have been researching and trying multiple failed attempts FOR DAYS to get my partial view to display within my main view using Ajax.actionlink. When using the developer tools and viewing the Network tab, I do see the request. When clicking on Preview, I can see the correct data within the partial view. No jQuery errors.
View
#model IEnumerable<NS.Models.FeeAuth>
#using (Html.BeginForm())
{
<p>
<span class="glyphicon glyphicon-search"></span> Find by Last Name: #Html.TextBox("SearchString")
<input type="submit" value="Search" />
</p>
}
<div class="table-responsive">
<table class="table table-condensed" style="border-collapse:collapse;">
<tr>
<th>
#Html.LabelFor(m => m.First().ID)
</th>
<th>
#Html.ActionLink("Request ID", "ApprovalIndex", new { sortOrder = ViewBag.RequestIDSortParam })
</th>
<th>
#Html.Label("emplid", "Student Emplid")
</th>
</tr>
#{int i = 0;}
#foreach (var item in Model)
{
<tr data-toggle="collapse" data-parent="#collapse1_#i" data-target="#collapse1_#i" class="accordion-toggle">
<td>
#Ajax.ActionLink(Html.Encode(item.ID),
"SelectedSTRMS",
"FeeAuth",
new { id = item.ID, requestId = item.requestID },
new AjaxOptions
{
HttpMethod = "GET",
UpdateTargetId = "SelectedSTRMList" + i,
InsertionMode = InsertionMode.Replace
})
</td>
<td>
#Html.DisplayFor(modelItem => item.requestID)
</td>
<td>
#Html.DisplayFor(modelItem => item.emplid)
</td>
</tr>
<tr>
<td colspan="6" class="hiddenRow">
<div class="accordion-body collapse" id="collapse1_#i">
<div id="SelectedSTRMList_#i">
</div>
</div>
</td>
</tr>
i++;
}
</table>
</div>
Partial View
<table>
<tr>
<td>
<ul>
#foreach (var s in (List<string>)ViewBag.SemesterInfo)
{
<li style="padding-bottom:20px;">#s</li>
}
</ul>
</td>
</tr>
</table>
Jquery in _Layout.cshtml
<script src="~/Scripts/jquery-2.1.3.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
Controller
[HttpGet]
public PartialViewResult SelectedSTRMS(int id, int requestId)
{
FeeAuthWithCommentsViewModel feeauth = new FeeAuthWithCommentsViewModel();
feeauth.FeeAuth = db.FeeAuths.Find(id);
int feeauthID = id;
List<string> GetSTRM = new List<string>();
GetSTRM = db.vw_GetSTRMs.Where(v => v.FeeAuthID == feeauthID).Select(v => v.DESCR).ToList();
if (GetSTRM.Count > 0)
{
ViewBag.SemesterInfo = GetSTRM.ToList();
}
else
{
ViewBag.SemesterInfo = new List<string> { "No STRM Selected" };
}
return PartialView("_SelectedSTRMS");
}
Your update target is:
UpdateTargetId = "SelectedSTRMList" + i,
But your div id is:
<div id="SelectedSTRMList_#i">
In other words, you're either missing an _ in the update target string or you need to remove the _ in your div id.
MVC 3 , ajax, c#
My partial view is rendering as a new page instead of replacing the search results table.
Controller:
public class SearchController : Controller
{
//
// GET: /Search/
private myEntities db = new myEntities();
private Repository repo = new Repository();
[HttpGet]
public ActionResult Index()
{
var model = new List<PersonViewModel>();
model = repo.GetPeople();
return View(model);
}
public PartialViewResult _SearchResult(string fname, string lname)
{
var personResult = repo.GetSearchResult(fname, lname);
return PartialView("_SearchResult", personResult);
}
}
The view:
<div class="page">
<div class="middle-col-comment-mod">
<h2>Search Existing Trespassers</h2>
<div id="search">
#using (Ajax.BeginForm("_SearchResult", "Search", null, new AjaxOptions { HttpMethod = "Post", InsertionMode = System.Web.Mvc.Ajax.InsertionMode.Replace, UpdateTargetId = "indexSearchResults" }))
{
<div class="editor-field">
<label>First Name:</label>
#Html.TextBox("FirstName")
<label style = "margin-left: 15px;">Last Name:</label>
#Html.TextBox("LastName", "", new { style = "margin-right: 15px;" })
<input type="submit" name="submit" class="skbutton" value="Search" />
</div>
}
</div>
<table id="indexSearchResults" class="data-table">
<tr>
<th>
FirstName
</th>
<th>
LastName
</th>
<th>
Gender
</th>
<th>
City
</th>
<th>
DOB
</th>
<th>
IsStudent
</th>
<th>
Actions
</th>
</tr>
#if (Model.Count() == 0)
{
<tr>
<td colspan=7>
There are currently no trespassers in the trespass database.
</td>
</tr>
}
else
{
foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.FirstName)
</td>
<td>
#Html.DisplayFor(modelItem => item.LastName)
</td>
<td>
#Html.DisplayFor(modelItem => item.Gender)
</td>
<td>
#Html.DisplayFor(modelItem => item.DOB)
</td>
<td>
#Html.DisplayFor(modelItem => item.School)
</td>
<td>
#Html.DisplayFor(modelItem => item.IsStudent)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.PersonId }) |
#Html.ActionLink("Details", "Details", new { id = item.PersonId }) |
#Html.ActionLink("Delete", "Delete", new { id = item.PersonId })
</td>
</tr>
}
}
</table>
</div>
</div>
And the partial view:
#model IEnumerable<TrespassTracker.Models.PersonViewModel>
<table>
<tr>
<th>
First Name
</th>
<th>
Last Name
</th>
<th>
Gender
</th>
<th>
Date of Birth
</th>
<th>
Is a Student?
</th>
<th>
Actions
</th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.FirstName)
</td>
<td>
#Html.DisplayFor(modelItem => item.LastName)
</td>
<td>
#Html.DisplayFor(modelItem => item.Gender)
</td>
<td>
#Html.DisplayFor(modelItem => item.DOB)
</td>
<td>
#Html.DisplayFor(modelItem => item.IsStudent)
</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>
}
</table>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
From my research I found the usual suspect to be the missing link to the jquery script in the partial, but I had that. I checked the network tab on my wed dev tools and found it is being called. What else could the problem be?
the script won't cause any problem and the only thing I see wrong here is the table. you are trying yo fill the table with other table which returns a table, use a div instead to update the ajax form (search result):
<div id="indexSearchResults">
<table>
..........
</table>
</div>
Try this
<div class="page">
<div class="middle-col-comment-mod">
<h2>Search Existing Trespassers</h2>
<div id="search">
#using (Ajax.BeginForm("_SearchResult", "Search", null, new AjaxOptions { HttpMethod = "Post", InsertionMode = System.Web.Mvc.Ajax.InsertionMode.Replace, UpdateTargetId = "indexSearchResults" }))
{
<div class="editor-field">
<label>First Name:</label>
#Html.TextBox("FirstName")
<label style = "margin-left: 15px;">Last Name:</label>
#Html.TextBox("LastName", "", new { style = "margin-right: 15px;" })
<input type="submit" name="submit" class="skbutton" value="Search" />
</div>
}
</div>
#if (Model.Count() == 0)
{
<label>There are currently no trespassers in the trespass database. </label>
}
else
{
foreach (var item in Model)
{
#Html.Partial("__SearchResult",item)
}
</div>
</div>
How 'bout to use jQuery do reload your result content, instead Post from your form? You can named some div with an ID and uses it as reference do jQuery.load() (considering you're using that ViewModel you passed into Index action):
1.View
#model YourModel
<!-- ... -->
<div id="search">
#using (Ajax.BeginForm("MainPostAction", "ControllerName", FormMethod.Post, new { id = "yourFormID" })
{
<div class="editor-field">
<label>First Name:</label>
#Html.TextBoxFor(model => model.FirstName)
<label style = "margin-left: 15px;">Last Name:</label>
#Html.TextBoxFor(model => model.LastName, new { style = "margin-right: 15px;" })
<input type="button" name="submit" id="searchButton" class="skbutton" value="Search" />
</div>
<div id="results"></div>
}
</div>
Javascript:
$(document).ready(function() {
$('#searchButton').click(function(event) {
$('#results').load('#Url.Action('_SearchResult', 'Search')', $('#yourFormID').serialize());
});
}
Your action remains the same.
How 'bout it?
I want to have a page that has a form on the top of the page to enter movies in a system, and on the bottom of the page I want to have a table to display all of the movies in inventory. I am getting an error saying: Value cannot be less than 1. Parameter name: Page Size.
I have a viewmodel that currently looks like this:
public class InventoryViewModel
{
public Inventory Inventory { get; set; }
public IPagedList<Inventory> InventoryList { get; set; }
}
In my controller I have:
public ActionResult Index(int? page)
{
ViewBag.MoviesList = new SelectList(inventoryRepository.Movies, "MovieId", "Title");
InventoryViewModel vm = new InventoryViewModel
{
Inventory = new Inventory(),
InventoryList = inventoryRepository.GetInventory.ToPagedList(page.HasValue ? page.Value - 1 : 0, defaultPageSize)
};
return View(vm);
}
In my view I have:
<div class="well">
<h4>Enter Movie in System:</h4>
#using (Html.BeginForm()) {
#Html.ValidationSummary(true, "Movie was not entered in system. Please correct the errors and try again.")
<div>
<div class="input-prepend">
<span class="add-on"><i class="icon-film"></i></span>
#Html.DropDownListFor(m => m.Inventory.MoviesId, (SelectList)ViewBag.MoviesList)
#Html.ValidationMessageFor(m => m.Inventory)
</div>
<div class="input-prepend">
<span class="add-on"><i class="icon-calendar"></i></span>
#Html.TextBox("Quantity")
</div>
<p><button class="btn btn-primary" type="submit" value="Submit">Submit</button></p>
#Html.ValidationSummary()
</div>
}
</div>
<div>
<h3>Current Inventory:</h3>
</div>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th style="width: 15%;">Checkout Number</th>
<th style="width: 15%;">Title</th>
<th style="width: 23%;">Availability</th>
<th style="width: 17%;"></th>
</tr>
</thead>
<tbody>
#foreach (var vm in Model.InventoryList.OrderBy(m => m.CheckoutNum))
{
<tr>
<td>#vm.CheckoutNum</td>
<td>#vm.Movies.Title</td>
<td>#vm.isAvail</td>
<td>
</td>
</tr>
}
</tbody>
<tfoot>
<tr>
<td colspan="4">
#Html.Pager(Model.InventoryList.PageSize, Model.InventoryList.PageNumber, Model.InventoryList.TotalItemCount).Options(o => o
.DisplayTemplate("BootstrapPagination").RouteValues(new { q = ViewBag.Query, area = "" } )
.AlwaysAddFirstPageNumber().MaxNrOfPages(5))
</td>
</tr>
</tfoot>
</table>
I figured it out. I was setting the defaultPageSize in the wrong constructor, so the variable was never getting set, causing the page size to be 0.
int defaultPageSize;
private IInventoryRepository inventoryRepository;
public InventoryController()
{
this.inventoryRepository = new InventoryRepository(new MovieContext());
this.defaultPageSize = Convert.ToInt32(System.Configuration.ConfigurationManager.AppSettings["defaultPageSize"]);
}
public InventoryController(IInventoryRepository inventoryRepository)
{
this.inventoryRepository = inventoryRepository;
this.defaultPageSize = Convert.ToInt32(System.Configuration.ConfigurationManager.AppSettings["defaultPageSize"]);
}