在 MVC5 中使用局部视图刷新 DIV答案

【问题标题】：Refresh DIV using partial view in MVC5在 MVC5 中使用局部视图刷新 DIV
【发布时间】：2016-11-02 18:56:57
【问题描述】：

我正在尝试根据下拉选择刷新 div。我有一个使用局部视图（_Module）的主视图。主视图有一个下拉菜单；选择下拉菜单后，我试图更改部分视图中的内容，这又会反映在主视图上。

主视图：

@model Test.Models.CreateDirectoryModel 
@{
ViewBag.Title = "CreateAdmin";
}
@using (Html.BeginForm("CreateAdmin", "RDBWeb", FormMethod.Post))
{
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#ProductType").change(function () {
            var catType = $(this).val();
            $("#result").load('@(Url.Action("GetPPOFlag", "RDBWeb", null, Request.Url.Scheme))?catType=' + catType);
        });
    });
</script>
@Html.ValidationSummary(true)
<div class="form-horizontal">
    <h4>Create a New Directory</h4>
    <hr />
    <div class="form-group">
        @Html.LabelFor(model => model.DirectoryNumber, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.DirectoryNumber)
            @Html.ValidationMessageFor(model => model.DirectoryNumber)
        </div>
    </div>
     <div class="form-group">
        @Html.LabelFor(model => model.ProductType, new { @class = "control-label col-md-2" })
    <div class="col-md-10">
       @Html.DropDownListFor(model => model.ProductType, new SelectList(Model.ProductType), "Select Product")
       @Html.ValidationMessageFor(model => model.ProductType)
    </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(model => model.DirectoryName, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.DirectoryName)
            @Html.ValidationMessageFor(model => model.DirectoryName)
        </div>
    </div>   
     <div class="form-group">
        @Html.LabelFor(model => model.AdminName, new { @class = "control-label col-md-2" })
    <div class="col-md-10">
       @Html.DropDownListFor(model => model.AdminName, ViewBag.Drop as SelectList, "Select Admin")
       @Html.ValidationMessageFor(model => model.AdminName)
    </div>
    </div>
    <div id="result">
        @if(Model.Module != null)
        {
            {Html.RenderPartial("_Module", Model.Module);}
        }
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-default" />
        </div>
    </div>

    <div>


    </div>
</div>  
}

局部视图是：

@model Test.Models.CreateDirectoryModel

@foreach (string s in Model.Module)
{
    @Html.LabelFor(a => s.ToString());
}

控制器中与这些相关的方法是：

    public ActionResult GetPPOFlag(string catType)
    {
        ProdTypeModel p1 = new ProdTypeModel();
        int flag = p1.GetPPOFlag(catType);
        return RedirectToAction("GetModule", new { flag = flag });
    }

    [HttpGet]
    public ActionResult GetModule(int flag)
    {
        ModuleType m1 = new ModuleType();
        List<string> moduleList= m1.GetModules(flag);
        return PartialView("_Module", moduleList);

    }

我的问题是，默认情况下，部分视图对象最初为 null，因为尚未选择下拉值。我添加了一个检查，仅当对象不为空时才呈现局部视图；但这不会将新值加载到局部视图中。我所看到的是调用了GetModule方法并且也调用了局部视图方法，但是主页上的div和局部视图都没有变化。

【问题讨论】：

您希望在页面加载时加载哪些新值？此外，RenderPartial 调用不会调用您的操作方法GetModule。为什么你认为它在页面加载时被调用？
@Shyju：最初在页面加载时，div 不应该有任何值。使用下拉列表选择值后，div 应根据下拉选择显示内容。
您的代码看起来不错。是在打ajax调用吗？检查您的浏览器网络标签
@Shyju：它确实会进行调用，因为我可以看到调试器正在为 GetPPOFlag 方法激活。我感觉到的问题是，一旦我从下拉列表中选择了一个值，部分视图就不会被填充。
可能是您的局部视图（或呈现该视图的操作方法）中有错误。返回的响应是什么（在您的浏览器网络选项卡中）？是 200 响应还是 500？您也可以尝试在新的浏览器选项卡中访问 url 以查看错误（如果有）尝试yourSite/RDBWeb/GetPPOFlag?catType=someValue

标签： asp.net-mvc asp.net-mvc-5

【解决方案1】：

尝试这样做，像这样在主视图中保留一个空的 div

    <div id="result">

     </div>

在下拉选择更改时，进行 ajax 调用并获取部分视图并在 div 中呈现 html

    $('#result').empty();
    $("#result").html(data);

【讨论】：