I have a simpe MVC 4 application. this is my first ever ASP.NET MVC project and I completed the View-Controller-Model binding and getting the results in he table format. Now my challenge is to filter the data using AngularJS. I googled a lot. All the examples I have seen so far are either advanced or hardcoded values in the app.js controller. Can someone please guide me how to implement the simple filtering using AngularJs. What do I need do achieve the same.
Below is my View (Index.html)
#model IEnumerable<ProjectForm.Models.CreateProjectModel>
#{
ViewBag.Title = "Browse Tasks";
}
#using System.Web.Optimization
<h2>All Task List</h2>
<table class="table table-striped table-condensed table-hover table-bordered table-nonfluid">
<tr>
<th>
#Html.DisplayNameFor(model => model.task_id)
</th>
<th>
#Html.DisplayNameFor(model => model.task_desc)
</th>
<th>
#Html.DisplayNameFor(model => model.task_type)
</th>
<th>
#Html.DisplayNameFor(model => model.Priority)
</th>
<th>
#Html.DisplayNameFor(model => model.Task_status)
</th>
<th>
#Html.DisplayNameFor(model => model.Requester)
</th>
<th>
#Html.DisplayNameFor(model => model.RequestDate)
</th>
<th>
#Html.DisplayNameFor(model => model.busowner)
</th>
<th>
#Html.DisplayNameFor(model => model.devowner)
</th>
<th>
#Html.DisplayNameFor(model => model.StartDate)
</th>
<th>
#Html.DisplayNameFor(model => model.est_effort)
</th>
<th>
#Html.DisplayNameFor(model => model.Complete_date)
</th>
<th>
#Html.DisplayNameFor(model => model.act_effort)
</th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.task_id)
</td>
<td>
#Html.DisplayFor(modelItem => item.task_desc)
</td>
<td>
#Html.DisplayFor(modelItem => item.task_type)
</td>
<td>
#Html.DisplayFor(modelItem => item.Priority)
</td>
<td>
#Html.DisplayFor(modelItem => item.Task_status)
</td>
<td>
#Html.DisplayFor(modelItem => item.Requester)
</td>
<td>
#Html.DisplayFor(modelItem => item.RequestDate)
</td>
<td>
#Html.DisplayFor(modelItem => item.busowner)
</td>
<td>
#Html.DisplayFor(modelItem => item.devowner)
</td>
<td>
#Html.DisplayFor(modelItem => item.StartDate)
</td>
<td>
#Html.DisplayFor(modelItem => item.est_effort)
</td>
<td>
#Html.DisplayFor(modelItem => item.Complete_date)
</td>
<td>
#Html.DisplayFor(modelItem => item.act_effort)
</td>
</tr>
}
</table>
</body>
I also found a most closest solution in Stack Overflow, but it is not complete.
Sorting MVC razor UI table using Angularjs
Related
I am trying to add a checkbox so I can selects a row from my list and from there use that row to generate a letter.
I was wondering how I would be able to add a checkbox and bind it to the data I have tried a few ways using something similar to:
checkbox(m => m[i].Lesson)
However it would never accept the i in brackets and come up with an error. below is the layout of my index for the lessons model currently.
Here is the Lessons Index:
#model IEnumerable<FinalMusicApp.Models.Lesson>
#{
ViewBag.Title = "Index";
}
<h2>Lessons</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
#using (Html.BeginForm("Index", "Students", FormMethod.Get))
{
//Search options
<b>Search Options: </b> #Html.RadioButton("Option", "Instrument")<text>Instrument</text>#Html.RadioButton("Option", "Tutor")<text>Tutor</text>#Html.RadioButton("Option", "Term")<text>Term</text>#Html.TextBox("Search")
<input type="submit" name="submit" value="Search" />
}
<form method="post">
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.IsChecked)
</th>
<th>
#Html.DisplayNameFor(model => model.LessonDate)
</th>
<th>
#Html.DisplayNameFor(model => model.LessonTime)
</th>
<th>
#Html.DisplayNameFor(model => model.Duration.TimeTaken)
</th>
<th>
#Html.DisplayNameFor(model => model.Instrument.InstrumentName)
</th>
<th>
#Html.DisplayNameFor(model => model.Letter.Paid)
</th>
<th>
#Html.DisplayNameFor(model => model.Student.FullName)
</th>
<th>
#Html.DisplayNameFor(model => model.Tutor.TutorName)
</th>
<th>
CRUD
</th>
<th>
Make a letter
</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.CheckBoxFor(modelItem => item.IsChecked)
</td>
<td>
#Html.DisplayFor(modelItem => item.LessonDate)
</td>
<td>
#Html.DisplayFor(modelItem => item.LessonTime)
</td>
<td>
#Html.DisplayFor(modelItem => item.Duration.TimeTaken)
</td>
<td>
#Html.DisplayFor(modelItem => item.Instrument.InstrumentName)
</td>
<td>
#Html.DisplayFor(modelItem => item.Letter.Paid)
</td>
<td>
#Html.DisplayFor(modelItem => item.Student.FullName)
</td>
<td>
#Html.DisplayFor(modelItem => item.Tutor.TutorName)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.LessonId }) |
#Html.ActionLink("Details", "Details", new { id = item.LessonId }) |
#Html.ActionLink("Delete", "Delete", new { id = item.LessonId })
</td>
<td>
#Html.ActionLink("Generate Letter", "Create", "Letters")
</td>
</tr>
}
</table>
</form>
I am trying to add a checkbox so I can selects a row from my list
Do you want something like below?
In the view add a checkbox, for example I use the property CourseName in my model instead, you can use your property:
#Html.CheckBox("CourseName", new { value = item.CourseName })
#Html.DisplayFor(modelItem => item.CourseName)
Then in the controller, we can get CourseName value, and get other property value accord to the CourseName, but we need load the list again, we cannot send the full list from view to controller :
var courserow = model.FirstOrDefault(m => m.CourseName == CourseName);
result:
I want to display a search result using this InstitutionName as a query, but instead of appearing in the resulting table repeatedly on every row, I just want to show it as a heading. I tried using DisplayFor but it always returns an error, I'm guessing because my model is an IEnumerable, but I don't know, I just put in DisplayNameFor temporarily to simulate the output I want to show, which should be the value of the property itself and not just the property name.
I've read about using a ViewModel but I just want to know if I can accomplish this with what I have right now.
View
#model IEnumerable<SMOSystemv2.Models.Tender>
#{
ViewBag.Title = "Tenders";
}
<h1>Tender History</h1>
<h2>#Html.DisplayNameFor(model => model.Compendium.Institution.InstitutionName)</h2>
<table class="table">
<tr>
<th nowrap>
#Html.DisplayNameFor(model => model.Compendium.Institution.InstitutionName)
</th>
<th nowrap>
#Html.DisplayNameFor(model => model.Compendium.Qualification.Title)
</th>
<th nowrap>
#Html.DisplayNameFor(model => model.Slots)
</th>
<th nowrap>
#Html.DisplayNameFor(model => model.TotalAmount)
</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td nowrap>
#Html.DisplayFor(modelItem => item.Compendium.Institution.InstitutionName)
</td>
<td nowrap>
#Html.DisplayFor(modelItem => item.Compendium.Qualification.Title)
</td>
<td nowrap>
#Html.DisplayFor(modelItem => item.Slots)
</td>
<td nowrap>
#Html.DisplayFor(modelItem => item.TotalAmount)
</td>
</tr>
}
</table>
This is the kind of display that I was initially looking for using #Model.First() as suggested, but implementing a ViewModel instead is highly recommended
#model IEnumerable<SMOSystemv2.Models.Tender>
#{
ViewBag.Title = "Tenders";
}
<h1>Tender History</h1>
<h2>#Model.First().Compendium.Institution.InstitutionName</h2>
<table class="table">
<tr>
<th nowrap>
#Html.DisplayNameFor(model => model.Compendium.Qualification.Title)
</th>
<th nowrap>
#Html.DisplayNameFor(model => model.Slots)
</th>
<th nowrap>
#Html.DisplayNameFor(model => model.TotalAmount)
</th>
<th nowrap>
#Html.DisplayNameFor(model => model.Semester)
</th>
<th nowrap>
#Html.DisplayNameFor(model => model.DateReceived)
</th>
<th></th>
</tr>
#foreach (var item in Model)
{
<tr>
<td nowrap>
#Html.DisplayFor(modelItem => item.Compendium.Qualification.Title)
</td>
<td nowrap>
#Html.DisplayFor(modelItem => item.Slots)
</td>
<td nowrap>
#Html.DisplayFor(modelItem => item.TotalAmount)
</td>
<td nowrap>
#Html.DisplayFor(modelItem => item.Semester)
</td>
<td nowrap>
#Html.DisplayFor(modelItem => item.DateReceived)
</td>
<td nowrap>
#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>
This property returns the first option of the list or option selected as the default
FirstOrDefault
#if(Model != null){
<h2>#Model.FirstOrDefault().Compendium.Institution.InstitutionName</h2>
}
Try following solution:
<h2>#Html.DisplayNameFor(#Model.FirstOrDefault().Compendium.Institution.InstitutionName)</h2>
instead of
<h2>#Html.DisplayNameFor(model=>model.Compendium.Institution.InstitutionName)</h2>
because you are using #model IEnumerable<SMOSystemv2.Models.Tender> at your code. The property FirstOrDefault() will give you the first value in the list as default value.
When I create a user and he's logged in for the first time I get this error when I try to display(View details) the requests that he created so far(0 request created). Once I rerun the application again with the same user the view works and I get no error. Here's the line that's generates the error:
#foreach (var item in Model)`
Here's the view that generates the error:
#model IEnumerable<Mutuelle.Domain.Entities.Demande>
#{
ViewBag.Title = "DemandesAdherent";
}
#{
Layout = "~/Views/Shared/_LayoutAdherent.cshtml";
}
<h2>DemandesAdherent</h2>
<p>
#Html.ActionLink("Creér nouvelle", "AddDemande")
</p>
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.Date)
</th>
<th>
#Html.DisplayNameFor(model => model.nomBeneficiaire)
</th>
<th>
#Html.DisplayNameFor(model => model.Nomrubrique)
</th>
<th>
#Html.DisplayNameFor(model => model.etat)
</th>
<th></th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.Date)
</td>
<td>
#Html.DisplayFor(modelItem => item.nomBeneficiaire)
</td>
<td>
#Html.DisplayFor(modelItem => item.Nomrubrique)
</td>
<td>
#Html.DisplayFor(modelItem => item.etat)
</td>
<td>
#Html.ActionLink("Details", "DetailsDemande", new { id=item.DemandeId }) #*|
#Html.ActionLink("Delete", "DeleteDemande", new { id=item.DemandeId })*#
</td>
</tr>
}
</table>
How can I get value of #Html.TextBoxFor(modelItem => item.Sales) in partial view after pass to controller
My partial view :
#model IEnumerable<PG.Admin.Models.Items.ItemViewModel>
<table>
<tr>
<th>
#Html.DisplayNameFor(model => model.First().ItemId)
</th>
<th>
#Html.DisplayNameFor(model => model.First().Name)
</th>
<th>
#Html.DisplayNameFor(model => model.First().Sales)
</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.ItemId)
</td>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.TextBoxFor(modelItem => item.Sales)
</td>
</tr>
}
</table>
I have MVC application and I have two entities.
Entity Lead inherits from Customer.
Now, In Lead controllers index view, I have written below code...
public ViewResult Index()
{
var Leads = (from c in db.Customers.OfType<CRMEntities.Lead>()
where(c.IsActive == true) select c);
return View(Leads.ToList());
}
and I have the code below in the index view.
#model IEnumerable<CRMEntities.Lead>
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
.
.
Records exist in the table it not returning any record.
Is query right?
Full View Code
#model PagedList.IPagedList<CRMEntities.Lead>
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<table>
<tr>
<th>
Status
</th>
<th>
IsQualified
</th>
<th>
Name
</th>
<th>
Address
</th>
<th>
OfficePhone1
</th>
<th>
Website
</th>
<th>
Email2
</th>
<th>
Email1
</th>
<th>
FaxNo
</th>
<th>
Remark
</th>
<th>
Rating
</th>
<th>
BusinessType
</th>
<th>
IsActive
</th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.Status)
</td>
<td>
#Html.DisplayFor(modelItem => item.IsQualified)
</td>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.Address)
</td>
<td>
#Html.DisplayFor(modelItem => item.OfficePhone1)
</td>
<td>
#Html.DisplayFor(modelItem => item.Website)
</td>
<td>
#Html.DisplayFor(modelItem => item.Email2)
</td>
<td>
#Html.DisplayFor(modelItem => item.Email1)
</td>
<td>
#Html.DisplayFor(modelItem => item.FaxNo)
</td>
<td>
#Html.DisplayFor(modelItem => item.Remark)
</td>
<td>
#Html.DisplayFor(modelItem => item.Rating)
</td>
<td>
#Html.DisplayFor(modelItem => item.BusinessType)
</td>
<td>
#Html.DisplayFor(modelItem => item.IsActive)
</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>
Query looks fine from what can be seen.
The view code you are showing will not display anything. Write out #Model.Count() in the view to see how many records you have.
If you don't have a database profiler, I'd recommend getting one.