MVC动态拼接页面

MVC动态拼接页面

          MVC动态的拼接页面，根据用户的事件动态的加载要显示的数据到页面，如下

          首先，在页面写一个控件

          <form id="frm"></form>

          然后在JS中写代码，调用后台的数据，JS中使用控件InnerHTML方法

function selectOnchang(obj) {
    //获取被选中的option标签选项
    var Num =obj.selectedIndex;
    var bb =document.getElementById("frm");
    bb.innerHTML= "";
    $.ajax({
        type:"POST",
        url:"/QueryResult/QueryInfo",
        //传递的参数
        data:{
           "Num": Num,          
        },//传入控件的字符串
       success: function (data) {
           console.log(data);
            bb.innerHTML = data;          
        }
    })
}

          最后，在Controller中写方法，查询数据返回拼接的字符串。

public string QueryInfo(string Num)
        {
            //获取试题ID
           //string Num = Request.QueryString["Num"];
            //获取所有的审批，按时间排序
           List<QueryResultViewModel> Info = QueryAllType(Num);
            //获取审批个数
           int Number = Info.Count;
            //初始化strHTML
           StringBuilder strRadioBtn = new StringBuilder();
            //循环遍历，动态拼接
           for (int i = 0; i < Number; i++)
            {
               strRadioBtn.Append("<div class=\"panel panel-default\"style=\"width:1075px; margin-left:10px;\">");
               strRadioBtn.Append("<div class=\"panel-heading\">审批类型—" + Info[i].departmentName + "<span style=\"margin-left:820px\">状态："+ Info[i].accumulateStates + "</span>" +"</div>");
               strRadioBtn.Append("<divclass=\"panel-body\">");
               strRadioBtn.Append("<div>");
               strRadioBtn.Append("<span >用户名："+ Info[i].userName + "</span>");
               strRadioBtn.Append("</div>");
               strRadioBtn.Append("<divstyle=\"float:left;margin-left:820px;margin-top:-20px;\">");
               strRadioBtn.Append("<span >上传日期："+ Info[i].date + "</span><br>");
               strRadioBtn.Append("</div>");
               strRadioBtn.Append("<span >审批内容："+ Info[i].accumulateDescription + "</span><br>");
               strRadioBtn.Append("<span >回复内容："+ Info[i].operaterResponse + "</span><br>");
               strRadioBtn.Append("<div>");
               strRadioBtn.Append("<span >审批人："+ Info[i].operaterName + "</span>");
               strRadioBtn.Append("</div>");
               strRadioBtn.Append("<divstyle=\"float:left;margin-left:820px;margin-top:-20px;\">");
               strRadioBtn.Append("<span >审批日期："+ Info[i].operaterDate + "</span>");
               strRadioBtn.Append("</div>");
               strRadioBtn.Append("</div>");
               strRadioBtn.Append("</div>");
            }
            //返回页面
           return strRadioBtn.ToString();
        }