部分视图不显示且 div 不工作答案

【问题标题】：partial view not showing and div not working部分视图不显示且 div 不工作
【发布时间】：2013-07-10 20:34:58
【问题描述】：

我的视图目前看起来像这样

我要做的是在选择下拉列表选项时显示新的局部视图

这是我的看法

@model AdminPortal.Areas.Hardware.Models.CreateModule
@{
    ViewBag.Title = "Create Module";
    Layout = "~/Views/shared/_BootstrapLayout.basic.cshtml";
}
@section Datetime
{
    <link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css"/>
    <link href="@Url.Content("~/Content/bootstrap-datetimepicker.min.css")" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-2.0.2.min.js")"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
}
@Html.ValidationSummary(true)


<fieldset class="form-horizontal">
    <legend>Add a Module <small>Create</small></legend>
    @using (Html.BeginForm("CreateModule", "Module", new{id="AddModuleForm"}))
    {
        @Html.ValidationSummary(true)
        <div class ="controls">
            <div class="input-block-level">@Html.TextBoxFor(model => model.ModuleId, new {@placeholder = "ModuleID"})</div>
            <br/>
            <div class ="input-block-level" id="#SelectedModuleTypeName">@Html.DropDownListFor(model => model.SelectedModuleTypeName, Model.TypeNames, new{id = "ModuleList"})</div>
            <div id="#partialDiv"></div>
            <br/>
            <div id="datetimepicker2" class="input-append date">
                <input name="DateEntered" type="text"/>
                <span class="add-on">
                    <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
                </span>

            </div>

            <script type="text/javascript">
                $(document).ready(function() {
                    $('#datetimepicker2').datetimepicker({

                        language: 'en',
                        pick12HourFormat: true
                    });
                });
            </script>
        </div>
         <div class="form-actions" id="#buttons">
        <button type="submit" class="btn btn-primary" id="Submit">Save changes</button>
        @Html.ActionLink("Cancel", "ModuleList", null, new { @class = "btn " })
    </div>

    }

</fieldset>
<div>
    @Html.ActionLink("Back to List", "ModuleList")
</div>
<script>
    $("#buttons").hide();
    $("#SelectedModuleTypeName").on("change", function () {
        var modId = $(this).val();
        $.get('@Url.Action("GetModulePropertyName", "Module")', { id: modId }, function (result) {
            $("#partialDiv").html(result);
        });
        $("#buttons").show();
    });
</script>

这里是部分视图的代码

@for (int i = 0; i < Model.Count; i++)
{
    <div class="label">@Html.LabelFor(name => name[i])</div>
    <div class="input-block-level">@Html.TextBoxFor(name => name[i])</div>
}

这是来自控制器的 [HttpGet] 方法

[HttpGet]
        public ActionResult CreateModule()
        {
            var moduleTypes = _repository.GetAllModuleTypes();
            var model = new CreateModule
                {
                    TypeNames = moduleTypes.Select(m => new SelectListItem
                        {
                            Value = m.Id.ToString(),
                            Text = m.TypeName,
                        }),
                        Properties = new List<AdminPortal.Areas.Hardware.Models.Property>()
                };
            return View(model);
        }


[HttpGet]
        public ActionResult GetModulePropertyName(string moduleTypeValue)
        {
            var moduleKindId = _repository.GetModuleKindId(moduleTypeValue);
            var modulePropertyNames = _repository.GetModuleKindPropertyNames(moduleKindId);
            return PartialView(modulePropertyNames);
        }

不知道为什么我的脚本在视图中不起作用...甚至按钮都没有隐藏。关于我做错了什么有什么建议吗？

【问题讨论】：

你能确认你的点击事件被正确触发了吗？如果您在 GetModulePropertyName 操作中放置断点，它会被调试器命中吗？
我看到的一个问题，不确定它是否是根本问题，是你的<div> 有`id="#partialDiv"，它前面不应该有# 字符。我也注意到其他地方。
@MattHouser 是的，这是问题所在，但是当我选择某个项目时，我的 [HttpGet] GetModulePropertyName 的参数为空。奇怪....

标签： jquery asp.net-mvc asp.net-mvc-4 partial-views http-get

【解决方案1】：

看看这是否有帮助。

你的 ajax：

$.get('@Url.Action("GetModulePropertyName", "Module")', { id: modId }, function (result) {

在您的控制器中：

public ActionResult GetModulePropertyName(string moduleTypeValue)

将 ajax 中的 id 更改为 moduleTypeValue。如果您不想缓存页面，请使用$.post。

请原谅确切的表示，但我相信当您请求这样的操作时，您正在传递/Module/GetModulePropertyName?id=[selected]，而它期待/Module/GetModulePropertyName?moduleTypeValue=[selected]。因此，您的参数将为空。

【讨论】：

【解决方案2】：

像这样改变你的 jquery 事件：

<script>
$(document).ready(function () {
    $("#buttons").hide();

    $("#SelectedModuleTypeName").change(function () {
        var modId = $(this).val();
        $.get('@Url.Action("GetModulePropertyName", "Module")', { id: modId }, 
            function (result) {
                $("#partialDiv").html(result);
        });

        $("#buttons").show();
    });
});
</script>

【讨论】：