首页 文章

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

提问于
浏览
1

我在模式对话框上渲染局部视图时遇到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>

任何帮助,将不胜感激 .

谢谢!

2 回答

  • 0

    1)它确实渲染,但问题是jquery模态大小没有't increase (that'为什么你可以在重新打开对话框时看到它) . 看到:Make JQuery UI Dialog automatically grow or shrink to fit its contents

    2)可能是你在同一页面上有多个带有FirstName,LastName id的控件吗?

  • 0

    我怀疑这是完全相关的,并且与我的对话框是在构建dom之后由ajax呈现的部分视图这一事实有关 .

    当我使用相同的对话框并将其移动到我的视图并使用HTML.RenderPartial时,然后在单击时显示对话框,它们都按预期开始工作 .

相关问题