如何從后面的C＃代碼更新多個div的innerhtml？

Question

我設法執行C＃函數，使用不引人注目的方法為div的InnerHtml返回序列化的字符串。

<script>
$("#btnSubmit").click(function(){                                   
            bal.innerHTML = <%=ToInternalHTML()%>;    
</scrtipt>

但是有多個div需要基於C＃背后的代碼中的數據庫數據編寫innerhtml。 所以我想使用相同的服務器端函數ToInternalHTML() 。 當前正在返回一個字符串。 但是我需要在此函數中從服務器端將innerHtml寫入特定的div，然后從javascript執行此函數。

foreach (DataRow row in table.Rows)
            {
                string rType = row[0].ToString();

                sbhtml.Append(@"<div><a href=""#""class=""item""><p>");
                sbhtml.Append(row[1].ToString());
                sbhtml.Append("</p></a></div>");

                switch (rType)
                {
                    case "Clinical":
                        bal.InnerHtml = (new JavaScriptSerializer()).Serialize(sbhtml);
                        break;
                    case "Rehab":
                        rom.InnerHtml = (new JavaScriptSerializer()).Serialize(sbhtml);
                        break;
                }         
            }

能做到嗎？ 如果可以，怎么辦？

Answer 1

當頁面完成時，不能使用服務器端功能來影響頁面。 簡而言之，ASP.NET生成一個頁面，將其發送到您的瀏覽器，然后將其遺忘。

如果要在ASP.NET視圖的div中填充數據，則可以通過多種方式進行。

在ASP.NET View生成期間

您不需要StringBuilder或其他東西即可形成HTML元素。 使用以下方法：

foreach (DataRow row in table.Rows)
{
    <div>
        <a href="#" class="item">
            <p>row[1].ToString()</p>
        </a>
    </div>               
    /* Generate any divs here. Add any data from your table.Rows etc. */
}

這是一個已經生成的。 如果運行此頁面，則包含數據的div將與表中的行數一樣多。

使用Ajax。

// C# controller

public class MyController : Controller 
{
    public ActionResult Index()
    { 
        return View();
    }

    public JsonResult GetData()
    {
        YourEntity[] data = GetFromSomewhere();
        return new JsonResult(Data = data, JsonRequestBehaviour = JsonRequestBehaviour.AllowGet);
    } 
}

// JS script
    $(document).ready(function()
{
   $.ajax({
        url: '@Url.Action("GetData")',
        type: 'GET'  
}).done(function(data){
   $.each(data, function()
   {
       var yourEntity = this;
       // Manipulate with DOM here. Change inner HTML of div or append it
       var div = $("<div></div>");
       $(div).text(yourEntity.Id);
       $("body").append(div);
   });
});