AJAX ASP .NET MVC

Question

Good evening!

I am engaged in programming quite recently, I can not understand one question.

On the page there are some containers for images formed on the basis of a universal partial view:

<!--конвертер 2--> <div class="w100h31"> <div class="w30h100 center"> @{Html.RenderAction("ImageControl", "Image", new { imageref = "/Content/Images/69.png", name = "Конвертер 2", i = 0.5 });} </div> </div> <!--конвертер 3--> <div class="w100h31"> <div class="w30h100 center"> @{Html.RenderAction("ImageControl", "Image", new { imageref = "/Content/Images/69.png", name = "Конвертер 3", i = 0 });} </div> </div> </div>

It is necessary that the child actions (RenderAction) be updated at regular intervals. Well, respectively, without reloading the entire page.

For example, once every ten seconds the action is updated and, accordingly, if in the controller that forms the partial view there are changes in the dependent data, it forms the new partial view.

Victor Trusov Victor Trusov 31 four · Answer 1 · 2016-12-28T12:58:09

Hello!

Here it is important to understand that in MVC, unlike WebForms, there are no magic elements that allow you to manage the client part of the page.

Therefore, the issue of updating some specific elements without reloading the page can be solved only through js.

1) Add a class and container id to your View to distinguish them

  <!--конвертер 2--> <div class="w100h31"> <div class="w30h100 center container" containerid="2"> @{Html.RenderAction("ImageControl", "Image", new { imageref = "/Content/Images/69.png", name = "Конвертер 2", i = 0.5 });} </div> </div> <!--конвертер 3--> <div class="w100h31"> <div class="w30h100 center container" containerid="3"> @{Html.RenderAction("ImageControl", "Image", new { imageref = "/Content/Images/69.png", name = "Конвертер 3", i = 0 });} </div> </div>

2) We need to send a new container to our Ajax request. To form it, create a View named Ajax:

 @{ Layout = null; } @{Html.RenderAction("ImageControl", "Image", new { imageref = ViewBag.imageHref, name = ViewBag.imageName, i = ViewBag.i });}

3) Now in the controller that generates your page we will add a method:

 public ActionResult Ajax(int id) //id будет содержать id контейнера { //здесь ты пишешь код, который как-то изменяет твой контейнер. Результаты записываешь в переменные ниже @ViewBag.imageHref=""; @ViewBag.imageName=""; @ViewBag.i=1; return View("Ajax"); }

4) Now add a script to the container page that will update them

 <script> var timerId = setInterval(function () { replaceContainers(); }, 1000); //выполнять функцию раз в 1 секунду function replaceContainers(){ var $c = $(".container").each(function () { var id = $(this).attr("containerid"); //получаем id $.ajax({ type: "GET", url: "/Home/Ajax/" + id, //Home-замени на имя твоего контроллера. contentType: false, processData: false, success: function (result) { $(this).html(result); //обновляем div }, error: function (xhr, status, p3) { alert(xhr.responseText); } }); }); } </script>

And if there are many elements of these elements (actually, for this purpose, some ImageControl is implemented), is it possible to run the script for elements of the class class without reference to id?
The script and now runs for all elements of the class container.
If there is no need for this, then in the script you need to remove the string var id = $(this).attr("containerid");
You can remove the containerid parameter from the elements and you can also remove the parameter in the controller, i.e.

AJAX ASP .NET MVC

1 answer 1

More articles: