User475983607 posted
roguenidb
Actually its not but im asking how does I pass the id of the person into the dialog.
Sadly, you did not bother to run the code example or read the link documentation. The example passes an ID to the modal and shows the Id in the modal.
roguenidb
So yes it does have something to do with .net in the passing of the variables from razor syntax !
Unfortunately, your code is incomplete and the Bootstrap navigation is hard coded. I built another example that builds on the example above that dynamically renders the Bootstrap navigation. The example shown how to pass the
Id to an action and return a partial view.
@model List<UserNotesVm>
@{
ViewData["Title"] = "Index";
}
<h1>Index</h1>
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Share Update
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink" x-placement="bottom-start" style="; will-change: transform; top: 0px; left: 0px; transform: translate3d(10px, 50px, 0px);">
@foreach (var item in Model)
{
<a class="dropdown-item" href="#" data-id="@item.Id" data-toggle="modal" data-target="#exampleModal">@item.Name</a>
}
</div>
</li>
</ul>
</div>
</nav>
</div>
<hr />
<div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div id="modelForm">
</div>
</div>
</div>
</div>
</div>
@section scripts{
<script>
$('#exampleModal').on('show.bs.modal', function (event) {
var link = $(event.relatedTarget) // Button that triggered the modal
var id = link.data('id') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
//var modal = $(this)
//modal.find('.modal-body #userId').text(id)
$('#modelForm').load('/BootStrap/PopuateModal/' + id);
})
</script>
}
public class UserNotesVm
{
public int Id { get; set; }
public string Name { get; set; }
}
public class CaseNotesVm
{
public int Id { get; set; }
public string Title { get; set; }
public string Summary { get; set; }
public string Notes { get; set; }
public DateTime DateReported { get; set; }
}
public class BootStrapController : Controller
{
[HttpGet]
public IActionResult Index()
{
List<UserNotesVm> vm = new List<UserNotesVm>() {
new UserNotesVm() {Id=1, Name="Cpt Jack"},
new UserNotesVm() {Id=2, Name="Martha Jones"},
new UserNotesVm() {Id=3, Name="The Dr"},
};
return View(vm);
}
[HttpGet]
public IActionResult PopuateModal(int Id)
{
//Can use the Id to lookup a case.
//This example returns an input form
ViewBag.Id = Id;
return PartialView();
}
[HttpPost]
public IActionResult ProcessesCaseNote(CaseNotesVm caseNotes)
{
return Ok(caseNotes);
}
}
PopuateModal partial
@model CaseNotesVm
<form id="myForm" asp-action="ProcessesCaseNote" asp-controller="Bootstrap">
<div class="modal-body">
<div>
<h3>You selected Id @ViewBag.Id</h3>
</div>
<div>
<div asp-validation-summary="All" class="text-danger"></div>
@Html.HiddenFor(m => m.Id)
@Html.LabelFor(model => model.Title)
@Html.TextBoxFor(model => model.Title, new { @class = "form-control", @placeholder = "Title" })
@Html.ValidationMessageFor(m => m.Title, string.Empty, new { @style = "color:red;" })
@Html.LabelFor(model => model.Summary)
@Html.TextBoxFor(model => model.Summary, new { @class = "form-control", @placeholder = "Summary" })
@Html.ValidationMessageFor(m => m.Summary, string.Empty, new { @style = "color:red;" })
@Html.LabelFor(model => model.Notes)
@Html.EditorFor(model => model.Notes, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Notes)
@Html.LabelFor(model => model.DateReported)
@Html.EditorFor(model => model.DateReported, new { htmlAttributes = new { @class = "form-control datetimepicker" } })
@Html.ValidationMessageFor(model => model.DateReported)
<input name="IsValid" type="hidden" value="@ViewData.ModelState.IsValid.ToString()" />
</div>
</div>
<div class="modal-footer">
<button type="submit" id="btnSave" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</form>
