I'm trying to get to grips with ViewComponents but having trouble trying to get the ViewComponent to reload on a button click. Whats the correct way to handle this?
Initially on the page loading it looks OK like this
In my controller I have
public IActionResult ReloadViewComponent(int characterRegionId, int materialTypeId)
{
return ViewComponent("MarketOrderComponent", new { characterRegionId, materialTypeId});
}
and in my razor view I'm passing parameters to the ReloadViewComponent method
<td><button class="btn btn-sm btn-outline-primary" value="#material.MaterialTypeID" onclick="location.href='#Url.Action("ReloadViewComponent", "BlueprintBreakdown", new { Model.CharacterRegionId, material.MaterialTypeID })'">View</button></td>
full razor view
<body>
<div class="row" style="margin-top:5px;">
<div class="col-lg-4 col-md-12">
<div class="card" style="margin-bottom:0; ">
<div class="header" style="margin-bottom:55px;">
<h2 class="text-primary">Blueprint Breakdown</h2>
</div>
<div class="body">
<div>
<h5 class="text-center">#Model.BlueprintName</h5>
</div>
<div class="row text-center">
<div class="col-6 border-right pb-4 pt-4" style="padding-top:0px !important; padding-bottom:0px !important;">
<img src="#Model.ImageUrl" alt="#Model.BlueprintName">
</div>
<div class="col-6 pb-4 pt-4" style="padding-top:0px !important; padding-bottom:0px !important;">
<img src="#Model.ProductImageUrl" alt="#Model.BlueprintName">
</div>
</div>
<div class="text-center" style="margin-top:5px;">
<text style="font-size:small;">Material Quantity Based on Manufacturing Efficiency</text>
<br />
<text style="font-size:small;">Price Based on Lowest Region Market Sell Orders</text>
<br />
<text style="font-size:small;">Current Region is <span class="text-green">#Model.CharacterRegionName</span></text>
</div>
</div>
</div>
<div class="table-responsive">
<table class="table table-hover table-custom spacing5">
<thead>
<tr>
<th></th>
<th>Material</th>
<th>Quantity</th>
<th>Price</th>
<th>Market</th>
</tr>
</thead>
<tbody>
#foreach (var material in Model.RequiredMaterials)
{
<tr class="text-cente" style="font-size:small;">
<td><img src="#(String.Format("{0}{1}{2}", "https://imageserver.eveonline.com/Type/", material.MaterialTypeID, "_32.png"))" /></td>
<td>#material.TypeName</td>
<td>#material.Quantity</td>
<td>#material.MaterialCost</td>
<td><button class="btn btn-sm btn-outline-primary" value="#material.MaterialTypeID" onclick="location.href='#Url.Action("ReloadViewComponent", "BlueprintBreakdown", new { Model.CharacterRegionId, material.MaterialTypeID })'">View</button></td>
</tr>
}
</tbody>
</table>
</div>
</div>
<div class="col-lg-8 col-md-12">
#await Component.InvokeAsync("MarketOrderComponent", new { Model.CharacterRegionId, Model.RequiredMaterials.First().MaterialTypeID })
</div>
</div>
but when clicking the view button to reload the ViewComponent it is rendered like this.
Note by using the ViewComponent() controller method, your client only gets the component part of the view. So instead of changing the browser's current location, you should send an ajax request and dynamically replace the right side content.
Add an id='MarketOrderComponent'attribute so that we can reference this element later:
<div id='MarketOrderComponent' class="col-lg-8 col-md-12">
#await Component.InvokeAsync("MarketOrderComponent", new { Model.CharacterRegionId, Model.RequiredMaterials.First().MaterialTypeID })
</div>
And change the button click event handler to send an ajax request. For example, in order to reload the market order component, you can change your code as below:
<script>
function reload(url){
return $.ajax({
method:"get",
url:url,
success:function(resp){ $('#MarketOrderComponent').html(resp);},
});
}
</script>
<div class="card" style="margin-bottom:0; ">
...
</div>
<div class="table-responsive">
...
<tbody>
#foreach (var material in Model.RequiredMaterials)
{
<tr class="text-cente" style="font-size:small;">
<td><img src="#(String.Format("{0}{1}{2}", "https://imageserver.eveonline.com/Type/", material.MaterialTypeID, "_32.png"))" /></td>
<td>#material.TypeName</td>
<td>#material.Quantity</td>
<td>#material.MaterialCost</td>
<td>
<button class="btn btn-sm btn-outline-primary"
value="#material.MaterialTypeID"
onclick="var link='#Url.Action("ReloadViewComponent", "BlueprintBreakdown", new { Model.CharacterRegionId, material.MaterialTypeID })'; event.preventDefault(); reload(link)"
>
View
</button>
</td>
</tr>
}
</tbody>
...
</div>
<div id='MarketOrderComponent' class="col-lg-8 col-md-12">
#await Component.InvokeAsync("MarketOrderComponent", new { Model.CharacterRegionId, Model.RequiredMaterials.First().MaterialTypeID })
</div>
Related
This seems like it should be simple but nothing is in ASP.NET Core MVC. I would simply like to present the results of a query in a table inside a modal popup. The modal is opening but the table is empty. Not just that but the table is getting created before I even click the button to show the modal. I'm hoping some kind person out there can help me.
This is the controller action method:
public async Task<IActionResult> GetStudies(int id)
{
var results2 = (from s in _context.Studies
join sn in _context.StudyNodes on s.Id equals sn.StudyId
where sn.NodeId == id
select new BundleNodeViewModel
{
StudyId = s.Id,
StudyName = s.Name
}).ToList();
return Ok(results2);
}
This is the function calling the action:
getStudies = (url, id) => {
$.ajax({
type: 'GET',
url: url,
data: {
'id': id
},
success: function (res) {
console.log(res);
$("#formModal").find(".modal-body").html(res.Name);
$("#formModal").find(".modal-title");
$("#formModal").modal('show');
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
console.log(response);
alert("error");
}
})
};
And this is the modal popup:
<div id="formModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" id="close_" style="background-color:transparent; color:aquamarine; border-style:none">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Assigned Studies</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-md-4">
<form asp-action="Bind" asp-controller="Studies">
<div class="form-group">
<table class="table table-hover" style="height: 300px">
<thead>
<tr class="position-sticky" style="color:aliceblue; background-color:#126E75">
<th class="text-start">
Study
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr class=" table-light">
<td class="text-start">
#item.StudyName
</td>
</tr>
}
</tbody>
</table>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="button" id="btnClosePopup" value="Close" data-dismiss="modal" class="btn btn-danger" />
</div>
</div>
</div>
</div>
I'm really confused about the order in which things are happening. For some reason the code in the modal runs when the parent page is loaded and not when you click the button on the parent page to open the modal. So the model in the foreach() statement is not the model I need it to be. When I click on the open modal button I expect it to go to the controller, get the data and return it to the modal where I can loop through the object and create a table.
Any ideas anyone?
I didn't understand your question but I have tried to do what you might want to do.
we have created dummy data which should you get from the ajax.
If you don not want to open the modal on page load please remove the Document Ready part.
try to place the 'getStudies' function body to your ajax's success block.
$(document).ready(()=>{
getStudies();
});
var data = [
{ 'StudyId': 1,'Name':"STD 10"},
{'StudyId' : 2,'Name':"STD 11"}
];
let getStudies = (url, id) => {
$("#formModal").find("tbody").html('');
$.each(data,(index,val) =>
{
let tr=`<tr class="table-light"><td class="text-start">${val.Name}</td></tr>`;
$("#formModal").find("tbody").append(tr);
});
$("#formModal").modal('show');
};
<html>
<head>
<title>kaushal</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body> <button onClick="getStudies()">open modal</button>
<div id="formModal" style="width:100%;border:1px solid red;" class="modal fade in" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" id="close_" style="background-color:transparent; color:aquamarine; border-style:none">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Assigned Studies</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-md-4">
<form asp-action="Bind" asp-controller="Studies">
<div class="form-group">
<table class="table table-hover" style="height: 300px">
<thead>
<tr class="position-sticky" style="color:aliceblue; background-color:#126E75">
<th class="text-start">
Study
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="button" id="btnClosePopup" value="Close" data-dismiss="modal" class="btn btn-danger" />
</div>
</div>
</div>
</div>
</body>
</html>
I am trying to render partial view from controller on button click event to view the details. But unfortunately its not working.
My Controller Action
OwnerController.cs
public IActionResult ShowpopUp(int id) {
var venue = _context.Venues.FirstOrDefault(x=>x.Id==id);
return PartialView(venue);
}
My View All.cshtml
#model List<Venue>
<table class="table table-hover">
<thead>
<th> Property Name </th>
<th colspan="2">Action</th>
</thead>
<tbody>
#foreach(var x in Model)
{
<tr>
<td>
#x.Name
</td>
<td>
<a class="btn btn-default btn-sm" id="#x.Id" onclick="Details(this.id)">Show</a>
</td>
</tr>
}
</tbody>
</table>
<script>
function Details(id)
{
$.get("#Url.Action("ShowpopUp","Owner")/"+id,
function(data) {$('.modal-body').html(data);})
$("#myModal").modal("show");
}
$('#myModal').on('hidden.bs.modal', function(e){
$('.modal-body').html("");
})
}
</script>
myModal
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Details</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
The following example should help achieve your requirement of rendering partial view as modal popup using jQuery Ajax, please check it.
All.cshtml
#model IEnumerable<Venue>
#{
ViewData["Title"] = "All";
}
<h1>All</h1>
<table class="table table-hover">
<thead>
<th> Property Name </th>
<th colspan="2">Action</th>
</thead>
<tbody>
#foreach (var x in Model)
{
<tr>
<td>
#x.Name
</td>
<td>
<a class="btn btn-default btn-sm" id="#x.Id" onclick="Details(this.id)">Show</a>
</td>
</tr>
}
</tbody>
</table>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Details</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
#section scripts{
<script>
function Details(id) {
$.get("#Url.Action("ShowpopUp","Owner")/" + id,
function (data) {
$('.modal-body').html(data);
});
$("#myModal").modal("show");
}
</script>
}
ShowpopUp action
public IActionResult ShowpopUp(int id)
{
var venue = _context.Venues.FirstOrDefault(x => x.Id == id);
//specify the name or path of the partial view
return PartialView("_VenueDetail", venue);
}
_VenueDetail.cshtml (partial view under Views/Shared folder)
#model Venue
<h1>Venue Details</h1>
<h2>Id: #Model.Id</h2>
<h2>Name: #Model.Name</h2>
Test Result
I have a view that creates a document with a Title, Date, and name of file that I upload. Once that document is created it is returned to a View that shows the document that I just created and is stored in a database.
Here is the code that creates the document:
<form asp-action="CreateDirectorDocument" role="form" class="form-
horizontal">
<div asp-validation-summary="ModelOnly" class="alert-
danger text-danger"></div>
<div class="form-group">
<div class="col-md-10"><a asp-
action="Index">View Documents</a></div>
</div>
<div class="form-group">
<div class="col-md-10"><label asp-for="Date">
</label></div>
<div class="col-sm-2"><input asp-for="Date" />
</div>
</div>
<div class="form-group">
<div class="col-md-2"><label asp-
for="DocFile"></label></div>
<div class="col-md-4">
<input asp-for="DocFile" type="file"
multiple>
</div>
</div>
<div class="form-group">
<div class="col-sm-2"><label asp-for="Title">
</label></div>
<div class="col-sm-2"><input asp-for="Title"
/></div>
</div>
</form>
View that is return after document has been created:
<table>
<thead>
<tr>
<th class="col-md-2" style="border-bottom: solid">
</th>
<th class="col-md-2" style="border-bottom:
solid">Title</th>
<th class="col-md-2" style="border-bottom:
solid">Date</th>
<th class="col-md-2" style="border-bottom: solid">
</th>
</tr>
</thead>
<tbody>
#foreach (var dirDocs in Model.Docs)
{
<tr>
<td class="col-md-2">
<a asp-area="Admin" asp-controller="Docs"
asp-action="EditDirectorDocument" asp-route-
id="#dirDocs.Id">Edit</a>
<a asp-area="Admin" asp-controller="Docs"
asp-action="DeleteDirectorDocument" asp-route-
returnViewName="#returnViewName" asp-route-id="#dirDocs.Id"
onclick="return confirm('Are you sure you want to delete
this document?');">Delete</a>
</td>
<td class="col-md-2">#dirDocs.Title</td>
<td class="col-md-2">#dirDocs.Date</td>
<td class="col-md-2"><a asp-route-
id="#dirDocs.Url" target="_blank">Open</a></td>
</tr>
}
</tbody>
</table>
The file that is uploaded gets stored as a document file and is created as a url for the user to view. How do I do this in MVC. Is that set up in the controller? If so how is that done?
Not sure, but I think you just need:
Open
Instead of
<a asp-route-id="#dirDocs.Url" target="_blank">Open</a>
I assume you mean you get a URL back from the upload process that you want to display to the user so they can click on it and see the file they uploaded.
If you wanted to display some thing like that inline you could probably use an iframe whose src is set to #dirDocs.Url:
<iframe src="#dirDocs.Url"></iframe>
I am having my view bound to datatable as follows
#{int i = 1;}
#foreach (var item in Model.Rows)
{
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading bg-info">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse#(i)">
<div class="col-lg-3">
<img style="width:50px" class="float-left p-l-5" src="https://organicthemes.com/demo/profile/files/2012/12/profile_img.png" /> <div class="float-left p-l-10">
<h4 class="m-t-0">#item["First_Name"]</h4>
<p><b>##item["Employee_Code"]</b></p>
</div>
</div>
<div class="col-lg-4">
<h4 class="m-t-0">#item["Leave_Description"]: #item["No_Of_Days"] days - <span class="blue_heading">#item["Start_date"]</span></h4>
<h4 class="m-t-0">#item["Leave_Purpose"]</h4>
</div>
<div class="col-lg-4">
</div>
</a>
</div>
<div id="collapse#(i)" class="panel-collapse collapse">
<div class="panel-body">
<div class="center_table">
<div class="border_table">
<table class="table table-hover table-expandable table-striped">
<tr>
<td>
Leave Type: #item["Leave_Description"]
</td>
<td>
Days : #item["No_Of_Days"]
</td>
</tr>
<tr>
<td>
From : #item["Start_Date"]
</td>
<td>
To : #item["End_Date"]
</td>
</tr>
<tr>
<td colspan="2">Reason : #item["Leave_Purpose"]</td>
</tr>
</table>
</div>
<div class="clearfix"></div>
<div class="well text-center p-10"><button type="button" class="btn btn-default">Accept Grant</button> <button type="button" class="btn btn-default">Reject</button></div>
</div>
</div>
</div>
</div>
</div>
i++;
}
I am getting the required output but when clicking on first row the second row is also showing as collapsed. My scenario is when there are multiple rows on clicking a particular row other rows collapse should be hidden.
Can someone tell what change do I need to achieve the scenario?
Can you try
i=i+1;
Sometime foreach confuses with ++ operator
Also you can try collapse-#i instead of #collapse#(i)
I have an index view that gets a parameter from an Action link. Sometimes there won't be a record and in that case I want the #Model.Count to simply show 0. That was working just fine. I then need a button to pass that same parameter to a Create view to add a new (initial) record and display on the previous index page. This is where I hit a problem.
<input class="btn btn-sm btn-info" type="button" value="Add To Roster" onclick=" location.href = '#Url.Action("Create", "Enrollments", new {enrollments_CurrentSites = Model.First().Enrollments_CurrentSite}, null)' "/>
If there is no record, instead of showing a count of 0, I now get an error "Sequence Contains No Elements". I thought that maybe there is a null Model and tried to check for it, but no go. If there is one or more records, then the Count is displayed and the "Add To Roster" button performs as expected.
Can someone help me solve this error?
Error Code:
#model IEnumerable<SlamJammersData.Model.Enrollments>
#{
ViewBag.Title = "Rosters";
}
<div class="container-fluid">
<div class="panel panel-info">
<div class="panel-body">
<div class="container">
<div class="row">
#if (Model == null)
{
<h4>Roster count: 0</h4>
}
else
{
<p>
<h4>Roster count: #Model.Count() </h4>
</p>
}
</div>
</div>
</div>
<div class="panel-footer">
<div class="row">
<div class="col-sm-2">
<p>
<input class="btn btn-sm btn-info" type="button" value="Add To Roster" onclick=" location.href = '#Url.Action("Create", "Enrollments", new {enrollments_CurrentSites = Model.First().Enrollments_CurrentSite}, null)' "/>
</p>
</div>
<div class="col-sm-2">
<div class="col-sm-2">
<input type="button" class="btn btn-default btn-sm" value="Attendance" />
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div>
<table class="table table-striped table-condensed table-responsive">
<tr>
<th>Player</th>
<th>#Html.DisplayNameFor(model => model.StartTime)</th>
<th></th>
<th></th>
</tr>
#foreach(var item in Model)
{
<tr>
<td>#Html.DisplayFor(modelItem => item.FullName)</td>
<td>#Html.DisplayFor(modelItem => item.StartTime)</td>
<td>
#Html.ActionLink("Details", "Details", new{id = item.Id})
</td>
<td>
#Html.ActionLink("Edit", "Edit", new {id = item.Id})
</td>
</tr>
}
</table>
</div>
</div>
</div>
</div>
</div>
Sending code:
#Html.ActionLink("Rosters", "Index", "Enrollments", new { id = item.Id }, null) |