Home > Article > Web Front-end > Using Ajax to Partially Update Razor Pages (Graphic Tutorial)

Using Ajax to Partially Update Razor Pages (Graphic Tutorial)

亚连Original: 2018-05-21 17:23:571862browse

Razor is very powerful, but it cannot refresh itself, so it needs to be used with ajax. This article uses an example to introduce the use of Ajax to partially update the Razor page. Friends who need it can refer to it

Razor is very powerful, but it cannot achieve no refresh, so it needs to be used with ajax

This article will give a simple example to implement partial refresh with Razor and ajax.

First, we create an MVC project

Let us create a simple Controller Book

Then add a view to it and add some simple Html code

@{
 ViewBag.Title = "Index";
 Layout = null;
}
<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
 <h2>Index</h2>
 @Html.ActionLink("点击我", "Part","Book");
 <p id="partial" ></p>
 @Scripts.Render("~/bundles/jquery")
 <script type="text/javascript">
  $("a").click(function () {
   $.ajax({
    url: "/Test/Book/Part/1",
    success: function (result) {
     console.log(result);
     $("#partial").html(result);
    },
    error: function (msg) {
     console.log(msg);
    }
   })
   return false;
  });
  
 </script>
</body>
</html>

Here I added a e388a4556c0f65e1904146cc1a846bee and gave it an id ="partial", when I click @Html.ActionLink, the method in javascript will be triggered, and I will use ajax to access the path /Test/Book/Part/1. After the request is successful, the Html I requested will be built in e388a4556c0f65e1904146cc1a846bee ,This is actually the principle of partial refresh

This is the code of Part, and then we also add a view to Part

##Part's code can be very simple, and then we start our project

We keep clicking the button "Click me"

The page will keep changing.

It should be noted here that when using AJAX request, the Url must be written completely. For example, my Controller is named Test under the Book folder under Area, and the Action is Part, then the Url is /Test/Book /Part, /Test cannot be missing, otherwise the following error will occur

# It can be seen that if the Url is not written in full, the View returned by the Action is actually the wrong path.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Struts2 and Ajax data interaction (graphic tutorial)

##Use ajax to submit the form to the database Detailed explanation (no refresh)

Pull-up loading example written in native ajax (graphic tutorial)

The above is the detailed content of Using Ajax to Partially Update Razor Pages (Graphic Tutorial). For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：AjaxFileUpload+Struts2 implements multi-file upload functionNext article：AjaxFileUpload+Struts2 implements multi-file upload function

See more

Using Ajax to Partially Update Razor Pages (Graphic Tutorial)

Related articles