**Below the view you can see I used a table and loaded content from the model.
like Static table.
The thing is I want to refresh model content that is valued without reloading the view.
Is it possible to perform this without using a partial view? **
View
@model SampleWebApp.Models.SampModel; ---Model
<div class="col-md-2 form-group">
<button id="btnRefreshLevels" class="btn btn-secondary btn-sm">Refresh</button> --Submit button
</div>
<table class="table table-primary table-bordered mb-0">
<thead class="thead-primary">
<tr>
<th style="text-align:center">#</th>
<th style="text-align:center">Level 1</th>
<th style="text-align:center">Level 2</th>
<th style="text-align:center">Level 3</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Level 1</th>
@if (Model.Level1a == false)
{
<td style="text-align:center"><img src="~/img/cross_tick.png" style="width: 40px; height: 41.8px;" /></td>
}
else
{
<td style="text-align:center"><img src="~/img/accept_tick.png" style="width:50px; height:auto;" /></td>
}
@if (Model.Level1b == false)
{
<td style="text-align:center"><img src="~/img/cross_tick.png" style="width: 40px; height: 41.8px; " /></td>
}
else
{
<td style="text-align:center"><img src="~/img/accept_tick.png" style="width:50px; height:auto;" /></td>
}
@if (Model.Level1c == false)
{
<td style="text-align:center"><img src="~/img/cross_tick.png" style="width: 40px; height: 41.8px; " /></td>
}
else
{
<td style="text-align:center"><img src="~/img/accept_tick.png" style="width:50px; height:auto;" /></td>
}
</tr>
<tr>
<th scope="row">Level 2</th>
@if (Model.Level2a == false)
{
<td style="text-align:center"><img src="~/img/cross_tick.png" style="width: 40px; height: 41.8px;" /></td>
}
else
{
<td style="text-align:center"><img src="~/img/accept_tick.png" style="width:50px; height:auto;" /></td>
}
@if (Model.Level2b == false)
{
<td style="text-align:center"><img src="~/img/cross_tick.png" style="width: 40px; height: 41.8px;" /></td>
}
else
{
<td style="text-align:center"><img src="~/img/accept_tick.png" style="width:50px; height:auto;" /></td>
}
@if (Model.Level3b == false)
{
<td style="text-align:center"><img src="~/img/cross_tick.png" style="width: 40px; height: 41.8px; " /></td>
}
else
{
<td style="text-align:center"><img src="~/img/accept_tick.png" style="width:50px; height:auto;" /></td>
}
</tr>
<tr>
<th scope="row">Level 3</th>
@if (Model.Level3a == false)
{
@*<td style="text-align:center"><img src="~/img/cross_tick.png" style="width:40px; height:auto;" /></td>*@
<td style="text-align:center"><img src="~/img/cross_tick.png" style="width: 40px; height: 41.8px;" /></td>
}
else
{
<td style="text-align:center"><img src="~/img/accept_tick.png" style="width: 50px; height: auto;" /></td>
}
@if (Model.Level3b == false)
{
<td style="text-align:center"><img src="~/img/cross_tick.png" style="width: 40px; height: 41.8px; " /></td>
}
else
{
<td style="text-align:center"><img src="~/img/accept_tick.png" style="width: 50px; height: auto;" /></td>
}
@if (Model.Level3c == false)
{
<td style="text-align:center"><img src="~/img/cross_tick.png" style="width: 40px; height: 41.8px; " /></td>
}
else
{
<td style="text-align:center"><img src="~/img/accept_tick.png" style="width:50px; height:auto;" /></td>
}
</tr>
</tbody>
</table>
The thing is I want to refresh model content that is valued without reloading the view.
Is it possible to perform this without using a partial view? **
2
Answers
Make a try by using JavaScript .
Though partial view would be an ideal use here however, as you are looking around without using partial view so yes in that case you could use
Ajax
which will call aURL
for your modelcontent/value
from your controller then bind the value in your table without reloading the whole page.You could follow below steps to implement that.
HTML:
Script:
Controller:
Model:
Note:
In my sample, I am calling a
controller
which will return arandom list
when therefresh button clicked
.Output:
Explanation:
There are two part in this sample one is
textbox
input and another istable
. As you can see when you would click onRefresh Button
it will load the list with each time random order without reloading the full page.