詳細ビューへのJSON文字列データのバインド

Question

実際にJSON文字列をスクリプトに渡して、詳細ビューに表示したいと考えています。

これはmodalScreenだけでポップアップを作成

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 = ''; 

      } 

     }); 

ように私はjQueryが見えるものです。

 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内のデータ変数にアクセスすることはできません。これは、路Div1これはmycodebehindある

  <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> 

で構成するものです。だからあなたは私にこれに対処する方法を教えてもらえますか？

また、コードビハインドで書いた質問が表示されます。だから、私はこれを行うための他の方法を考え出すことができますか？

Answer 1

AJAX経由で情報を表示しようとする場合は、詳細ビュー（サーバー側のコントロール）を使用する必要はありません。あなたが本当にそれを使用したい場合は、update panelとpartial page postbackを使用してコントロールを作成する必要があります。あなたはあなたが向かう道の方がいいです。

まずアップあなたのHTMLは、の線に沿って次のようになります。

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(); 

      } 

     }); 

：

<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> 

私は

あなたのjQueryをもっとする必要があります見ることができない理由はないと完全にスタイル路Div1はありません

jQueryについてもう少し詳しくお読みください。 selectors、CSS、EffectsおよびAJAXをご覧ください。