Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I am trying to create a master and details view in ASP.NET MVC.
I want to create a view with two tables, such that the first table will load a list of people, and clicking on the select link will load details of the selected person to the second table.
In WebForms, this is easy for me, but with MVC, I don't have any joy.
I have successfully loaded the first, but I am lost with what to do with the second. I have tried to use JavaScript as I did with the cascading dropdownlist, still not working.
#Agramer I am adding some code now, I followed #Shiyju lead and got this far.
<table id="Pat" class="table table-condensed table-hover">
<thead>
<tr>
<th>
Salutation
</th>
<th> Surname</th>
<th> Firstname</th>
<th> Reg. No.</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var lst in lstPat)
{
<tr>
<td>
#Html.DisplayFor(modelItem => lst.salutation.Salute)
</td>
<td>
#Html.DisplayFor(modelItem => lst.Surname)
</td>
<td>
#Html.DisplayFor(modelItem => lst.Firstname)
</td>
<td>
#Html.DisplayFor(modelItem => lst.RegNo)
</td>
<th>
<button class="btn btn-xs btn-success" onclick="pickdet(#lst.PatientID)">
#*<span class="glyphicon glyphicon-check"></span>*#
<i class="fa fa-list fa-lg"></i> Select
</button>
<button class="btn btn-xs btn-alert" onclick="location.href ='#Url.Action("Create", "PVSigns1", new { id = lst.PatientID })'">
#*<span class="glyphicon glyphicon-check"></span>*#
<i class="fa fa-list fa-lg"></i> Create New
</button>
<button class="btn btn-xs btn-warning" onclick="location.href='#Url.Action("Edit", "PVSigns1", new { id = lst.PatientID })'">
<span class="fa fa-edit fa-lg"></span> Edit
</button>
</th>
</tr>
}
</tbody>
</table>
<br />
<div>
<h3> Details</h3>
<table id="Pv" class="table table-condensed">
<thead>
<tr>
<td>Sign</td>
<td> Value </td>
</tr>
</thead>
<tbody>
#foreach (var pvv in lstPv)
{
#Html.DisplayFor(modelItem => pvv.VitalSigns.Sign);
#Html.DisplayFor(modelItem => pvv.SignValue);
}
</tbody>
</table>
The JavaScript to attempt filling the table
function pickdet(Id){
var url = "/PVSigns1/GetDetails";
$.post(url, {Id: Id})
.done(function (response) {
$("#Pv").html(response);
});
}
It is actually pulling the results but not putting them into the table result set as seen below.
PVC120HBC150Pulse72
You can use ajax to get the details about the person record which was clicked. Listen to the click event on the anchor tag, get the unique id of the person and make an ajax call to server with this id and let your server returns the details of the person. In your ajax call's success/done event, parse the response coming back and show that as needed.
Something like this
#model IEnumerable<Person>
<table>
<tr><th>Name</th></tr>
#foreach(var p in Model)
{
<tr>
<td>#Html.ActionLink(p.Name,"Details","Person",
new {#id=p.Id},new {class="personLink"})</td>
</tr>
}
</table>
<h2>Details of selected person:</h2>
<div id="fullName"></div>
<div id="jobTitle"></div>
and the javascript to handle the click event is
$(funtion(){
$("a.personLink").click(function(e){
e.preventDefault();
var url=$(this).attr("href");
$.getJSON(url,function(data){
if(data!=null)
{
$("#fullName").text(data.FullName);
$("#jobTitle").text(data.JobTitle);
}
});
});
});
Assuming your Details action method in your PersonController accepts an id(of person) and return an object with FullName and JobTitle property
public ActionResult Details(int id)
{
var d=new {FullName="Shyju", JobTitle="Developer"};
// Hard coded for demo. You may get this information from db
return Json(d,JsonRequestBehaviour.AllowGet);
}
You may also consider returning a partial view result (the html markup you want to render in the details view) instead of returning JSON data. In that case, instead of reading each property value from the response, you may simply set the response(html markup of details) as the inner html of the container div. You may use the jquery html(someString) for that.
Related
I am currently working on a project where I want to show a column of a related record (form a sql database). For some of my table this works perfeclty fine, altough for one of them it does not. As shown below, there is no error and the record is filled in with the correct data, but it does not show up correclty. Can anyone help me with this? I tried updating my database already.
<table id="coaches">
<thead>
<tr>
<th>
</th>
<th>
#Html.DisplayNameFor(model => model.Picture)
</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model) {
<tr>
<td>
<img src=#Html.DisplayFor(modelItem => item.Picture) class="person">
</td>
<td>
<div style="padding-left:10px">
<div class="name">#Html.DisplayFor(modelItem => item.Organization.Name)Should be here</div>
<div class="natclub">
<img src="https://dalto.nl/wp-content/uploads/2018/08/dalto-logo.png" class="emblem">
<br>
<img src="https://cdn.countryflags.com/thumbs/netherlands/flag-400.png" class="flag">
</div>
</div>
</td>
</tr>
}
</tbody>
</table>
Organization Table
Coaches table
Page in question
Thanks in advance!
I tried to release a new update of the database using the PM Console, but nothing changed.
I have a foreach loop in MVC page. like below. But, when I am submitting the form using submit button, it is always submitting the first record. Unable to understand why it is doing that way. Appreciate the help.
#model IEnumerable<DeployModel>
#using (Html.BeginForm("Index", "Dep", FormMethod.Post))
{
<div class="col-md-11">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body" id="modal-body" style="overflow-y: auto">
#if (Model != null && Model.Any())
{
<div>
<table class="table table-condensed table-hover table-bordered">
<thead>
<th>
S1 Name
</th>
<th>
S2 Name
</th>
<th>
Old Version
</th>
<th>
New Version
</th>
<th>
Status
</th>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(o => item.S1)
</td>
<td>
#Html.DisplayFor(o => item.S2)
</td>
<td>
#Html.DisplayFor(o => item.OldVersion)
</td>
<td>
#Html.DisplayFor(o => item.NewVersion)
</td>
<td>
#Html.DisplayFor(o => item.Status)
</td>
<td>
<button name="SubmitButton" class="btn action-btn" type="submit" > Submit </button>
</td>
</tr>
}
</tbody>
</table>
</div>
}
</div>
</div>
</div>
</div>
}
My Controller action looks like as, but it is always receiving first record irrespective of button click.
[HttpPost]
public ActionResult Index(DeployModel deployModel)
{
//TODO code
}
Any idea how to resolve this?
There are a couple of problems here. The first is that Html.DisplayFor will just write the display string for the selected property's value with nothing telling the browser that it is form data to be submitted. The other is that all of your submit buttons are for the same form. There are a few ways to solve these problems. The one I would suggest is to create a separate form for each instance of DeployModel, and create hidden inputs for each property you are expecting to receive upon submission of the form:
// inside your foreach loop
#using (Html.BeginForm("Index", "Dep", FormMethod.Post))
{
<input type="hidden" name="S1" value="#item.S1" />
<input type="hidden" name="S2" value="#item.S2" />
...
<input type="submit" value="Submit" />
}
Also please note that if you use this method you should remove the outer form - you don't want nested forms!
You have to give a diffrent Name for each input.
exmaple
#Html.DisplayFor(o => item.S1, new { name = "input1" })
Please excuse me, I am new to MVC and Entity Framework but have been unable find information to solve my problem.
Problem 1 is that I am trying add a where statement to my model and show only active players. You can see my two separate procedures in my controller, but they both yield the same results.
public IActionResult ActivePlayers()
{
var model = _playerRepository.GetAllPlayers();
return View("Players",model.Where(d => d.IsActive = true));
}
public IActionResult AllPlayers()
{
var model = _playerRepository.GetAllPlayers();
return View("Players", model);
}
My second problem is I am having a hard time figuring how to toggle between All Players and Active ones from the View.
I tried the following, but quickly realized that it wouldn't work since the page is re-rendered after calling the controller. - Note, I was using jQuery to toggle viability.
<div>
<label id="lblShowAll" style="color:green;font-style:italic;font-weight:bold;"
>Showing Active Players</label>
<label id="lblLimitList" style="color:green;font-style:italic;font-weight:bold;display:none;"
>Showing All Players</label>
<br />
<a id="ShowAll" class="btn btn-link"
asp-controller="admin" asp-action="allPlayers">Show All Players</a>
<a id="LimitList" class="btn btn-link" style="display:none;"
asp-controller="admin" asp-action="activePlayers">Limit List (Active Players)</a>
</div>
I'm not sure it matters but this is what my data list looks like in the View.
<div class="container" id="players">
<br />
<div style="width:90%; margin:0 auto;">
<table id="playerList" class="table table-striped table-bordered dt-responsive nowrap"
width="100%" cellspacing="0">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th>City</th>
<th>State</th>
<th>Telephone</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
#foreach (var player in Model)
{
<tr>
<th>#player.Name</th>
<th>#player.Address</th>
<th>#player.City</th>
<th>#player.State</th>
<th>#player.Telephone</th>
<th>
<a class="btn btn-outline-info m-1"
asp-controller="admin" asp-action="editPlayer" asp-route-id="#player.PlayerId">
Edit</a>
</th>
<th>
<a class="btn btn-outline-danger m-1">Delete</a>
</th>
</tr>
}
</tbody>
</table>
</div>
</div>
Thanks in advance!
This question already has answers here:
Post an HTML Table to ADO.NET DataTable
(2 answers)
Closed 6 years ago.
Why i can't pass this model to a controller in ASP.NET MVC?
This is my View:
#model Pro.WebUI.ViewModels.DataItemVm
<div>
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.FirstSetList.FirstOrDefault().Name)
</th>
<th>
#Html.DisplayNameFor(model => model.FirstSetList.FirstOrDefault().Amount)
</th>
</tr>
#foreach (var item in Model.FirstSetList)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.TextBoxFor(modelItem => item.Amount)
</td>
</tr>
}
</table>
<hr/>
<div>
#using (Html.BeginForm())
{
#Html.HiddenFor(model => model.FirstSetList)
<input type="submit" value="Confirm"/>
}
</div>
</div>
After I click Confirm button - this method receives model with Count = 0;
public ActionResult FirstSet(DataItemVm model)
{
...
}
Of course my ViewModel DataItemVm has list:
public class DataItemVm
{
public List<FirstSetViewModel> FirstSetList { get; set; }
}
So it looks like that problem is only at view. Maybe BeginForm should be in other place? However HiddenFor should send be enough to send this model.
Change #foreach cycle to for - ASP.NET MVC uses indexers to generate correct ids and names for elements, so you should use #Html.TextBoxFor(x=>x.Array[index]) to correctly generate html for your collections.
This cycle:
#foreach (var item in Model.FirstSetList)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.TextBoxFor(modelItem => item.Amount)
</td>
</tr>
}
Should instead look like this:
#for (var i = 0; i < Model.FirstSetList.Length; i++)
{
<tr>
<td>
#Html.DisplayFor(model => model.FirstSetList[i].Name)
#Html.HiddenFor(model => model.FirstSetList[i].Name) //otherwise name won't be returned to controller
</td>
<td>
#Html.TextBoxFor(model=> model.FirstSetList[i].Amount)
</td>
</tr>
}
Another issue is - markup for the data that you want to be sent to the controller should be put inside #using (Html.BeginForm()){//put it here} block.
Check out this post about model binding in ASP.NET MVC:
http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx/
I displayed a list of data in form of a grid [basic html table] and placed text boxes so that we can edit inside the grid and post the values so that I can save it. The list is not big , around 5-10 rows in it.
How to access these form values back in controller? FormCollection doesn't seem to work and I cannot even access the values through Request.Form[]. I want it back in a form of a list so that I can loop through it and get the new values.
.cshtml
<form action="/Parameter/StudentWeights" method="post">
<table>
<tr>
<th>
Category
</th>
<th>
CategoryAlias
</th>
<th>
YearCode
</th>
<th>
ClassKto8
</th>
<th>
Class9to12
</th>
<th></th>
</tr>
#foreach(var item in Model.StudentWeights) {
<tr>
<td>
#Html.HiddenFor(modelItem => item.CategoryId)
</td>
<td>
#Html.DisplayFor(modelItem => item.Category)
</td>
<td>
#Html.DisplayFor(modelItem => item.CategoryAlias)
</td>
<td>
#Html.DisplayFor(modelItem => item.YearCode)
</td>
<td>
#Html.EditorFor(modelItem => item.ClassKto8)
</td>
<td>
#Html.EditorFor(modelItem => item.Class9to12)
</td>
</tr>
}
</table>
<input type="submit" value = "Submit" />
</form>
controller
[HttpPost]
public ActionResult studentWeights(FormCollection collection)
{
try
{
// TODO: Add update logic here
//service.
foreach (var item in collection)
{
int x = item. // i want to loop through it and access the values.
}
}
catch
{
return View();
}
}
please help me how to get these values. I don't want to use JEditable or any third party jQuery tools.
Is there any way to create a custom type and assign values in JavaScript or jQuery upon button click and then send it to my controller action?
Thank you very much, any suggestion would be much helpful.
You need to access the form collection differently. The form collection is a key value pair of the values posted to the controller. formcollection["postvalue"]
[HttpPost]
public ActionResult studentWeights(FormCollection formCollection)
{
foreach (string _formData in formCollection)
{
var x = formCollection[_formData];
}
}
Here are several way to iterate through a form collection
http://stack247.wordpress.com/2011/03/20/iterate-through-system-web-mvc-formcollection/