6

我目前在我的 ASP MVC3 视图上使用 Ajax 调用来将新列表项附加到页面。该视图进行 Ajax 调用，该调用调用一个控制器ViewResult操作，该操作返回部分视图。然后将 Ajax 设置为调用源自调用.append(html)的元素上的方法。<div>

问题是，不是附加新行，而是整个视图消失，只显示部分视图。

这是视图中的代码。此视图使用具有单独模型的列表对象的视图模型。这部分代码调用局部视图来显示列表对象中的每个项目。

@model Monet.ViewModel.BankListViewModel
@using (Html.BeginForm())
{
    <fieldset>
        <legend>Stat(s) Fixed</legend>
        <table>
        <th>State Code</th>
        <th>Agent ID</th>
        <th></th>
            <div class="fixedRows">
                @foreach(var item in Model.Fixed)
                {
                    if (!String.IsNullOrWhiteSpace(item.AgentId))
                    {

                            @Html.Partial("FixedPartialView", item) 

                    }      
                }
            </div>
        </table>
        <br />
        @Html.ActionLink("Add another", "BlankFixedRow", null, new { id = "addFixed"})
    </fieldset>
}

这是addFixedAjax 调用

$("#addFixed").click(function () {
    $.ajax({
        url: this.href,
        cache: false,
        success: function (html) { $("#fixedRows").append(html); }
    });
    return false;
});

这是ViewResultAjax 调用的控制器操作

    public ViewResult BlankFixedRow()
    {
        SelectList tmpList = new SelectList(new[] { "AL", "AK", "AS", "AZ", "AR", "CA", "CO", "CT", "DE", "DC", "FM", "FL", "GA", "GU", "HI", "ID", "IL", "IN", "IA", "KS", "KY", "LA", "ME", "MH", "MD", "MA", "MI", "MN", "MS", "MO", "MT", "NE", "NV", "NH", "NJ", "NA", "NM", "NY", "NC", "ND", "MP", "OH", "OK", "OR", "PW", "PA", "PR", "RI", "SC", "SD", "TN", "TX", "UT", "US", "VT", "VI", "VA", "WA", "WV", "WI", "WY" });
        ViewBag.StateCodeList = tmpList;

        return View("FixedPartialView", new BankListAgentId());
    }

最后，这是部分观点。

@model Monet.Models.BankListAgentId


@using (Html.BeginCollectionItem("Fixed"))
{
    <tr id="item-@Model.AgentId">
        <td>
            @Html.DropDownListFor(model => model.StateCode,
                (SelectList)ViewBag.StateCodeList, Model.StateCode)
        </td>
        <td>
            @Html.EditorFor(model => model.AgentId)
            @Html.ValidationMessageFor(model => model.AgentId)
        </td>
        <td>
        <a href="#" onclick="$('#item-@Model.AgentId').parent().remove();" style="float:right;">Delete</a></td>
    </tr>
}

选择Add another链接后，页面看起来像这样

在此处输入图像描述

对此

在此处输入图像描述

根据下面的评论，这里是页面的 HTML：

<input type="hidden" name="Fixed.index" autocomplete="off" value="6dd1b028-14f7-4400-95d1-a803c2521b68" />
        <tr id="item-">
            <td>
                <select id="Fixed_6dd1b028-14f7-4400-95d1-a803c2521b68__StateCode" name="Fixed[6dd1b028-14f7-4400-95d1-a803c2521b68].StateCode"><option>AL</option>
<option>AK</option>
<option>AS</option>
<option>AZ</option>

.
.
. <-removed list of all 50 states for clarity
</select>
            </td>
            <td>
                <input class="text-box single-line" id="Fixed_6dd1b028-14f7-4400-95d1-a803c2521b68__AgentId" name="Fixed[6dd1b028-14f7-4400-95d1-a803c2521b68].AgentId" type="text" value="" />

            </td>
            <td>
                <a href="#" class="deleteRow">delete</a>
            </td>

        </tr>
                    </section>

编辑

阅读下面的评论后，我将 table 标记更改为<table id="fixedRows">，但是，这返回了相同的结果。然后我更改了successAjax 调用的属性以包含一些基本的 HTML，如下所示

success: function (html) { $("#fixedRows").append("<tr><td>New</td></tr>"); }

但同样，得到了相同的结果。在 Visual Studio 和 Chrome 的调试器中设置断点后，我可以看到 Ajax 从未被调用。相反，会调用控制器操作，并且部分视图会自行加载，而不是附加到<table id="fixedRows">.

但是，如果有人有任何想法，仍在努力解决这个问题。谢谢！

4

4 回答 4

2

所以发生这种情况的原因很简单。由于正在使用 ActionLink，控制器操作将在 jQuery 之前触发。这导致部分视图消灭了整个Edit视图。通过将 jQuery 绑定到$(document).ready块内的超链接，jQuery 可以正常运行。下面是标签和更新的 jQuery

<a href="#" class="addFixed">Add Another</a>

jQuery：

$(document).ready(function () {

    $(".addFixed").click(function () {
        //alert('test');
        event.preventDefault();        
        $.ajax({
            url: '@Url.Action("BlankFixedRow", "BankListMaster")',
            cache: false,
            success: function (html) { $("#fixedRows").append(html); }
        });
    });

    $("#addVariable").click(function () {
        event.preventDefault();
        $.ajax({
            url: '@Url.Action("BlankFixedRow", "BankListMaster")',
            cache: false,
            success: function (html) { $("#variableRows").append(html); }
        });
    });

});
于 2013-04-08T22:04:37.463 回答
0

您拥有的代码可能会发生这种情况的唯一方法是，如果它不是用那段简单的 HTML替换页面内容，而是直接在浏览器选项卡中加载该操作。默认情况下，您的操作链接将执行哪个操作。

  1. 确保您的“添加另一个”链接的点击处理程序使用event.preventDefault()或仅返回 false；如果您不阻止链接的默认操作，您的 AJAX 代码将执行此操作，然后浏览器将正常加载链接，使其看起来好像不起作用。

  2. 确保页面上没有 JavaScript 错误。如果 JS 停止工作，那么默认行为将再次接管，你会得到你看到的结果。

于 2013-04-03T18:44:34.833 回答
0

我认为您在<table>标签中对 div 的使用令人困惑jQuery.append。

请尝试以下操作：

<fieldset>
    <legend>Stat(s) Fixed</legend>
    <table id="fixedRows">
        <tr>
            <th>State Code</th>
            <th>Agent ID</th>
        </tr>
        @foreach(var item in Model.Fixed)
        {
            if (!String.IsNullOrWhiteSpace(item.AgentId))
            {
                @Html.Partial("FixedPartialView", item) 
            }      
        }
    </table>
    <br />
    @Html.ActionLink("Add another", "BlankFixedRow", null, new { id = "addFixed"})
</fieldset>

另请注意，我使用id="fixedRows"了而不是class="fixedRows"因为这是您在 jQuery 中指定的内容。

比较：

于 2013-04-03T18:51:04.193 回答
0

我尽量避免对部分视图进行 AJAX 调用。AJAX 要求您记住最后一页的状态以便重新显示信息。话虽如此，您可以返回控制器并调用局部视图，然后让服务器调用与您的视图一起显示局部视图：

 @Html.Partial("FixedPartialView", new BankListAgentId(){/*Construct the View Model Here here. assign the properties to your view model */  AgentId = /*however your creating this*/})

我不认为 AJAX 是解决这个问题的方法。

于 2013-04-04T12:33:52.377 回答