How to display the practical skills of the Web page after Ajax add data

The following is presented in a pictorial and illustrated manner, as described below:

Do a small exercise this afternoon. You need to display the contents of the query log to the Web page. At first it was a myth.

All this time my little project needed to access ashx to generate HTML code. The Razor template engine used in the background.

When you first display the list of users. Because it is displayed to another interface (in fact, another page). Razor direct output no problem.

But the following needs to be shown below the current page

When I submit Ajax. Razor Template engine stitching code. It's back in the data in Ajax.

It can't be shown like the top one. My thoughts were shattered.
So I started to think again. Now that you need to return to the current page, you may be able to submit a direct form submission. However, the form submission needs to be refreshed. I don't like it. It's a good idea.

From the new page. But in that case, the buttons on the top are gone. This new page is placed below this page. How to put it in Ifarme.

Baidu's ...

Do not return the page source code. Returns data. Then write for loop bindings.

But I still don't like it, because I don't want to give up razor.

So ..... Thought of innerHTML.

Change the HTML code of the element directly, replace the code with razor, and replace it with the AJAX data. And then use innerHTML to assign a value. OK, okay.

HTML code that needs to be replaced

The page then writes a <table id= "TB" ></TABLE> gets this element with the DOM. var TB = document.getElementById ("TB"); then tb.innerhtml = The above part of the HTML code (returned with Ajax);

So that's OK. Is it that some people feel such trouble. But I just want to use razor ...

Finally, the effect chart

The above is for AJAX query data on the Web page to display the full content, I hope to help.