將JSON字符串數據綁定到詳細信息視圖

Question

實際上，我將JSON字符串傳遞給該腳本，並希望將其顯示在detailsview中。

這是我的jQuery是什麼樣子

function onBeforeClientInsert(record) { 


    var eventtype = parseInt(record.<%= CEO.FieldEvaluator.GetEvaluatorByDId("EVENT_TYPE_ID").GetFieldDataFieldId()%>); 
    var begindate = record.<%= CEO.FieldEvaluator.GetEvaluatorByDId("BeginDate").GetFieldDataFieldId()%>; 
    var enddate = record.<%= CEO.FieldEvaluator.GetEvaluatorByDId("EndDate").GetFieldDataFieldId()%>; 

    $.ajax({ 
      type: "POST", url: "Data.aspx/CheckInsertRecord", 
      data: "{EventType:'" + eventtype + "',BeginDate:'" + begindate + "'," + 
        "EndDate:'" + enddate+"' }", 
      contentType: "application/json; charset=utf-8", dataType: "json", 
      success: function (msg) { 
       if(msg.d == "No duplicate"){ 

       } 
       else{ 
        alert(msg.d); 
        eval("var data = "+msg.d+";"); 
        alert(data[0].BeginDate); 
        alert(data[0].EVENT_TYPE_ID); 
        } 
        var modal = document.getElementById('Div1'); 
     modal.style.display = ''; 
     modal.style.position = 'fixed'; 
     modal.style.zIndex = '100'; 
     modal.style.left = '30%'; 
     modal.style.top = '40%'; 

        var screen = document.getElementById('modalScreen'); 
     screen.style.display = ''; 

      } 

     }); 

modalScreen只是創建了一個彈出窗口。這是Div1構成由

  <div style="display: none; background-color: White; width: 450px; height: 150px;" 
        id="Div1"> 
    <asp:Label ID="Label1" Text="HI" runat="server"></asp:Label> 
    <asp:DetailsView ID="de" runat="server" AutoGenerateRows="True" Height="50px" Width="301px"> 
    <Fields> 
    <asp:TemplateField> 
    <ItemTemplate> 
    <asp:Label ID="Label1" runat="server" Text='<%# Eval(data[0].EVENT_TYPE_ID) %>'></asp:Label> 
    </ItemTemplate> 
    </asp:TemplateField> 
    </Fields> 

    </asp:DetailsView> 
    <input type="button" onclick="Hide()" value="OK" /> 
</div> 

這是mycodebehind：

 public static string CheckInsertRecord(String EventType, String BeginDate, String EndDate) 
{ 
    NCDCPoint ncdc = new NCDCPoint(); 
    CEOSurveyDataContext CDC = new CEOSurveyDataContext(); 
    int et = Convert.ToInt32(EventType); 
    CultureInfo provider = CultureInfo.InvariantCulture; 
    DateTime b = Convert.ToDateTime(BeginDate); 
    DateTime e = Convert.ToDateTime(EndDate); 
    DetailsView a = new DetailsView(); 

     var query = (from n in CDC.NCDCPoints 
       where n.EVENT_TYPE_ID == et && n.BeginDate == b && n.EndDate == e 
       select new { 
        n.EVENT_TYPE_ID, 
       BeginDate = n.BeginDate.ToString("yyyy-MM-dd",provider), 
       EndDate = n.EndDate.ToString(), 
       n.BeginLAT, 
       BeginLONG = n.BeginLONG, 
       n.EndLAT, 
       n.EndLONG}); 

    if (query.Any()) 
    { 
     return new JavaScriptSerializer().Serialize(query.ToList()); 
    } 
    else 
    { 
     return "No duplicate"; 
    } 

}

所以，我不能訪問內部Div1構成數據變量。那麼你們可以讓我知道我可以如何處理這個問題嗎？

此外，我在代碼隱藏中編寫的查詢是我需要顯示的內容？那麼，你能找到任何其他方式來做到這一點嗎？

Answer 1

如果你只是想通過AJAX顯示一些信息，你不需要使用細節視圖，這是一個服務器端控件。如果你真的想使用它，你需要使用update panel和partial page postback來填充控件。你對自己的方式更好。

首先你的HTML應該是沿着線：

<div id="Div1" style="display: none; background-color: White; width: 450px; height: 150px;position:fixed;zIndex:100;left30%;top40%;> 
    <div>Begin Date:<span id="beginDate"></span></div> 
    <div>EventTypeID:<span id="eventTypeID"></span></div> 
</div> 

沒有理由不充分的風格Div1構成，我可以看到

你的jQuery應該更像：

function onBeforeClientInsert(record) { 
     var eventtype = parseInt(record.<%= CEO.FieldEvaluator.GetEvaluatorByDId("EVENT_TYPE_ID").GetFieldDataFieldId()%>); 
     var begindate = record.<%= CEO.FieldEvaluator.GetEvaluatorByDId("BeginDate").GetFieldDataFieldId()%>; 
     var enddate = record.<%= CEO.FieldEvaluator.GetEvaluatorByDId("EndDate").GetFieldDataFieldId()%>; 

     $.ajax({ 
      type: "POST", url: "Data.aspx/CheckInsertRecord", 
      data: "{EventType:'" + eventtype + "',BeginDate:'" + begindate + "'," + 
        "EndDate:'" + enddate+"' }", 
      contentType: "application/json; charset=utf-8", dataType: "json", 
      success: function (msg) { 
       if(msg.d == "No duplicate"){ 

       } 
       else{ 
        alert(msg.d); 
        var data = jQuery.parseJSON(msg.d); //safer than eval 
        alert(data[0].BeginDate); 
        alert(data[0].EVENT_TYPE_ID); 
        } 

        //Set the values 
        $("#beginDate").html(data[0].BeginDate); 
        $("#eventTypeID").html(data[0].EVENT_TYPE_ID); 

        //Show Divs 
        $("#Div1").show(); 
        $("#modalScreen").show(); 

      } 

     }); 

從外觀上看，您應該多閱讀一下jQuery。看看selectors,CSS,Effects和AJAX。