0

I have used this link to apply a partial refresh on a dashboard i have been making.

What I am trying to figure out now is how to make it go through the list and not randomize it. I believe i have to find a way to send the ID value i have for the model list back and forth in order to increment it by one.

**Question was how to make the site iterate through the model list in sequential order instead of at random.

Any help would be awesome thanks!

Kevin
  • 25
  • 6

2 Answers2

1

In your example, Model is defined as

  public class  Model    
    {
         public int ID { get; set; }
         public string Name { get; set; }
         public string ImageUrl { get; set; }
    }

Which already has an identifier. So to send this identifer from client side to server side, you should define the variable at form. So you should change the partial view as

@model  PartailViewAutoRefresh.Models.Model
@Html.HiddenFor(model => model.ID)
<img src="@Model.ImageUrl" alt="@Model.Name" title="@Model.Name" width="150px" height="150px"/>

Now the ajax should be invoked as

<script type="text/javascript">
    $(function () {
         var contributorId = $("#ID").val();
         setInterval(function () { $('#contributors').load('@Url.Action("GetContributor", "Home" })?id='contributorId); }, 3000); // every 3 sec
    });
</script>

Server should change the action as 

  public ActionResult GetContributor(int id)

Few changes you can make from your example are 1. You should change GetContributor to HttpPost. 

[HttpPost]
public ActionResult GetContributor(int id)
  1. Instead of .load method which calls HttpGet action so for security perspective you should change it to HttpPost; from client side use $.ajax or $.post. 

      setInterval(function () { $.ajax({
          url: "@Url.Action("GetContributor", "Home"),
          method: "POST",
          data: { id : contributorId  },
          dataType: "html",
          success : function(data) {
              $('#contributors').html(data);
          }
        });
    }, 3000); 
   });
user1672994
  • 10,509
  • 1
  • 19
  • 32
  • I tried this solution but the program did not like the line of code ; setInterval(function () { $('#contributors').load('@Url.Action("GetContributor", "Home", new { @id = contributorId })'); }, 3000); // every 3 sec – Kevin Dec 08 '15 at 18:23
  • Updated code line. Also, have you try recommended approach? – user1672994 Dec 09 '15 at 04:29
  • Thanks this worked. I will attempt your other approach as well but happy that the other is working for now! – Kevin Dec 09 '15 at 15:35
0

you have your View with PartialView, which have to be updated by button click:

<div class="target">
    @{ Html.RenderAction("UpdatePoints");}
</div>

There are some ways to do it. For example you may use jQuery:

<script type="text/javascript">
    $(function(){    
        $('.button')click(function(){        
            $.post('@Url.Action("PostActionToUpdatePoints", "Home")').always(function(){
                $('.traget').Load('/Home/UpdatePoints');        
            })        
        });
    });        
</script>

PostActionToUpdatePoints is your Action with [HttpPost] attribute, which you use to update points

If you use logic in your action UpdatePoints() to update points, maybe you forgot to add [HttpPost] attribute to it:

[HttpPost]
public ActionResult UpdatePoints()
{    
    ViewBag.points =  _Repository.Points;
    return PartialView("UpdatePoints");
}

link:see here

Community
  • 1
  • 1
Vahid Akbari
  • 189
  • 7
  • 25
  • 1
    I am not trying to do the refresh on an button press. The dashboard will have a set of data that it wants the partial view to iterate through automatically. there will be another function that is going to update this information periodically. – Kevin Dec 08 '15 at 18:21
  • That is same With Some Change.but the way to do this are same – Vahid Akbari Dec 10 '15 at 11:50