刷新局部视图中的内容会导致局部视图重复答案

【问题标题】：Refreshing content in a partial view results in partial view duplication刷新局部视图中的内容会导致局部视图重复
【发布时间】：2014-05-29 09:49:19
【问题描述】：

我正在尝试使用 jQuery ajax 在按钮单击时刷新局部视图中的内容，但它不起作用，我得到的只是重复的局部视图。相同的局部视图在弹出窗口中呈现两次。

这是我的 index.cshtml，其中包含我在单击弹出窗口内的按钮时尝试更新的弹出窗口。

<div id="divAddSchedule" class="overlay_form" style="display:none;">
@{ Response<ScheduleType>response = new Response<ScheduleType>(); 
   Html.Partial("AddScheduleType", response);
 }
</div>

这是AddScheduleType部分视图cshtml

    <a href="#" class="pop-close" title="close" onclick="ClosePopup()"></a>
<div class="popup-wrap edit-insitute add-user">
    <h2 id="popupTitle"></h2>

    <label for="rdResident">Resident</label>
    <input type="radio" id="rdResident" />
    <label for="rdAttending">Attending</label>
    <input type="radio" id="rdAttending" />

    <br clear="all" />
    <div id="divTypeList">

        <table cellpadding="0" cellspacing="0" class="edit popuptable" style="margin-bottom: 0px;">
            @{ if (Model.DataList != null && Model.DataList.Count > 0) { foreach (var sch in Model.DataList) {
            <tr>
                <td class="lblForTd" width="250px">@sch.Name
                </td>

                <td class="lblForTd" width="250px">@sch.Description
                </td>
            </tr>
            } } }
        </table>
        <br clear="all" />

        <div>
            <label>
                Schedule Type Name
            </label>
            <input type="text" id="txtScheduleName" />
            <label>
                Description
            </label>
            <textarea id="txtDescription"></textarea>
            <a id="btnAddScheduleType" href="#" onclick="AddScheduleType();">Add
        </a>
        </div>

    </div>

</div>

这里是局部视图控制器，它在弹出窗口和单击按钮时都被调用以将新内容添加到现有列表中。

public PartialViewResult AddScheduleType(string name, string description)
    {
        DataTable dt = new DataTable();
        Response<ScheduleType> response = new Response<ScheduleType>();

        dt.Columns.Add("Name");
        dt.Columns.Add("Description");



        for (int i = 0; i < 5; i++)
        {
            DataRow dr = dt.NewRow();
            dr["Name"] = "Hari";
            dr["Description"] = "New kid on the block";
            dt.Rows.Add(dr);

        }

        IList<ScheduleType> instList = dt.AsEnumerable().Select(row =>
                    new ScheduleType
                    {
                        Name = row.Field<string>("Name"),
                        Description = row.Field<string>("Description")
                    }).ToList();

        if (name != null && description != null)
        {
            ScheduleType obj = new ScheduleType();
            obj.Name = name;
            obj.Description = description;

            instList.Add(obj);
        }

        response.DataList = instList;

        return PartialView("AddScheduleType", response);

这里是更新局部视图列表的 jQuery AJAX 调用

    function AddScheduleType() {
    $.ajax({
        type: "GET",
        url: '/Users/AddScheduleType',
        data: {
            name: $('#txtScheduleName').val(),
            description: $('#txtDescription').val()
        },
        success: function (data) {
            $('#divTypeList').html(data);
        },
        error: function (data) {
            alert('An Error occurred while processing the request.');
        }
    });
}

如果有人能指出可能出了什么问题，那将会很有帮助。

【问题讨论】：

看看这个 ajax 请求可能也有用
@Andrei 更新了......
检查 cosole 中的响应什么 html 来了？
在插入数据之前清空 div $('#divTypeList').html(""); $('#divTypeList').html(data);
.html() 替换html

标签： javascript jquery ajax asp.net-mvc asp.net-mvc-4

【解决方案1】：

问题是您替换了错误 div 上的内容。

$('#divTypeList').html(data);

应该是

$('#divAddSchedule').html(data);

您在每次后续调用时有效地将addscheduletype 嵌套在istself 中

【讨论】：