How to refresh/update Model content without reloading the view on submit button without partial view? - Asp.net

tSv
August 20, 2022
131 views
0 votes
2 Answers

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

Answers

- abdomohamed
- August 20, 2022 at 3:48 pm
- 0 votes
0
Make a try by using JavaScript .

Login or Signup to reply.

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:

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.

Please signup or login to give your own answer.

Click here to cancel reply.

How to refresh/update Model content without reloading the view on submit button without partial view? – Asp.net

Answers