Question

我尝试使用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.');
        }
    });
}

如果任何人可以指出可能出现的问题，将会有所帮助。

Answer 1

问题是你要替换错误div上的内容。

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

应该是

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

在每次后续调用

中，你实际上是在istself中嵌入了addscheduletype

在部分视图中刷新内容会导致部分视图重复

1 个答案: