如何从C#代码后面更新多个div的innerhtml?

时间:2015-06-05 06:39:50

标签: javascript c# jquery html asp.net

我设法执行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;
                }         
            }

可以这样做吗?如果是这样怎么办?

1 个答案:

答案 0 :(得分:0)

当页面已经完成时,您无法使用服务器端功能来影响页面。简单地说,ASP.NET会生成一个页面,将其发送到您的浏览器并忘记它。

如果要在ASP.NET视图的div中填充数据,可以通过多种方式完成此操作。

在ASP.NET视图生成期间

您不需要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. */
}

这是一个已经生成的。如果你运行这个页面,那么你将拥有与table.Rows

中的行一样多的数据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);
   });
});