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

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>
}

这是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 id="fixedRows">,但是,这返回了相同的结果.然后我更改了successAjax调用的属性以包含一些基本的HTML

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

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

然而,如果有人有任何想法,仍在努力解决这个问题.谢谢!

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); }
        });
    });

});