We Keep Coding

Why isn't my form posting back my td information?

So I'm trying to post back the value that's inside the <td> but for some reason it's not posting it back, all the properties are either null or set to their default value such as 0.
It should post back the values when I click this button
<button type="submit" class="btn btn-icon waves-effect waves-light btn-info"> <i class="fa fa-wrench"></i> </button>
But for some reason it's not grabbing things like <td>#Html.DisplayTextFor(x => x.ServerID)</td> and posting it back
Here is the razor
#using (Html.BeginForm("Edit", "Dashboard"))
{
<table class="table table-hover mb-0">
<thead>
<tr>
<th>#</th>
<th>Server Name</th>
<th>Credentials</th>
<th>Status</th>
<th>Modify</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>#Html.DisplayTextFor(x => x.ServerID)</td>
<td>Data</td>
<td>#Html.DisplayTextFor(x => x.Endpoint)</td>
if (Model.IsRunning)
{
<td><span class="badge badge-success">Running</span></td>
}
else
{
<td><span class="badge badge-danger">Stopped</span></td>
}
<td>
<button class="btn btn-icon waves-effect waves-light btn-success"> <i class="fa fa-power-off"></i> </button>
<button class="btn btn-icon waves-effect waves-light btn-danger"> <i class="fa fa-stop"></i> </button>
<button type="submit" class="btn btn-icon waves-effect waves-light btn-info"> <i class="fa fa-wrench"></i> </button>
</td>
<td>
<button class="btn btn-icon waves-effect waves-light btn-danger"> <i class="fa fa-trash"></i> </button>
</td>
</tr>
</tbody>
</table>
}
And the Controller
public ActionResult Edit(ServerModel serverModel)
{
var model = serverModel;
return View();
}
the model properties are null or 0 as I said.
And here is the Model
public class ServerModel
{
public int ServerID { get; set; }
public string Endpoint { get; set; }
public bool IsRunning { get; set; }
}

Try
#Html.HiddenFor(x => x.ServerID)
#Html.DisplayTextFor(x => x.ServerID)
DisplayTextFor will only render the item as text.
Including the hidden field will include them in the payload sent to the server - as form items.

ASP.NET MVC - Call a Action in the controller after a checkBox is checked and return a list of Objects in a table

How would I do to when clicking the checkBox I call the action "ShowActives" of the controller?
This controller returns a list of elements that are active in the database.
How would I return these elements in the table?
my index is my default controller, clicking the checkBox I would like to call the ShowActives Action
public class CodigosDeOperacaoController : BaseController
{
public ActionResult Index()
{
return View(_codigosOperacionaisService.GetAll());
}
public ActionResult ShowActives ()
{
return View(_codigosOperacionaisService.GetActives());
}
}
My View
<div class="row">
<div class="col-md-12">
#using (Html.BeginForm("Index", "CodigosDeOperacao", FormMethod.Get))
{
<div class="row">
<div id="custom-search-input">
<div class="input-group col-md-12">
#Html.TextBox("buscar", null, new { #class = "form-control input", #placeholder = "Pesquisar por nome" })
<span class="input-group-btn">
<button class="btn btn-info btn" type="submit">
<big><i class="fa fa-search-plus"></i></big>
</button>
</span>
</div>
</div>
<div class="col-md-3 text-right">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Mostrar Todos</label>
</div>
<div class="col-md-6 text-right ">
<div>
<button type="button" id="btnNovo" class="btn btn-outline-primary btn-sm" style="min-width: 200px;">Novo código</button>
</div>
</div>
</div>
}
</div>
</div>
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.Codigo)
</th>
<th>
#Html.DisplayNameFor(model => model.Descricao)
</th>
<th>Ações</th>
</tr>
#foreach (var item in Model)
{
if (!item.Ativo == false)
{
<tr style="background-color:aliceblue">
<td>
#Html.DisplayFor(modelItem => item.Codigo)
</td>
<td>
#Html.DisplayFor(modelItem => item.Descricao)
</td>
<td>
<a href="#Url.Action("Edit", "CodigosDeOperacao", new { id=item.Id })" class="btn btn-warning" style="margin-bottom: 3px" id="tamanho-botoes">
<span class="fa fa-edit"></span>
</a>|
<a href="#" class="btn btn-danger" style="margin-bottom: 3px" id="tamanho-botoes" onclick="iniciarExclusao('#item.Id')">
<span class="fa fa-ban"></span>
</a>
</td>
</table>
}

You can use Url.Action. Something like this should work:
<input type="checkbox" class="form-check-input" id="exampleCheck1"
onclick="location.href='<%: Url.Action("ShowActives", "CodigosDeOperacaoController") %>'" >

How to pass iteration variable to bootstrap modal popup in partial view asp.net mvc

i have a delete button after the confirmation i want to call method.
but right now after model up is opened method can not be call from view to controller.
i want to call delete method after the confirmation on model popup click.if anyone has a solution please help me and if any other method for this gives an example.
here is my popup model
<div class="modal fade" id="confirmDelete" role="dialog" aria-labelledby="confirmDeleteLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Delete Parmanently</h4>
</div>
<div class="modal-body">
<p>Are you sure about this ?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger" id="confirm">Delete</button>
</div>
</div>
</div>
here is my jquery on same partial view page
<script type="text/javascript">
$('#confirmDelete').on('show.bs.modal', function (e) {
$message = $(e.relatedTarget).attr('data-message');
$(this).find('.modal-body p').text($message);
$title = $(e.relatedTarget).attr('data-title');
$(this).find('.modal-title').text($title);
});
$('#confirmDelete').find('.modal-footer #confirm').on('click', function(){
});
</script>
here is my view
<section class="content">
<div class="row">
<div class="col-md-12">
<div class="box box-primary" style="overflow-x:scroll;">
<div class="box-header">
<h3 class="box-title">Unit Detail</h3>
<div class="box_top_botton">
<a class="btn btn-md btn-primary" href="#Url.Action("AddUnit", "UnitMasters")">
<i class="glyphicon glyphicon-plus-sign"></i> Add Unit
</a>
</div>
</div><!-- /.box-header -->
<div class="box-body table-responsive">
<table class="table table-bordered table-striped example1">
<thead>
<tr>
<th></th>
<th>
#Html.DisplayNameFor(model => model.UnitId)
</th>
<th>
#Html.DisplayNameFor(model => model.UnitName)
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td nowrap style="font-size:14px !important;text-align:center !important;">
<a class="btn btn-xs btn-primary" href="#Url.Action("AddUnit", "UnitMasters", new { id = item.UnitId })">
<i class="glyphicon glyphicon-pencil"></i>
</a>
|
<a class="btn btn-xs btn-danger" href="#Url.Action("Delete", "UnitMasters", new { id = item.UnitId })" data-toggle="modal" data-target="#confirmDelete" data-title="Delete User" data-message="Are you sure you want to delete this user ?">
<i class="glyphicon glyphicon-trash"></i>
</a>
</td>
<td>
#Html.DisplayFor(modelItem => item.UnitId)
</td>
<td>
#Html.DisplayFor(modelItem => item.UnitName)
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
#Html.Partial("DialogBox", "Home")
here is my controller
public ActionResult DeleteConfirmed(int id)
{
UnitMaster unitMaster = db.UnitMasters.Find(id);
db.UnitMasters.Remove(unitMaster);
db.SaveChanges();
return RedirectToAction("Index");
}

1) Make sure you have referenced to all of below jquery.js, bootstrap.css and bootstrap.js
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
2) Add pass your #item.UnitId to data-id data attribute to your glyphicon-trash link like
<a class="btn btn-xs btn-danger" href="#" data-toggle="modal" data-id="#item.UnitId" data-target="#confirmDelete" data-title="Delete User" data-message="Are you sure you want to delete this user ?">
<i class="glyphicon glyphicon-trash"></i>
</a>
3) Make changes to your script like below
<script type="text/javascript">
var unitId = 0;
$('#confirmDelete').on('show.bs.modal', function (e) {
var message = $(e.relatedTarget).data('message');
$(this).find('.modal-body p').text(message);
var title = $(e.relatedTarget).data('title');
$(this).find('.modal-title').text(title);
unitId = $(e.relatedTarget).data('id');
console.log(unitId);
});
$('#confirmDelete').find('.modal-footer #confirm').on('click', function () {
var urlToDelete = '#Url.Action("DeleteConfirmed", "ControllerName")/' + unitId;
console.log(urlToDelete);
//Here is your ajax delete call with above url
});
4) Your modal popup will remain same no any changes
Output:

url.content showing the same video

Please help me find what I am missing. url.content is not returning each item's video in a foreach loop instead it is showing the same video for each element. I would like to access each video in the videofilepath column of my table and display it on a modal (still a work in progress).
#foreach (var item in Model)
{
<div class="col-md-4 portfolio-item">
<img class="img-responsive img-thumbnail"
src='#item.PosterFilePath'alt="thumbnail" />
<strong> #Html.DisplayNameFor(model => model.Title)</strong>
#Html.DisplayFor(modelItem => item.Title)
<br>
<strong>#Html.DisplayNameFor(model => model.ReleaseDate)</strong>
#Html.DisplayFor(modelItem => item.ReleaseDate)
<br>
<strong>#Html.DisplayNameFor(model => model.Genre)</strong>
#Html.DisplayFor(modelItem => item.Genre)
<br>
<strong> #Html.DisplayNameFor(model => model.Price)</strong>
#Html.DisplayFor(modelItem => item.Price)
<br>
<strong>#Html.DisplayNameFor(model => model.Rating)</strong>
#Html.DisplayFor(modelItem => item.Rating)
<br>
<div class="">
<button class="btn btn-primary" type="button" data-toggle="modal" data-target="#ajax">Watch now</button>
<button class="btn btn-success" type="button"><span class="glyphicon-download"></span>Download</button>
</div>
<br>
#Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
#Html.ActionLink("Details", "Details", new { id = item.ID }) |
#Html.ActionLink("Delete", "Delete", new { id = item.ID })
</div>
<div class="modal fade" id="ajax">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h3>#Html.DisplayNameFor(model => model.Title)</h3>
</div>
<div class="modal-body">
<video id="video" poster="~/Images/algo.jpg"
controls="controls"
loop="loop">
<source src="#Url.Content(item.VideoFilePath)" type="video/mp4">
</video>
</div>
<div class="modal-footer">
<button type="button" id="btnClose" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon-folder-close"></span>Close</button>
<button type="button" class="btn btn-success">Download</button>
</div>
</div>
</div>
</div>
}

Your modal div needs to have a unique Id. If you have the Id of the video for example as part of the Model, you could prepend or append it:
<div class="modal fade" id="ajax#(Model.VideoId)"
and the same with the button that invokes it:
<button class="btn btn-primary" type="button" data-toggle="modal" data-target="#ajax#(Model.VideoId)">Watch now</button>

Razor Ajax.BeginForm() creating a table with update form on each row. First Row missing <form> subsequent rows OK

I am creating a table of items in a basket, using the following in razor to create an update quantity form in each row, however the first row has all the contents of the using but not the form tag, all subsequent rows work ok (ie. have correct form tags):
#foreach (var item in #Model.SummaryList)
{
<tr id="basket_row_#(item.ProductCode)">
<td>
<img height="25" class="" src="#Html.DisplayFor(modelItem => item.ProdImage)" alt="#Html.DisplayFor(modelItem => item.ProductDesc)">
</td>
<td>
#Html.DisplayFor(modelItem => item.ProductCode)
</td>
<td>
#if (item.ProductCode != "DL")
{
using (Ajax.BeginForm("asyncUpdateCheckoutBasket", "Online", null, new AjaxOptions { UpdateTargetId = "SubTotal_" + item.ProductCode }, new { id = "updFrm_" + item.ProductCode }))
{
<div class="form-group">
<div class="input-group input-group-xs">
#Html.TextBox("newQty", item.Qty, new { id = "newQty_" + item.ProductCode, #class = "form-control", value = item.Qty })
<span class="input-group-btn ">
<button type="submit" value="Update" class="btn btn-success" id="add_btn_#(item.ProductCode)"><span class="glyphicon glyphicon-refresh"></span></button>
</span>
</div>
</div>
<input type="hidden" name="pCode" value="#item.ProductCode" />
}
}
</td>
<td id="SubTotal_#(item.ProductCode)">
#Html.DisplayFor(modelItem => item.SubTotal)
</td>
<td>
<a class="text-primary" title="DELETE: Delete item: #item.ProductCode" href="#(Url.Action("RemoveFromBasket", new { controller = "Online", area = "", pCode = item.ProductCode }))">
<span class="glyphicon glyphicon-trash"></span>
</a>
</td>
</tr>
}
Example of output:
<tr id="basket_row_KF00880">
<td>
<img height="25" title="Q-CONNECT WHITEBOARD MARKER ASTD PK10" alt="Q-CONNECT WHITEBOARD MARKER ASTD PK10" src="https://online.calidore.com/BtoC/Images/KF00880.jpg">
</td>
<td>
KF00880
</td>
<td>
<div class="form-group">
<div class="input-group input-group-xs">
<input name="newQty" class="form-control" id="newQty_KF00880" type="text" value="1">
<span class="input-group-btn ">
<button class="btn btn-success" id="add_btn_KF00880" type="submit" value="Update"><span class="glyphicon glyphicon-refresh"></span></button>
</span>
</div>
</div>
<input name="pCode" type="hidden" value="KF00880">
</td>
<td id="SubTotal_KF00880">
£8.21
</td>
<td>
<a title="DELETE: Delete item: KF00880" class="text-primary" href="/RemoveFromBasket?pCode=KF00880">
<span class="glyphicon glyphicon-trash"></span>
</a>
</td>
</tr>
<tr id="basket_row_KF00255">
<td>
<img height="25" title="Q-CONNECT DVD-R CAKEBOX PK25" alt="Q-CONNECT DVD-R CAKEBOX PK25" src="https://online.calidore.com/BtoC/Images/KF00255.jpg">
</td>
<td>
KF00255
</td>
<td>
<form id="updFrm_KF00255" action="/asyncUpdateCheckoutBasket" method="post" data-ajax-update="#SubTotal_KF00255" data-ajax-mode="replace" data-ajax="true">
<div class="form-group">
<div class="input-group input-group-xs">
<input name="newQty" class="form-control" id="newQty_KF00255" type="text" value="1">
<span class="input-group-btn ">
<button class="btn btn-success" id="add_btn_KF00255" type="submit" value="Update"><span class="glyphicon glyphicon-refresh"></span></button>
</span>
</div>
</div>
<input name="pCode" type="hidden" value="KF00255">
</form>
</td>
<td id="SubTotal_KF00255">17.98</td>
<td>
<a title="DELETE: Delete item: KF00255" class="text-primary" href="/RemoveFromBasket?pCode=KF00255">
<span class="glyphicon glyphicon-trash"></span>
</a>
</td>
</tr>