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

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

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

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

@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="[e-mail]">
        <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="$('#[e-mail]').parent().remove();" style="float:right;">Delete</a></td>
    </tr>
}

当选择添加另一个链接时,页面看起来像这样

对此

下面的评论是这个页面的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”>.

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

解决方法

所以这种情况发生的原因很简单.由于正在使用的ActionLink,控制器操作将在jQuery之前触发.这导致局部视图消除整个编辑视图.通过将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")',success: function (html) { $("#fixedRows").append(html); }
        });
    });

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

});