How to add code in OnInitializedAsync to show/hide the in C# razor pages?
<div class="form-row">
<table border="0" cellpadding="2" style="border-style:solid;border-width:2px">
<tbody>
<tr id="rowId" style="display: none;">
<td>
<label>test</label>
</td>
</tr>
</tbody>
</table>
</div>
#code {
protected override void OnInitializedAsync()
{
// code to show <tr> with id="rowId"
}
}
With the following code, when the component is initialized the table row is hidden. When the button is pressed it becomes visible.
<div class="form-row">
<table border="0" cellpadding="2" style="border-style:solid;border-width:2px">
<tbody>
#if (_rowVisible)
{
<tr id="rowId">
<td>
<label>test</label>
</td>
</tr>
}
</tbody>
</table>
</div>
<button #onclick="OnHideRowBtnClicked">Hide row</button>
#code {
private bool _rowVisible;
protected override void OnInitializedAsync()
{
// set _rowVisible to true if row should be visible or false if row should be hidden
_rowVisible = true;
}
private void OnHideRowBtnClicked()
{
_rowVisible = false;
}
}
Another approach using the style attribute:
<div class="form-row">
<table border="0" cellpadding="2" style="border-style:solid;border-width:2px">
<tbody>
<tr id="rowId" style="#_rowStyle">
<td>
<label>test</label>
</td>
</tr>
</tbody>
</table>
</div>
<button #onclick="OnHideRowBtnClicked">Hide row</button>
<button #onclick="OnShowRowBtnClicked">Show row</button>
#code {
private string? _rowStyle;
protected override void OnInitializedAsync()
{
}
private void OnHideRowBtnClicked()
{
_rowStyle = "display: none;";
}
private void OnShowRowBtnClicked()
{
_rowStyle = null;
}
}
I'm trying to render lists of elements dynamically in ASPNETCore Razor Pages but I can't find the way to show the values of properties using Display Helper. M
<table class="table datatable">
<thead>
<tr>
#foreach (var item in Model.GetFieldNamesForList())
{
<th>
#Html.DisplayName(item)
</th>
}
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.School) {
<tr>
#foreach (var propertyName in Model.GetFieldNamesForList())
{
<td>
// How to use #Html.Display using item from Model.School and the propertyName
</td>
}
<td>
<a asp-page="./Edit" asp-route-id="#item.Id" class="btn btn-primary btn-sm"><i class="material-icons md-16">edit</i></a>
<a asp-page="./Details" asp-route-id="#item.Id" class="btn btn-primary btn-sm"><i class="material-icons md-16">visibility</i></a>
<button action="submit" asp-page-handler="Delete" asp-route-id="#item.Id" class="btn btn-danger btn-sm"><i class="material-icons md-16">delete</i></button>
</td>
</tr>
}
</tbody>
</table>
In the meantime, I use reflection directly, but I would prefer use the Display method from helpers.
#item.GetType().GetProperty(propertyName).GetValue(item, null)
I get an error when loading a particular view via an Html.action call to an action and Controller, into a jquery Tab.
The other View is loaded successfully via an HTML.Partial call.
How do I get this other particular partial loaded please.
The tab where the error happens is tab4.
The commented out HTML.Partial call works to a point but when it loads that Partial (User), which has multiple models in it's containing model,..those other models are null and it's iteration over them crashes.
(That partial is beneath the first block of code.)
If I try load it from an action Call, then
the JQuery function ("$#tabs").tabs crashes with ".tabs" is undefined
TIA
Code:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Tabs - Content via Ajax</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function ()
{
$("#tabs").tabs({
beforeLoad: function (event, ui)
{
ui.jqXHR.fail(function ()
{
ui.panel.html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " +
"If this wouldn't be a demo.");
});
}
});
});
</script>
<div id="tabs">
<ul>
<li>Person Detail</li>
<li>Addresses</li>
<li>Role Detail</li>
<li>User Detail</li>
</ul>
<div id="tabs-1">
#*#Html.Partial("~/Views/Person/Index.cshtml")*#
</div>
<div id="tabs-2">
#*#Html.Partial("~/Views/Address/Index.cshtml")*#
</div>
<div id="tabs-3">
#Html.Partial("~/Views/IdentityRole/List.cshtml", new List<Catalyst.Shared.IdentityRole>())
</div>
<div id="tabs-4">
#Html.Action("List", "User");
#*#Html.Partial("~/Views/User/List.cshtml", new Catalyst.Mvc.IdentityUserPersonViewModel())*#
</div>
</div>
The Partial which I want to load, but needs data, which I think would work if I called the Action as opposed to calling the Partial.
#model Catalyst.Mvc.IdentityUserPersonViewModel
#{
ViewBag.User = "List";
}
<div class="panel panel-default" style="width:1400px !important;text-align:center ">
<div class="panel-heading">
<h3>Users</h3>
</div>
<div class="panel-body">
<div style="text-align:right;">#Html.ActionLink("Add", "Create", null, new { #class = "btn btn-default" })</div>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>
UserName
</th>
<th>
Password
</th>
<th>
Title
#*#Html.DisplayNameFor(model => model.)*#
</th>
<th>
FirstName
#*#Html.DisplayNameFor(model => model.)*#
</th>
<th>
LastName
</th>
<th>
PhoneNumber
</th>
<th>
Email
</th>
<th>
Company and Branch
</th>
<th></th>
<th></th>
</tr>
</thead>
#for (var i = 0; i < Model.identityUsers.Count(); i++)
{
<tr>
<td>
<a href="#Url.Action("Edit", "User" , new {id=Model.UserPersons[i].UserPersonId})">
#Html.DisplayFor(x => Model.identityUsers[i].UserName)
</a>
</td>
<td>
<a href="#Url.Action("Edit", "User" , new {id=Model.UserPersons[i].UserPersonId})">
#Html.EditorFor(x => Model.identityUsers[i].PasswordHash, new { htmlAttributes = new { #class = "form-control", placeholder = "Password", Type = "password" } })
</a>
</td>
<td>
<a href="#Url.Action("Edit", "User" , new {id=Model.UserPersons[i].UserPersonId})">
#Html.DisplayFor(x => Model.UserPersons[i].Title)
</a>
</td>
<td>
<a href="#Url.Action("Edit", "User" , new {id=Model.UserPersons[i].UserPersonId})">
#Html.DisplayFor(x => Model.UserPersons[i].Name)
</a>
</td>
<td>
<a href="#Url.Action("Edit", "User" , new {id=Model.UserPersons[i].UserPersonId})">
#Html.DisplayFor(x => Model.UserPersons[i].Surname)
</a>
<td>
#*<a href="#Url.Action("Edit", "User" , new {id=Model.identityUsers[i].Id})">
#Html.DisplayFor(x => Model.identityUsers[i].Email)
</a>*#
</td>
<td>
#*<a href="#Url.Action("Edit", "User" , new {id=Model.identityUsers[i].Id})">
#Html.DisplayFor(x => Model.identityUsers[i].PhoneNumber)
</a>*#
</td>
<td>
#*<a href="#Url.Action("Edit", "User" , new {id=item.ID})">
#Html.DisplayFor(x => item.PhoneNumber)
</a>*#
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id =
Model.identityUsers[i].Id })
</td>
<td>
#Html.ActionLink("Delete", "Delete", new { id =
Model.identityUsers[i].Id })
</td>
</tr>
}
</table>
</div>
The Controller of the view I can't get laoded
public class UserController : Controller
{
private IdentityUserBo identityUserBo;
private PersonBo personBo;
private IdentityUserPersonBo identityuser_personBo;
IdentityUserPersonViewModel model = new IdentityUserPersonViewModel();
public UserController(IdentityUserBo boIdentityUser, PersonBo boPerson, IdentityUserPersonBo boIdentityUserPerson )
{
this.identityUserBo = boIdentityUser ?? throw new ArgumentNullException("boIdentityUser");
this.personBo = boPerson ?? throw new ArgumentNullException("boPerson");
this.identityuser_personBo = boIdentityUserPerson ?? throw new ArgumentNullException("boIdentityUserPerson");
}
public ActionResult Index()
{
return RedirectToAction("List");
}
public ActionResult List()
{
ExBool result = null;
IdentityUserPersonViewModel userPersonViewModel = new IdentityUserPersonViewModel();
result = this.identityUserBo.List(out List<IdentityUser> identityUsers);
if (!result.Success) throw new Exception(result.Messages);
if (identityUsers == null) throw new Exception("Could not load IdentityUsers");
// Ideally see detail eg branch and tel and email from their respective tables
userPersonViewModel.identityUsers = identityUsers;
//Get the Persons, match these via Person.Id -> IdentityUserPerson.FKPersonId + IdentityUserPerson.FKUserId -> IdentityUser.ID
List<Person> persons = null;
result = this.personBo.List(out persons);
//IdentityUserPersonViewModel viewModel = new IdentityUserPersonViewModel();
userPersonViewModel.persons = persons;
// Get the IdentityUserPersons
List<IdentityUserPerson> identityUserPersons = null;
result = this.identityuser_personBo.List(out identityUserPersons);
IdentityUserPerson UPRec = new IdentityUserPerson();
Person PRec = new Person();
userPersonViewModel.UserPersons = new List<UserPerson>();
foreach (IdentityUser rec in userPersonViewModel.identityUsers)
{
UPRec = identityUserPersons.Find(x => x.FKUserID == rec.Id);
if (UPRec != null)
{
//UserId, UserPersonId, + Person.Id + Person.Name + Person.Surname
PRec = persons.Find(y => y.ID == UPRec.FKPersonID);
UserPerson UsrPers = new UserPerson();
UsrPers.UserId = rec.Id;
UsrPers.UserPerson_FKPersonId = UPRec.FKPersonID;
UsrPers.UserPerson_FKUserId = UPRec.FKUserID;
UsrPers.Name = PRec.FirstName;
UsrPers.Surname = PRec.LastName;
UsrPers.Title = PRec.TitleCode;
userPersonViewModel.UserPersons.Add(UsrPers);
}
else
{
UserPerson UsrPers = new UserPerson();
userPersonViewModel.UserPersons.Add(UsrPers);
}
}
return View(userPersonViewModel);
}
Check your console what error you got.
and also change this in tab4
#{
#Html.Partial("List", new Catalyst.Mvc.IdentityUserPersonViewModel())
}
I am using MVC 5 and Entity framework 6 (Database First) in my application.
I need to update "value" field in View page\index.cshtml.
Is it possible to use #Html.EditorFor to edit Value field for each Item on single button click?
Here is the code in index.cshtml
<table>
<tr>
<th>
Number
</th>
<th>
Name
</th>
<th>
Value
</th>
<th>
Description
</th>
</tr>
foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.number)
</td>
<td>
#Html.DisplayFor(modelItem => item.name)
</td>
<td>
#Html.EditorFor(modelItem => item.value)
#*#Html.ValidationMessageFor(modelItem => item.value) *#
</td>
<td>
#Html.DisplayFor(modelItem => item.description)
</td>
#* <td>
#Html.ActionLink("Edit", "Edit", new { id=item.id })
</td>*#
</tr>
</table>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
On clicking Save button I should update the data in Value field for any number of rows.
It's done in Database First so action for Edit,View,Details are included in Controller.
You'll have to put everything in a to post the details to the server, then you can manage the posted elements. You'll post a list of itens. Maybe this will help you: How can I post a list of items in MVC
i have a form by dropdownlist element. i want get value of dropdownlist in controller.
i do not know how can do this. i read my username of users with dataview in controller and want to change role of them by dropdownlist options.
#using (Html.BeginForm()) {
<form name="register" action="#">
<div>
<table>
#foreach (MembershipUser user in Model)
{
var userroles = Roles.GetRolesForUser(user.UserName);
<tr>
<td>
#user.UserName
</td>
#foreach (var role in userroles)
{
<td>
#role
</td>
}
<td>
#Html.DropDownList("roleName")
#Html.ValidationMessage("roleName")
</td>
<td>
</td>
</tr>
}
</table>
<input type="submit" class="register" value="Save" />
</div>
</form>
}
and this is my controller:
public ActionResult Index()
{
ViewData["roleName"] = new SelectList(Roles.GetAllRoles(), "roleName");
return View(Membership.GetAllUsers());
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Index()
{
return RedirectToAction("Index", "Home");
}
Did you try:
public ActionResult Index(string roleNameSelectedValue)
{
// roleNameSelectedValue is the "Value" field of selected item in your dropdownlist
return RedirectToAction("Index", "Home");
}
Or using #Html.DropDownListFor(m => Model.roleName, ViewBag.roleName as SelectList)