skip to Main Content

**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


  1. Make a try by using JavaScript .

    Login or Signup to reply.
  2. Is it possible to perform this without using partial view?

    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 a URL for your model content/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:

    <div class="col-md-2 form-group">
        <button id="btnRefreshLevels" class="btn btn-danger">Refresh</button>
    </div>
    
    <table class="table table-primary table-bordered mb-0" style="margin-top:10px;">
        <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 id="bindTableDataWithoutReloading">
        </tbody>
    </table>
    

    Script:

    @section scripts {
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#btnRefreshLevels").click(function(e) {
                   $('#bindTableDataWithoutReloading').empty();
               // alert("Clicked!");
                $.ajax({
                    type: "GET",
                    url: "http://localhost:5094/Member/RandomMemberList",
                    success: function(response) {
    
                        $.each(response, function(key, value) {
                            $('#bindTableDataWithoutReloading').append(
                                '<tr>'+
                                '<td>' + value.name + '</td>'+
                                '<td>' + value.category +'</td>'+
                                '<td>' + value.description + '</td>'+
                                '<td><img src="/images/'+ value.photoUrl +'"  height="50" width="75" /></td>'+
                                '</tr>'
                                );
                        })
    
                    },
                    error: function(response) {
                        alert(response.responseText);
                    }
                });
    
            });
    
    
    
        });
    </script>
    }
    

    Controller:

    public IActionResult RandomMemberList()
            {
                var members = _context.Members.ToList();
                var rnd = new Random();
                var randomized = members.OrderBy(item => rnd.Next());
    
                List<Member> newRandomList = new List<Member>();
    
                foreach (var value in randomized)
                {
                    newRandomList.Add(value);
                }
                return Ok(newRandomList);
            }
    

    Model:

    public class Member
        {
            [Key]
            public int MemberId { get; set; }
            public string? Name { get; set; }
            public string? Category { get; set; }
            public string? Description { get; set; }
            public string? PhotoUrl { get; set; }
            
        }
    

    Note:

    In my sample, I am calling a controller which will return a random list when the refresh button clicked.

    Output:

    enter image description here

    Explanation:

    There are two part in this sample one is textbox input and another is table. As you can see when you would click on Refresh Button it will load the list with each time random order without reloading the full page.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search