Question

在我看来，我有一个带有foreach循环的表，它在我的模型中显示数据。

<table id="dt_table_tools" class="table table-striped table-condensed">
    <thead>
        <tr>
            <th>@Html.DisplayNameFor(model => model.ItemOptions.First().Active)</th>
            <th>@Html.DisplayNameFor(model => model.ItemOptions.First().ItemOptionCode)</th>
            <th>@Html.DisplayNameFor(model => model.ItemOptions.First().Name)</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (ItemDetailItemOptionViewModel ItemOption in Model.ItemOptions)
        {

            <tr>
                <td>@Html.DisplayFor(model => ItemOption.Active)</td>
                <td>@Html.DisplayFor(model => ItemOption.ItemOptionCode)</td>
                <td>@Html.DisplayFor(model => ItemOption.Name)</td>

                <td>
                @Html.ActionLink("Edit", "Edit", new { id = ItemOption.ItemOptionId }) 
                </td>

            </tr>
        }
    </tbody>
</table>

然后我有一个模态表单允许我通过ajax调用将新数据添加回服务器，然后在表的末尾添加一行以显示新数据：

var handleSuccess = function (result) {
    if (result.success) {
        var $tr = $('<tr>').append(
            $('<td>').text(result.Active),
            $('<td>').text(result.ItemOptionCode),
            $('<td>').text(result.Name),
            $('<td>')
            ).appendTo('#dt_table_tools');
    } else {
        $('#itemOptionFormContainer').html(result);
    }
};

除了添加到表中的新行不以相同格式显示之外，这一切都正常。例如，“有效”列显示“真实”而不是勾选框：

enter image description here

如何让jquery代码使用@Html.DisplayFor(model => ItemOption.Active)以便数据按预期显示？

Answer 1

您应该知道服务器调用DisplayFor函数，客户端将调用handleSuccess函数。

您要做的是，让客户端调用DisplayFor函数。客户端（浏览器）不知道DisplayFor，它是System.Web.Mvc.dll中的.NET函数。

所以你应该做的是“5te”解释。服务器应该向您的AJAX调用返回PartialViewResult。要使其工作，请创建一个视图并将其放在其中：

@model YourModelType
<tr>
            <td>@Html.DisplayFor(m => m.ItemOption.Active)</td>
            <td>@Html.DisplayFor(m => m.ItemOption.ItemOptionCode)</td>
            <td>@Html.DisplayFor(m => m.ItemOption.Name)</td>

            <td>
            @Html.ActionLink("Edit", "Edit", new { id = ItemOption.ItemOptionId }) 
            </td>

</tr>

在处理AJAX调用的Action中，执行以下操作：

ActionResult YourAjaxHandlingAction(...args...)
{
    if(/*There is no error in your model*/)
    {
        YourModelType model = new YourModelType();


        // initialize an instance of YourModelType
        // using ...args...
        model.ItemOption.Active = ...;
        model.ItemOption.ItemOptionCode = ...;
        model.ItemOption.Name = ...;

        return PartialView("NewlyCreatedViewName", model);
    }
    else
    {
        // You can choose whatever http status code makes sense
        // e.g 301, 400 etc..
        return HttpStatusCodeResult(400, "An error occurred");
    }
}

现在在Javascript中，您应该像以前一样附加传入的HTML。根据您进行ajax调用的方式，此部分会更改（AjaxHelper或jquery.ajax？）。

修改的

我编辑了上面的代码，以包含在出现错误时应该执行的操作。当您进行AJAX调用时，您可以使用失败处理程序在屏幕上显示您想要的任何内容。

Answer 2

试试这个

var $tr = $('<tr>').append(
            $('<td><input type="checkbox" checked="@result.active"/></td>'),
            $('<td>').text(result.ItemOptionCode),
            $('<td>').text(result.Name),
            $('<td>')
            ).appendTo('#dt_table_tools');

Answer 3

它仍然与模型相关联，但如果您将它用于复选框，这可能仍然会派上用场。你可以在javascript中包含html.display

$('<td>').text('@Html.DisplayFor(x => x.ItemOption.Active)'),

Answer 4

您可以更改AJAX ASP.NET MVC操作以返回PartialViewResult而不是JSON。然后，这个局部视图将包含使用您希望使用的典型Html.DisplayFor方法显示表行所需的Html（并且您可以通过重构您当前使用的视图来免费获得此视图）。然后，您的jquery会将返回的Html附加到表中，而不是尝试构造新行：

$(result).appendTo('#dt_table_tools');

但是，如果您不想从JSON更改操作，那么我认为最好的办法是使用另一个响应中提到的克隆。

在jquery ajax插入中使用HTML.DisplayFor

4 个答案: