使用 jquery ajax 的部分视图将不会呈现

Question

在模态对话框上渲染部分视图时遇到 2 个问题。

1) 我使用 ajax 帖子，它调用操作，返回带有联系人列表的部分视图，我更新了 div，但它不显示。如果我关闭并重新加载对话框，它就会显示出来。

2) 局部视图对话框中有 jquery 选择器找到的文本框元素，但 val() 为空。

一直调试它，很好……只是不渲染。

模态：

@model CRM.Model.Shared.ContactSearchModel

<div id="divSearchContactModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form id="contactSearchForm" class="form-horizontal">
                <div class="modal-header">
                    <h4 class="modal-title">Search / Add Contact</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <div class="col-md-4">
                                    @Html.LabelFor(model => model.FirstName, new { @class = "control-label" })
                                    @Html.EditorFor(model => model.FirstName)
                                </div>
                                <div class="col-md-4">
                                    @Html.LabelFor(model => model.LastName)
                                    @Html.EditorFor(model => model.LastName)
                                </div>
                                <div class="col-md-2">
                                        <button id="contact-search-button" type="button" onclick="Search();" class="btn btn-mercury-modal-search" style="vertical-align: middle">Search</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="divSearchResultsContent">
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

Ajax 搜索功能：

function Search() {

    //these return empty text for val()  !!!
    var firstName = $("#FirstName").val();
    var lastName = $("#LastName").val();

    $.ajax({
        type: "POST",
        url: "/ContactSearch/Search/",
        data: { FirstName: firstName, LastName: lastName },
        success: function (data) {
            $('#divSearchResultsContent').html(data);
        },
        error: function (jqXhr, textStatus, errorThrown) {
            console.log(textStatus, errorThrown);
        }
    });
    return true;
}

控制器：

    [HttpPost]
    [OutputCache(Duration = 0)]
    public ActionResult Search(ContactSearchModel model)
    {
            model.FirstName = "Daffy";
            model.LastName = "Duck";

            var response = _contactManager.SearchContacts(new SearchContactsRequest
            {
                FirstName = model.FirstName,
                LastName = model.LastName
            });

            if (!response.IsSuccess)
            {
                throw new Exception(response.ErrorMessage);
            }

            model.SearchFinished = true;
            model.ContactList = response.ContactList;
            model.SearchCount = response.ContactList.Count;

            return PartialView("_ContactSearchResults", model);

    }

_ContactSearchResults 的部分视图

    @using CRM.Entities.Common
@model CRM.Model.Shared.ContactSearchModel
<table class="table table-responsive">
    <thead>
        <tr>
            <th>
                First Name
            </th>
            <th>
                Last Name
            </th>
            <th>
                DBA Name
            </th>
            <th>
                Address
            </th>
            <th>
                City
            </th>
            <th>
                State
            </th>
            <th>
                Zip
            </th>
            <th>
                Phone
            </th>
            <th>
            </th>
    </thead>
    <tbody>
        @if (Model.SearchFinished)
        {
            if (Model.SearchCount > 0)
            {
                foreach (Contact contact in Model.ContactList)
                {
                    <tr>
                        <th>
                            @Html.Label(contact.FirstName)
                        </th>
                        <th>
                            @Html.Label(contact.LastName)
                        </th>
                        <th>
                            @Html.Label(contact.DbaName)
                        </th>
                        <th>
                            @Html.Label(contact.ContactAddress)
                        </th>
                        <th>
                            @Html.Label(contact.ContactCity)
                        </th>
                        <th>
                            @Html.Label(contact.ContactState)
                        </th>
                        <th>
                            @Html.Label(contact.ContactZipCode)
                        </th>
                        <th>
                            @Html.Label(contact.PhoneNumber)
                        </th>
                        <th>
                            @*@Html.ActionLink("Select", "Select", "ContactSearch", new { EntityId = Model.EntityId, ContactEntityId = @contact.ContactId, RoleId = Model.RoleId }, null)*@
                        </th>
                    </tr>
                }
            }
            else
            {
                <tr>
                    <th>
                        "No contacts found."
                    </th>
                </tr>
            }
        }
    </tbody>
</table>

任何帮助将不胜感激。

谢谢！

Answer 1

1) 它会渲染，但问题是 jquery 模式大小没有增加（这就是为什么您可以在重新打开对话框时看到它的原因）。看到这个：Make JQuery UI Dialog automatically grow or shrink to fit its contents

2) 会不会是您在同一页面上有多个带有 FirstName、LastName id 的控件？

Answer 2

我怀疑这都是相关的，并且与我的对话框是在构建 dom 后由 ajax 呈现的部分视图有关。

当我使用同一个对话框并将其移动到我的视图并使用 HTML.RenderPartial，然后在单击时显示对话框时，一切都会按预期开始工作。

Answer 3

您能否考虑将dataType: "html" 属性添加到您的ajax 调用中，这表明您希望从服务器获得的数据类型，并将进行相应的格式化。如果您没有明确指出数据类型，那么 jQuery 将恢复为 XML 的默认 MIME 类型。