asp.net mvc - Update Razor variable in foreach using button click -

okay, after lot of searching around haven't found answer problem. working on page who's main purpose display articles on main page.

i got code down display articles, want display 6 first articles in foreach , user can chose increase display count 6 each time he/she clicks "show more articles" button.

i using @foreach (var item in model.take(displayedarticles)), var displayedarticles = 6;

is there way user increase counter clicking "show more" button? having issues.

my current code:

<div class="container-fluid"> <h2 class="page-header">index</h2>  @{     var displayedarticles = 6; }  @foreach (var item in model.take(displayedarticles)) {     <div class="col-lg-4">         <h2>@html.displayfor(modelitem => item.title) </h2>         <div id="textcontent">             @html.displayfor(modelitem => item.content)         </div>     </div> } <div class="col-lg-12" >     <input type="button" class="btn btn-success" value="show more articles" id="showmore" onclick="@(displayedarticles+=6)" style="width: 100%"/>  </div> 

i have tried in jquery, , did log updated value console, did not update razor foreach.

is there way solve this?

yes, you'll need ajax. simple as:

$('#showmore').click(function () {     $.get('article/showmore', function (html) {         $('.col-lg-4').append(html);     }); }); 

that's gist of it. in controller, you'll send actionresult points partial. rendered partial injected page.