如何使用C#更新多个div内容?

时间:2018-08-22 12:53:06

标签: c# html asp.net webforms

在从API获取响应中,我需要相应地更新div。 以下是我的 HTML 代码

<div class="col-md-2 mb-4">
    <div class="card mb-4" id="roomName_1" runat="server">
        <div class="card-header text-center">
            Room 1
        </div>
        <div class="card-body" style="background-color:#ff0000;color:white;">
            <p>
                <asp:Literal Text="Organizer" runat="server" ID="organiser_1" />
                <br />
                <label id="from_1">From</label>
                -
                <label id="to_1">To</label>
                <br />
                <asp:Literal Text="Subject" runat="server" ID="subject_1" />
            </p>
        </div>
    </div>
</div>

有24个这样的房间,对于每个房间,我必须更新从 GET 请求获得的组织者,发件人,发件人,主题

private void GetRoom(string uri) {
    var request = WebRequest.Create(uri);
    string text;
    var response = (HttpWebResponse)request.GetResponse();
    request.ContentType = "application/json; charset=utf-8";
    using(var sr = new StreamReader(response.GetResponseStream())) {
        text = sr.ReadToEnd();
        List<RoomConfigurationViewInfo> roomObject = JsonConvert.DeserializeObject < List<RoomConfigurationViewInfo>> (text);
        foreach(var value in roomObject) {
            Response.Write(value.Organizer);
            Response.Write(value.Subject);
        }

    }
}

那么,是否可以使用C#更新多个Div? &如果没有,那我该如何实现呢?

请提出建议。

2 个答案:

答案 0 :(得分:0)

I found a way that you can achieve this:

At first, add ID to your first tag: <div id="rooms" runat="server" class="col-md-2 mb-4">

Now in code behind, you can try this:

private void GetRoom(string uri) 
{
  var request = WebRequest.Create(uri);
  string text;
  var response = (HttpWebResponse)request.GetResponse();
  request.ContentType = "application/json; charset=utf-8";
  using(var sr = new StreamReader(response.GetResponseStream()))
  {
    text = sr.ReadToEnd();
    List<RoomConfigurationViewInfo> roomObject = JsonConvert.DeserializeObject < List<RoomConfigurationViewInfo>> (text);

    rooms.InnerHtml = "";

    for(int i = 0; i < roomObject.Count; i++) 
    {
        string strOrganizer = roomObject[i].Organizer;
        string strSubject = roomObject[i].Subject;
        string strFrom = roomObject[i].From;
        string strTo = roomObject[i].To;

        rooms.InnerHtml += "<div class=\"card mb-4\">"
                         + "<div class=\"card-header text-center\">"
                         + "Room " + i + "";
                         + "</div>"
                         + "<div class=\"card-body\" style=\"background-color:#ff0000;color:white;\">"
                         + "<p>"
                         + "<asp:Literal Text=\"" + strOrganizer "\" runat=\"server\" ID=\"organiser_" + i + "\"/>"
                         + "<br />"
                         + "<label>" + strFrom + "</label>"
                         + "-"
                         + "<label>" + strTo + "</label>"
                         + "<br />"
                         + "<asp:Literal Text=\"" + strSubject + "\" runat=\"server\" ID=\"subject_" + i + "\" />"
                         + "</p>"
                         + "</div>"
                         + "</div>";
    }
  }
}

I hope it helps you

答案 1 :(得分:0)

这取决于您是否动态进行。如果您只是加载页面并更新div,请将其作为变量传递,然后对其进行迭代。

您页面上的代码将如下所示:

@model IEnumerable<WebSQLserver.Models.Employee>

@{
    ViewBag.Title = "ViewAll";
    Layout = null;
}


<table class="table table-striped table-condensed" id="employeeTable">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Position)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Office)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Salary)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>

        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Position)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Office)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Salary)
                </td>
                <td>
                    <a class="btn btn-primary btn-sm" onclick="Edit('@Url.Action("AddOrEdit", "Employee", new { id=@item.EmployeeID})')"><i class="fa fa-pencil fa-lg"></i></a>
                    <a class="btn btn-danger btn-sm" onclick="Delete('@Url.Action("Delete", "Employee", new { id=@item.EmployeeID})')"><i class="fa fa-trash fa-lg"></i></a>
                </td>
            </tr>
        }
    </tbody>
</table>

如果您尝试动态地执行此操作,则上面的注释器是正确的,您必须通过jQuery / Javascript来执行。