ASP.NET MVC Ajax (jQuery): генерировать код на стороне сервера?

Question

Я хочу динамически загружать некоторые html-данные с сервера (например, сетку, состоящую из лотов f и), используя jQuery.

На данный момент я загружаю это так:

$("#Ricerca_Div_ContenitoreRisultati table tbody").load("/Segnalazioni/CercaSegnalazioni/3");

и сгенерируйте его так:

    public ActionResult CercaSegnalazioni(int flag, string sort)
    {
        [..]

        XElement SegnalazioniTrovate = Models.Segnalazioni.Recupera(flag, sortVal);
        string ritorno = "";
        bool alterna = false;
        foreach (XElement segnalazione in SegnalazioniTrovate.Elements("dossier"))
        {
            ritorno += alterna? "<tr>" : "<tr class = \"alternata\">";
            ritorno += String.Format(@"
                <td><span style=""white-space: nowrap"">{0}</span></td>
                <td><span style=""white-space: nowrap"">{1}</span></td>
                <td style =""display : none"">{2}</td>
                <td><span style=""white-space: nowrap"">{3}</span></td>
                <td><span style=""white-space: nowrap"">{4}</span></td>
                <td><span style=""white-space: nowrap"">{5}</span></td>
            </tr>",
            (string)segnalazione.Element("NUM_DOSSIER") ?? "",
            (string)segnalazione.Element("ANAG_RAGSOC_CGN") ?? "",
            (string)segnalazione.Element("ID_RIFATT_SEGN0") ?? "",
            Tools.DecodificaStatus(int.Parse((string)segnalazione.Element("FLG_STATUS") ?? "")),
            Tools.RmuoviTime((string)segnalazione.Element("DT_ACCADIMENTO")?? ""),
            (string)segnalazione.Element("COD_RAMO_LUNA") ?? ""
            );

            alterna = !alterna;
        }
        return Content(ritorno);
    }

Или, проще говоря, я создаю серверную часть кода HTML с очень грязным кодом, который мне не нравится, и возвращаю его обратно, чтобы он был готов к использованию на стороне клиента.

Есть ли лучшее / более чистое решение? Спасибо

Answer 1

Более чистое решение будет создавать отдельный вид и использовать больше CSS:

ОБНОВЛЕНИЕ:

В случае Request.IsAjaxRequest () используйте PartialView:

Контроллер:

public ActionResult CercaSegnalazioni(int flag, string sort)
{
    [..]

    XElement SegnalazioniTrovate = Models.Segnalazioni.Recupera(flag, sortVal);

    return PartialView("YourPartialView", SegnalazioniTrovate);
}

YourPartialView.ascx:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<XElement>" %>

<% bool alterna = false; %>
<table id="yourTableId">
    <% foreach (XElement segnalazione in SegnalazioniTrovate.Elements("dossier")) { %>
    <tr class="<%= alterna ? "alternata" : "" %>">
    <% alterna = !alterna; %>
        <td>
            <span><%= (string)segnalazione.Element("NUM_DOSSIER") ?? "" %></span>
        </td>
        <td>
            <span><%= (string)segnalazione.Element("ANAG_RAGSOC_CGN") ?? "" %></span>
        </td>
        <td class="nodisplay">
            <%= (string)segnalazione.Element("ID_RIFATT_SEGN0") ?? "" %>
        </td>
        <td>
            <span><%= Tools.DecodificaStatus(int.Parse((string)segnalazione.Element("FLG_STATUS") ?? "")) %></span>
        </td>
        <td>
            <span><%= Tools.RmuoviTime((string)segnalazione.Element("DT_ACCADIMENTO")?? "") %></span>
        </td>
        <td>
            <span><%= (string)segnalazione.Element("COD_RAMO_LUNA") ?? "" %></span>
        </td>
    </tr>
    <% } %>
</table>

CSS:

table#yourTableId td span {
    white-space: nowrap
}

.nodisplay {
    display : none
}

Answer 2

Есть разные способы сделать это, и хотя ни один из них в итоге не выглядит идеально чистым, для меня лучше всего работает построение HTML на стороне клиента. Сервер может вернуть объект, который хорошо работает в javascript (скажем, List<Segnalazione>), а затем обработчик на стороне клиента делает такие вещи:

$(list).each(function() {
  var tr = $('<tr />').append(
    $('<td />').css('white-space', 'nowrap').text(this.NUM_DOSSIER)
  ).append(
    $('<td />').css('white-space', 'nowrap').text(this.ANAG_RAGSOC_CGN)
  )

  $("#Ricerca_Div_ContenitoreRisultati table tbody").append(tr);
});

Очевидно, я слишком упрощаю ваши выводы, но, надеюсь, это даст вам идею.

Если ничего другого, то выполнение этого в jquery дает вам автоматическое экранирование значений в методах text, attr и css вместо методов HttpUtility.HtmlEncode, AttributeEncode, которые загромождают ваш вывод в C #

Answer 3

Ваш лучший выбор, вероятно, состоит в том, чтобы отделить презентацию от данных. Это будет означать, что в вашем контроллере не будет кода представления (т.е. генерация HTML).

Есть 2 способа справиться с этим ...

Вложенные частичные представления

Частичные виды могут отображать ... другие частичные виды. Рассмотрим что-то вроде этого ...

<body> Page
-- <div> Partial View "parent" (does a RenderPartial of these:)
---- <div> Partial View "child" (piece 1) </div>
---- <div> Partial View "child" (piece 2) </div>

Родительское частичное представление просто содержит RenderPartials для дочерних элементов. Кроме того, у каждого внутреннего просмотра может быть свой собственный URL (/ controller / parent /, / controller / child-1 / и т. Д.). В jQuery, когда вы перехватываете событие, которое требует обновления пользовательского интерфейса, вы можете просто ajax.load нужную вам часть и вставить ее в div.

JSON -> jQuery Render

Другой способ - вы отказываетесь от сервера, создающего какой-либо код представления, и у вас просто есть API, который возвращает JSON. Затем jQuery принимает входящие объекты данных и выясняет, что с ними делать. В зависимости от сложности того, что нужно визуализировать на стороне клиента, это может быть проще. Это имеет преимущество в том, что он позволяет повторно использовать тот же код на стороне сервера другими способами. Недостатком является то, что контент не будет проиндексирован поисковыми системами.