Question

当将部分视图返回到浏览器时，在第一次加载时，部分视图呈现为我放置它没有任何问题，但是当我点击我的提交按钮并调用ajax请求时，它返回内部。

例如 - 首次运行时，它会渲染：

<div id="search" class="col-md-4">
...
</div>

但是在回发后它呈现为

<div id="search" class="col-md-4">
<div id="search" class="col-md-4">
...
</div>
</div>

使用部分视图渲染的我的视图是：

@model SpecCheck.Portals.Web.UI.ViewModels.Search

@{
    ViewBag.Title = "Search";
}

@Html.Action("_GetSearch", "Home");

<div class="col-md-4">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title"><i class="fa fa-gears"></i>  Discontinued Machines</h3>
        </div>
        <div class="panel-body">
            <select class="form-control">
                <option>All Tiers</option>
                <option>Tier 2 / Tier 3</option>
                <option>Interim Tier 4 / Tier 4</option>
            </select>
        </div>
    </div>
</div>

<div class="col-md-4">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">
                <i class="fa fa-folder-open"></i> Search by Category
            </h3>
        </div>
        <div class="panel-body">
            <select class="form-control">
                <option>Select a product category</option>
                <option>Construction</option>
                <option>Technologies</option>
            </select>
        </div>
    </div>
</div>

<div class="col-md-12">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title"><i class="fa fa-star"></i> Latest Model Data</h3>
        </div>
        <div class="panel-body">
            Panel content
        </div>
    </div>
</div>

我的部分观点：

@model IEnumerable<SpecCheck.Portals.Web.UI.ViewModels.Search>


<div id="modelSearch" class="col-md-4">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title"><i class="fa fa-search"></i> Search by Model / Manufacturer</h3>
        </div>
        <div class="panel-body">
            @using (Ajax.BeginForm("_GetSearch", "Home", new AjaxOptions() { UpdateTargetId = "modelSearch" }))
            {
                @Html.AntiForgeryToken()
                <div class="input-group">
                    @Html.TextBox("search", null, new {id = "name", @class = "form-control", placeholder = "Please enter a manufacturer or model"})
                    <span class="input-group-btn">
                        <button id="search" class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
                    </span>
                </div>
                if (Model != null)
                 {
                     <div id="searchResults" class="fade">
                         @foreach (var s in Model)
                         {
                         <div class="result">
                             @switch (s.ResultType)
                             {
                                 case "Man":
                                     <a href="#">@s.Manufacturer</a>
                                     break;
                                 case "Mod":
                                     <a href="#">@s.Manufacturer @s.Model</a>
                                     <img src="~/Images/General/(@s.TierId).png" alt="Tier @s.TierId"/>
                                     break;
                             }
                         </div>
                         }
                     </div>
                 }
            }
        </div>
    </div>
</div>

我的Ajax电话：

public PartialViewResult _GetSearch(List<Search> model, string search)
        {
            if (search != null)
            {
                var results = SearchModels(search).ToList();
                model = results;
            }

            return PartialView("_Search", model);
        }

知道为什么会这样吗？

Answer 1

在部分视图调用之前创建一个id。并在ajax调用之后将部分视图附加到该div。如下在你追加之前不要忘记清空div。

<div id="yourdivid">
 @Html.Action("_GetSearch", "Home");
</div>

Ajax请求返回额外Div层

1 个答案: