下拉更改时的部分视图渲染问题

Question

我在渲染下拉更改的部分视图时遇到问题。问题是，当我更改 dropdown 的值时，仅加载部分视图，视图 ui 未显示在页面中。

请在下面找到我的代码：

index.cshtml：

<h2>Cavity</h2>
@using (Html.BeginForm("Cavity", "Cavity", FormMethod.Post, new { id = "getCavities" }))
{
<div class="row" style="margin-bottom:5%">
    <div class="col-md-3">
        <select name="ddlSite" id="ddlSite" onchange="getCavities();" class="form-control">

            <option value="-1">Select Site</option>

                            @if ((Model != null) && (Model.Sites != null))
            {
                foreach (var item in Model.Sites)
                {
                    if (Model.SiteID != null)
                    {
                        if (Model.SiteID == item.SiteID)
                        {
                            <option value="@item.SiteID" selected="selected" onchange="">@item.SiteName</option>
                        }
                        else
                        {
                            <option value="@item.SiteID" onchange="">@item.SiteName</option>
                        }
                    }
                    else
                    {
                        <option value="@item.SiteID" onchange="">@item.SiteName</option>
                    }

                }
            }
        </select>
    </div>

    <div class="col-md-1">

    </div>
</div>


   }

  <div id="cavitypartial" style="display:none">
   Html.RenderPartial("MyPartialView"); 
  </div>

下拉调用函数：

 function getCavities()
{
    debugger;
    var id = document.getElementById("ddlSite").value;
    $.ajax({
        url: '@Url.Action("Cavity", "Cavity")',
        type: "POST",
        dataType: "html",
        data: { id: id },
        UpdateTargetId: "cavitypartial",
        success: function (data) {
            debugger;
            $('#cavitypartial').html(data);
            $('#cavitypartial').fadeIn('fast');
        },
        error: function (xhr, status, error) {
            alert('An Error occurred while processing the request');

        }
    });


}

我的控制器功能：

  public ActionResult Cavity(short? id)
    {

      // my functionality
      return PartialView( "_MyPartailViewName",model);
    }

最后是部分视图

<div id="cavTable">


@if (Model != null && Model.ProdLineBySite != null && Model.CavityBySite != null && Model.Cavities != null && Model.Cavities.Count > 0)
{

    <table id="CavityTable" class=" table table-bordered">
        <tr>
            <th></th>
            <th>Cavity Name</th>
            <th>Number of Cavities</th>

            @foreach (var item in Model.ProdLineBySite)
            {
                <th>@item.ProductLineName (CT/sec)</th>
            }

        </tr>
        @foreach (var item in Model.CavityBySite)
        {
            //using (Ajax.BeginForm("CavityUpdate", "Cavity", new AjaxOptions { UpdateTargetId = "tblCavity" }, new { data_ajax_mode = "replaceWith" }))
            //using (Ajax.BeginForm("CavityUpdate", "Cavity", FormMethod.Post, new { id = "tblCavity" }))
            {


                <tr id="@item.CavityID">

                    <td><a onclick='DeleteRow(this,@item.CavityID);'><img src='/Content/Images/trash_empty.png' class='btndelete' alt='x' /></a><a onclick='EditRow(this,@item.CavityID);'><img src='~/Content/Images/edit.png' class='btndelete' alt='x' /></a></td>
                    <td><input type="text" id="cn_@item.CavityID" name="cn_@item.CavityID" value="@item.CavityName" disabled /></td>
                    <td><input type="text" id="cp_@item.CavityID" name="cp_@item.CavityID" class="addcavity" value="@item.NumberOfParts" disabled /> <input type="hidden" id="h_@item.CavityID" name="h_@item.CavityID" /> </td>
                    @foreach (var Cavitem in Model.Cavities)
                    {
                        if (item.CavityID == Cavitem.CavityID)
                        {
                            <td><input type="text" id="c_@(item.CavityID)p_@(Cavitem.ProductLineID)" name="c_@(item.CavityID)p_@(Cavitem.ProductLineID)" class="addcavity" value="@Cavitem.Time" disabled /></td>
                        }

                    }
                    <td><input type="text" id="cp_@item.comments" name="cp_@item.comments" class="addcavity" value="@item.comments" disabled /> <input type="hidden" id="h_@item.CavityID" name="h_@item.CavityID" /> </td>
                    <td id="Savecommand"><input type="submit" id="btnS_@item.CavityID" value="Save" disabled /></td>
                    <td id="Savecommand"><input type="button" id="btnC_@item.CavityID" onclick="cancelEditing(this,@item.CavityID);" value="Cancel" disabled /></td>


                </tr>
            }

        }
    </table>
}

问题是只有部分视图显示在页面中，而不是两者（视图和部分视图）。我已经尝试过 ajax 容器更新 id，但它并没有解决我的问题。

有人可以帮我解决这个问题吗？

Answer 1

使用getCavities 函数可以更新整个页面，使其仅显示部分视图。我希望以下示例对您有所帮助。我在下拉更改事件期间更新了部分视图

主页

<h2>MainPage</h2>

select : <select id="ddlSite">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>

<div id="partialViewContainer">

</div>

脚本

<script type="text/javascript">
    $(function () {
        $("#ddlSite").change(function () {
            $.ajax({
                url: "Home/DisplayPartialView",
                type: "POST",
                dataType: "html",
                data: { id: $("#ddlSite").val() },
                success: function (data) {
                    $('#partialViewContainer').html(data);                    
                },
            });
        });
    });
</script>

控制器

public ActionResult MainPage()
{
   return View();
}

public PartialViewResult DisplayPartialView(int ID)
{
    return PartialView(ID);
}

使用 jquery 我在下拉事件更改期间更新了 partialViewContainer。它只会更新 partialViewContainer。