Question

我目前正在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>
}

这是addFixed Ajax调用

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

这是Ajax调用的ViewResult控制器操作

    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链接时，页面会从这样的

开始

enter image description here

到这个

enter image description here

下面的评论是页面的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 id="fixedRows">，但是，这返回了相同的结果。然后我更改了Ajax调用的success属性，以包含一些基本的HTML，如此

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

但又一次，得到了同样的结果。在Visual Studio和Chrome的调试器中设置断点之后，我能够看到Ajax永远不会被调用。而是调用控制器操作，部分视图自己加载，而不是附加到<table id="fixedRows">。

然而，如果有人有任何想法，仍然会努力解决这个问题。 THX！

Answer 1

所以这种情况发生的原因很简单。由于正在使用的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); }
        });
    });

});

Answer 2

使用您的代码可能会出现这种情况的唯一方法是，如果它不是用简单的HTML替换页面内容，而是直接加载该操作浏览器标签。默认情况下，您的操作链接将执行哪些操作。

确保“添加其他”链接的点击处理程序使用event.preventDefault()或只返回false;如果你没有阻止链接的默认操作，你的AJAX代码就会这样做，然后浏览器会像正常一样加载链接，使它看起来不起作用。
确保页面上没有JavaScript错误。如果JS停止工作，那么默认行为将再次接管并获得您看到的结果。

Answer 3

我认为您在<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中指定的内容。

比较

破碎：http://jsfiddle.net/83EAT/1/
工作：http://jsfiddle.net/hT34k/3/

Answer 4

我尝试避免在部分视图上执行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是解决这个问题的方法。

ASP MVC3 - 使用局部视图将新的HTML元素附加到页面

4 个答案: