We Keep Coding

Update table in foreach loop with filtered model with Ajax (asp.net mvc c#)

I've developed an asp.net MVC web app where I have a table that shows some items in a model.
I can filter it now with a dropdown list using ajax
The model that i pass to the table is correct (if i go to the model before the foreach there are 3 rows instead of 10 thanks to the filter)
The problem is that the table doesn't change, it always shows all the rows as the initial request.
It look like it works but the table won't update...
There's my jquery ajax call:
$("#Dropdown1Id").on('change', function () {
//console.log("onchange");
//console.log($("#Dropdown1Id").val());
var drpdown1 = $("#Dropdown1Id").val();
var submit = $("#submitButton");
$.ajax({ // crea una chiamata AJAX
data: { data: drpdown1 }, // prendi i dati del form in questo caso del primo dropdown
type: "GET", // GET o POST
url: "/Select/Filter", // li passa al controller
success: function () { // se va con successo esegue il codice seguente
submit.click();
$("#frmId").submit();
},
error: function (error) {
console.log("error")
}
});
});
There's my controller action:
public ActionResult Filter(string data)
{
List<Card> cards = new List<Card>();
ViewBag.stato = new SelectList(myApi.GetState(), "Name", "Name");
if (data != null && data != "")
{
foreach (var card in model)
{
if (card.IdList == data || data == "")
cards.Add(card);
}
return View(cards);
}
return View(model);
}
There's my view with the daple and the dropdown:
#using (Html.BeginForm(new { id = "frmId"}))
{
#Html.AntiForgeryToken()
<table id="tb2">
<tr>
<th>
<h4> LIST : #Html.DropDownList("stato", null, new { #id = "Dropdown1Id" })</h4>
</th>
#*<th>
<h4>ARCHVIED : #Html.DropDownList("closed", null, new { #id = "Dropdown2Id" })</h4>
</th>*#
<th>
<input type="submit" value="Filter" class="btn btn-info" id="submitButton" />
</th>
</tr>
</table>
<br />
<div id="risultato"></div>
<table class="table" id="tb1">
<tr>
<th style="text-align:center">
TRELLO'S CARDS LIST
</th>
<th>LIST</th>
<th>ARCHVIED</th>
<th>Expiration date</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.IdList)
</td>
#if (item.Closed == "True")
{
<td>YES</td>
}
else
{
<td>NO</td>
}
#if (item.Due != null)
{
<td>
#Html.DisplayFor(modelItem => item.Due)
</td>
}
else
{
<td>
Not Present
</td>
}
</tr>
idList.Add(item.Id);
}
</table>

Let me get you through the execution stack and you'll understand why:
Your MVC view is loaded. When the view is returned to the frontend it is already in Html format. Check Server side rendering here
Basically it means that #foreach (var item in Model) will only execute on the server side and will not re-run when you hit an ajax call. This will only happen on a full post.
While in your page you fire up change dropdown event and the following happens:
An ajax call hit your controller
Data are being returned to the success function
Your success: function () is being executed.
A new form post occurs. See that you didn't do anything with the return data that was returned in the success: function(). You just posted back to the controller
After the post, the full view has returned ignoring any changes in the dropdown and in the data returned.
There are 2 solutions for your problem:
Do a full post and return a new view with the proper data
Write some more javascript to change the DOM inside your sucess function

Post one item from model collection to controller method in MVC

I have a view where I display a list of users, setting the model as:
#model List<MyProject.Models.User>
In this view I want to be able to choose to perform an action on a specific user, i.e. post to the controller that I want to disable a user. How do I post the specific User object to the controller?
This is what I've got so far, but I can't see how to post the specific object from the collection:
#foreach (var c in Model)
{
<tr>
<td>#c.Username</td>
<td>#c.IsEnabled</td>
<td>
#using (Html.BeginForm("DisableUser", "UserManagement"))
{
<input type="submit" value="Disable" class="btn btn-primary"/>
}
</td>
</tr>
}
My controller has the signature:
public ActionResult DisableUser(User user)

Rather than posting back all propeties of User, you can just add a route value in the BeginForm() method to post back the ID or the User. Assuming that property is namedUserId`, then
#foreach (var c in Model)
{
<tr>
....
<td>
#using (Html.BeginForm("DisableUser", "UserManagement", new { id = c.UserId ))
{
<input type="submit" value="Disable" class="btn btn-primary"/>
}
</td>
</tr>
}
and the controller method would be
public ActionResult DisableUser(int id)
{
// Get the User based on id, update it and redirect
}
You could also consider using ajax to submit the value, which would allow the user to stay on the same page and continue to 'disable' other User objects without need to make a redirect, in which case the code might be
#foreach (var c in Model)
{
<tr>
....
<td>
<button type="button" class="disable" data-id="#c.UserId">Disable</button>
</td>
</tr>
}
var url = '#Url.Action("DisableUser", "UserManagement")';
$('.disable').click(function() {
var row = $(this).closest('tr');
$.post(url, { id: $(this).data('id') }, function(result) {
if(result) {
// for example, remove the row from the table
row.remove();
} else {
// Oops
}
}).fail(function (result) {
// Oops
});
});
and the controller method would be
public JsonResult DisableUser(int id)
{
// Get the User based on id and update it
return Json(true);
// or if the update failed - return Json(null);
}

The simple way to disable a user is to use a Html.ActionLink instead of the form - you should be able to see plenty of examples of this in the template code. The action link could redirect to a confirmation page or you could just disable the user and redirect to a message page saying "the user has been disabled".
I better way is to use AJAX. You can do this with jQuery or you could use the MVC Ajax form or Ajax Action Link. I would recommend that you google MVC Ajax Action Link examples.
You may also want to style the link by setting it's class to the Bootstrap 'btn' class.

There is a way to post a single user
#foreach (var c in Model)
{
<tr>
<td>#c.Username</td>
<td>#c.IsEnabled</td>
<td>
#using (Html.BeginForm("DisableUser", "UserManagement"))
{
<input type="text" name="Username" value="#c.Username">
<input type="text" name="IsEnabled" value="#c.IsEnabled">
<input type="hidden" name="id" value="#c.id">
<input type="submit" value="Disable" class="btn btn-primary"/>
}
</td>
</tr>
}
The ideas is same,due to lack of time, please proceed according to your requirements, use the Class Property name as input name, the action will get the value

First of all you must not declare Html.BeginForm inside of any loop to post the object to controller.
#using (Html.BeginForm("DisableUser", "UserManagement"))
{
#foreach (var c in Model)
{
<tr>
<td>#c.Username</td>
<td>#c.IsEnabled</td>
<td>
<input data-id="#c.Id" type="submit" value="Disable" class="clsBtnPost btn btn-primary"/>
</td>
</tr>
}
}
This is for your reference
$(document).ready(function(){
$(".clsBtnPost").click(function(){
var userId = $(this).data("id");
$.ajax({
contentType: 'application/json; charset=utf-8',
dataType: 'json',
type: 'POST',
url: 'ControllName/MethodName', //Your Url
data: { 'userId': userId },
success: function () {
alert("successfully called.");
},
failure: function (response) {
alert("Error");
}
});
});
});
You can go with the Ajax Call to pass a single object to controller.

ASP MVC - Editor Templates issue (Sends always data from only first template)

I have a form/view which represents a strongly typed model which contains simple properties and an IEnumerable property. I use an editor template for the IEnumerable property of my model.
for (int i = 0; i < #Model.Items.Count(); i++)
{
#Html.EditorFor(model => #Model.Items[i])
}
Now, the template looks like the following:
#using (Html.BeginCollectionItem("Items"))
{
<table style="width: 100%">
<tr>
<td>
#Html.TextBoxFor(model => #Model.ID, new {id = "ID" })
</td>
<td>
#Html.TextBoxFor(model => #Model.Description, readonly="readonly", new {id = "Description" })
</td>
<tr />
<a role="button" id=getDescBtn>
</a>
</table>
}
And my template's script:
<script type="text/javascript">
$(document).ready(function() {
$("#getDescBtn").on('click', function (event) {
$.ajax({
url: '#Url.Action("LoadDescription")',
async: false,
cache: false,
data: {id: $("#ID").val()}
}).success(function (partialView) {
});
});
});
Now, My controller action looks like:
public ActionResult LoadDescription(string id)
{}
Now, Suppose I have two templates:
In the first one, the ID textbox contains the value of "1".
In the second one, the ID textbox contains the value of "2".
When I press the button in the first template, I get to the controller action twice, both with the value of "1" (from the first template).
When I press the button in the second template, I get to the controller action once, with the value of "1" (from the first template, although I pressed the button of the second template).
Now, what I'm trying to achieve is quite simple logically: press button in first template, get to controller action once with value of "1".
press button in secondtemplate, get to controller action once with value of "2".
Also, the action in controller is responsible to calculate value for description and then fill in the description field. What should the action method return (I don't think I should perform a post for the whole form), and how do I receive it within the success function while using Ajax?
Thanks for any help.

I think you need to use classes for your buttons and editors instead of ids. In your code you have multiple text boxes all with Id=ID and multiple buttons with id=getDescBtn. So $("#ID").val() will just give you the value of the first element with id="ID" which is your first textbox.
As for updating the description, you can have your action return the description value and then set the description text box on the success of your ajax call.
#using (Html.BeginCollectionItem("Items"))
{
<table style="width: 100%">
<tr>
<td>
#Html.TextBoxFor(model => #Model.ID, new {#class = "ID" })
</td>
<td>
#Html.TextBoxFor(model => #Model.Description, readonly="readonly", new {#class = "Description" })
</td>
<tr />
<a role="button" class="getDescBtn">
</a>
</table>
}
<script type="text/javascript">
$(document).ready(function() {
$(".getDescBtn").on('click', function (event) {
$.ajax({
url: '#Url.Action("LoadDescription")',
async: false,
cache: false,
data: {id: $(this).parent().find(".ID").val()}
})
.success(function (data) {
$(this).parent().find(".Description").val(data.description )
});
});
});
public JsonResult LoadDescription(string id)
{
//your logic here
return Json(new {description )});
}

MVC Dialog Save Refreshes Table Stops Working

I have been using the code from the article ASP.NET MVC: Ajax Dialog Form Using jQuery UI and it mostly works. I created a grid that lists records and each record has a link to bring up a dialog box to edit the record. After the record has been changed the save button is pressed and the grid is updated using ajax. This works great, but the problem comes after the first record save and the ajax refresh of the grid. If the link to edit the record is clicked again the dialog box doesn't come up, only the partial view is shown. I am guessing, but it appears the partial view that I am trying to bring up again doesn't recognize the parent container. Any ideas?
Display the partial view that contains the grid:
<div id="VehicleHold">
#Html.Partial("_VehicleHold")
</div>
The partial view that makes up the dialog:
#using VehicleWeb.MVCHelpers
#{
int agreementNumber = 0;
var countData = ViewBag.VehicleHoldViewModel as System.Collections.Generic.IEnumerable<VehicleWeb.Model.VehicleHoldViewModel>;
if (countData != null)
{
if (countData.Count() > 0)
{
agreementNumber = (int)countData.DefaultIfEmpty().First().AgreementNumber;
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered">
<thead>
<tr class="table-header">
<th>Edit</th>
<th>Delete</th>
<th>
Type
</th>
<th>
Year
</th>
<th>
Make/Model
</th>
<th>
Plate
</th>
<th>
VIN
</th>
<th>
Num Pass
</th>
</tr>
</thead>
<tbody>
#{
foreach (var item in (ViewBag.VehicleHoldViewModel as System.Collections.Generic.IEnumerable<VehicleWeb.Model.VehicleHoldViewModel>))
{
<tr>
<td>
#Html.ImageDialogLink("UpdateVehicleHold", "Exposure", new { id = item.RID }, "Edit Hold Vehicle", "VehicleHold", Url.Action("RefreshVehicleHold/" + agreementNumber), Html.ResolveUrl("~/pics/edit-button.png"), "Edit Hold Vehicle", "600", "800", new { style = "text-decoration:none;" }, new { style = "text-decoration:none; border-style: none;" })
</td>
<td>
<div title="Vehicle Year">#item.EditType.ToString()</div>
</td>
<td>
<div title="Vehicle Year">#item.AutoYear.ToString()</div>
</td>
<td>
<div title="Vehicle Make/Model">#item.MakeModel.ToString()</div>
</td>
<td>
<div title="Vehicle Plate Number">#item.DistVehNo.ToString()</div>
</td>
<td>
<div title="Vehicle VIN">#item.IDNumber.ToString()</div>
</td>
<td>
<div title="Number Of Passengers">#item.NumOfPassengers.ToString()</div>
</td>
</tr>
}
}
</tbody>
</table>
}
}
}
I am new at asking questions here, so just let me know if you need to see more code.
EDIT:
I don't know if it the position of the jQuery files matters for this. I have been messing around with the position today and haven't found success. I do have the jQuery file on the main form that it used to wire up the dialog box. After the AJAX refreshes the DIV, the edit link seems to loose all knowledge about the any of the parent code. My latest theory is it could be something to do with this code. Could it be because it is in a ready block?
$(document).ready(function () {
$.ajaxSetup({
cache: false
});
// Wire up the click event of any current or future dialog links
$('.dialogLink').on('click', function () {
var element = $(this);
// Retrieve values from the HTML5 data attributes of the link
var dialogTitle = element.attr('data-dialog-title');
var dialogWidth = element.attr('data-dialog-width');
var dialogHeight = element.attr('data-dialog-height');
var updateTargetId = '#' + element.attr('data-update-target-id');
var updateUrl = element.attr('data-update-url');
// Generate a unique id for the dialog div
var dialogId = 'uniqueName-' + Math.floor(Math.random() * 1000)
var dialogDiv = "<div id='" + dialogId + "'></div>";
// Load the form into the dialog div
$(dialogDiv).load(this.href, function () {
$(this).dialog({
modal: true,
resizable: false,
title: dialogTitle,
closeOnEscape: false,
width: dialogWidth,
height: dialogHeight,
buttons: [
{
text: "Save",
icons: { primary: "ui-icon-check" },
click: function () {
// Manually submit the form
var form = $('form', this);
if ($(form).valid()) {
$(form).submit();
$(this).dialog('close');
}
}},
{
text: "Cancel",
icons: { primary: "ui-icon-closethick" },
click: function () {
$(this).dialog('close');
$(this).empty();
}
}]
});
// Enable client side validation
$.validator.unobtrusive.parse(this);
// Setup the ajax submit logic
wireUpForm(this, updateTargetId, updateUrl);
});
return false;
});
});
function wireUpForm(dialog, updateTargetId, updateUrl) {
$('form', dialog).submit(function () {
// Do not submit if the form
// does not pass client side validation
if (!$(this).valid()) {
return false;
}
// Client side validation passed, submit the form
// using the jQuery.ajax form
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (result) {
// Check whether the post was successful
if (result.success) {
// Close the dialog
$(dialog).dialog('close');
$(dialog).empty();
// Reload the updated data in the target div
$(updateTargetId).load(updateUrl);
} else {
alert('failure');
// Reload the dialog to show model errors
$(dialog).html(result);
// Enable client side validation
$.validator.unobtrusive.parse(dialog);
// Setup the ajax submit logic
wireUpForm(dialog, updateTargetId, updateUrl);
}
}
});
return false;
});
}

It some times happens when we keep the script in the main view it will bind the event for the first time but won't work after a postback, try moving the script in the partial view, if it doesn't work share some more code and will see what is wrong

Dynamically load data with #Ajax.ActionLink using Skip() and Take()

I am new to ASP.NET MVC, so please help me to solve this, at a first glance, simple issue.
I have a table of students on my View and a Load More link below it. By clicking on this link I need to load more students records with AJAX.
So this is my View (omitted unnecessary data)
<table id="studentTable">
<thead>
...
</thead>
<tbody>
#Html.Partial("_StudentDetailsList", Model)
</tbody>
</table>
#Ajax.ActionLink("Load More", "LoadMoreStudents", new AjaxOptions
{
HttpMethod = "POST",
InsertionMode = InsertionMode.InsertAfter,
UpdateTargetId = "studentTable"
})
_StudentDetailsList partial view to display students
#model IEnumerable<MvcApplication1.Models.Student>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.LastName)
</td>
<td>
#Html.DisplayFor(modelItem => item.FirstName)
</td>
</tr>
}
action
public ActionResult LoadMoreStudents(int skip = 0)
{
return PartialView("_StudentDetailsList", studentRepository.Get(orderBy: s => s.OrderBy(st => st.FirstName).OrderBy(st => st.LastName)).Skip(skip).Take(10));
}
So as you can see, I want to load next 10 students every time, but I have to know how much are already loaded. So the question is: from where should I get this skip parameter which I want to pass to the Action from the View. How can I count on the View how many partial views are already loaded and how many students each partial has? Or is it a bad practice to pass this parameter to action, maybe I should handle it somewhere else (e.g. some service)? Please advice the right way to do this. Thanks.
P.S. Please feel free to edit the caption as I can't come up with appropriate one.

The easiest method would be to create a ViewModel that contains these variables for you.
ViewModel
public class YourViewModel(){
public int skip {get;set;}
public IEnumerable<StudentDetails> StudentDetailList {get;set;}
}
The Controller/Action Method
public ActionResult LoadMoreStudents(int skip = 0)
{
return PartialView("_StudentDetailsList", new YourViewModel{
StudentDetailList = studentRepository.Get(orderBy: s => s.OrderBy(st => st.FirstName).OrderBy(st => st.LastName)).Skip(skip).Take(10),
skip = skip + 10});
}
The View
#Html.Partial("_StudentDetailsList", Model.StudentDetailList)
The Partial View
#model MvcApplication1.Models.YourViewModel
<table id="studentTable">
<thead>
...
</thead>
<tbody>
#foreach (var item in Model.StudentDetailList)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.LastName)
</td>
<td>
#Html.DisplayFor(modelItem => item.FirstName)
</td>
</tr>
}
</tbody>
</table>
#Ajax.ActionLink("Load More", "LoadMoreStudents", new {skip = Model.skip}, new AjaxOptions
{
HttpMethod = "POST",
InsertionMode = InsertionMode.InsertAfter,
UpdateTargetId = "studentTable"
})
Basically, you have to be able to dynamically update the Ajax.ActionLink with values coming back from the controller. Here, I have moved it into the PartialView (arguabley you could move the entire table including the fetch more link into the PartialView and have it be even cleaner).

You are on the way. You should replace the Ajax.ActionLink for a link with $.get, and retrieve the skip by counting the numbers of rows at the tbody that you already have:
First replace the ActionLink for:
Load More Students here!
Second, create this function to do the get:
$('mylink').click(function (e) {
e.preventDefault();
//Gets the number of rows that you alredy have loaded
var rowCount = $('studentTable').find('tbody > tr').length;
//The URL for the get, with the number of rows
var url = "http://www.myurl.com/controller/action?skip=" + rowCount;
$.get(url, function (data) {
//Append the content from the partial view to the tbody
$('studentTable').find('tbody').append(data);
});
});
I think that this is a good way as well!
Hopes this help you!