Обновить div html и контент с помощью ajax

Question

У меня была бы функциональность, похожая на ссылку StackExchange в верхнем левом углу сайта Stack Overflow.

Как я понимаю, после того, как обмен ссылками стека щелкнул следующие вещи:

• скрытый DIV контейнер показан.

• этот DIV заполняется с HTML и фактические данные с помощью Ajax (возможно Jquery)

Я заметил, что HTML и данные не отображаются в разметке, так что я думаю, что это вероятно, извлекается с помощью javascript/jquery/ajax.

1 примечание - я использую asp.net mvc 2 и linq-to-sql.

Просьба привести примеры того, как это может быть достигнуто, или, может быть, ссылки на похожие примеры, спасибо.

Answer 1

Вы можете достичь этого с помощью методов jQuery и страниц в коде позади.

//Gets the list of requests 
function getRequestList() { 
    // call server-side webmethod using jQuery 
    $.ajax({ 
     type: "POST", 
     contentType: "application/json; charset=utf-8", 
     url: "Index.aspx/GetOrdersForApproving", 
     data: "{ }", // send an empty object for calls with no parameters 
     dataType: "json", 
     success: displayRequests, 
     failure: reportError 
    }); 
} 

//displays the requests in the ul 
function displayRequests(result) { 
    // ASP.NET encapsulates JSON responses in a property "d" 
    if (result.hasOwnProperty("d")) { result = result.d; } 
    // iterate through player list and add info to the markup 
    var ul = $("#requestsForApproval"); 
    for (i = 0; i < result.length; i++) { 

     var li = $("<li class='approvalListItem'><div>" 
    + "<h3>" + result[i].OrderID + " - " + result[i].Supplier + "</h3>" 
+ "</div>" 
+ "<div>" 
    + result[i].Description 
+ "</div>" 
+ "<div> " 
    + "<table width='100%'>" 
     + "<tr>" 
      + "<td>" 
       + "Quant: " + result[i].Quantity 
      + "</td>" 
      + "<td>" 
       + "Price: " + result[i].UnitPrice 
      + "</td>" 
      + "<td>" 
       + "Total: " + result[i].Value 
      + "</td>" 
     + "</tr>" 
    + "</table>" 
+ "</div>" 
    + " <div class='approvalButtons' style='display:none'>" 
    + "<ul><li class='approveButton'>Approve</li>" 
    + "<li class='rejectButton'>Reject</li></ul>" 
+ "</div>" 
+ "<input type='hidden' class='hiddenID' name='OrderLineID' value='" + result[i].OrderLineID + "'>" 
+ "</li>"); 
     ul.append(li); 
    } 

Код За:

/// <summary> 
/// Gets a list of Request Lines 
/// </summary> 
/// <returns>List of order lines</returns> 
[WebMethod] 
public static List<iOrderLine> GetOrdersForApproving() 
{ 
    try 
    { 
     List<iOrderLine> Lines = new List<iOrderLine>(); 
     foreach (Objects.Database.OrderLine oOrderLine in Objects.Database.OrderLine.GetLinesWaitingFor(StaticStore.CurrentUser.UserID, int.MinValue)) 
     { 
      Lines.Add(new iOrderLine(oOrderLine)); 
     } 

     return Lines; 
    } 
    catch (Exception) 
    { 
     throw; 
    }