更新页面而不刷新它

Question

Goal:
When you click on the row (1), new data shall display (3.) without the whole webpage will be updated/refreshed.

Problem:
1.
I need advice and I don't know where to find the funciton to display the picture number 2 and how to display the data and new object (3.) without update/refresh the whole webpage?

And

2
How do you create an icon to display loading picture?

Information:
- The page is based on ASP.mvc with C#

Answer 1

Use ajax functionality of either jquery or MVC ajax helpers.

You can find jquery ajax here .

and MVC ajax helper lib here

and here

you can make an ajax call to the server's websevice and it can return one of the well known web format (for eg json or XML). When the webservice call returns you can then "inject" the data in your html page with either javascript (dom manipulation) or using MVC helpers.

Here's one that could help.. http://www.asp.net/mvc/tutorials/older-versions/javascript/creating-a-mvc-3-application-with-razor-and-unobtrusive-javascript

Answer 2

使用ajax + PartialViews更新一些页面部分

Answer 3

You Can use jquery ajax which would call async action method(function). Data is returned the form of Json. You can write code to deserilize data and display it using jquery. Create a Action method which would return JsonResult as viewresult as

public JsonResult GetJsonData()
{
 return Json(new
                    { testDataResult =TestDataResultObj.Data
                       JsonRequestBehavior
                    }, JsonRequestBehavior.AllowGet);
}

and write following jquery code:- if (GetDataAsyc()) {

                        $.ajax({
                            type: "GET",
                            data: { testData: testDataResult },
                            url: url,// url of action method to be called asynch
                            dataType: "json",
                            cache: false,
                            traditional: true,
                            contentType: "application/json",
                            success: function (data) {

                                   // on success assign  testDataResult to messages //line
                                    $("#MessagesLines").html(testDataResult .Html);

                                }
                            },
                            error: function () {
                                //Display error message
                                $("ErrorMsg").html("There was error whey trying to process your request") 
                            }
                        });
                    }