Question

我有一个目前看起来像这样的视图 enter image description here

我要做的是在选择droplist选项时显示新的局部视图

这是我的观点

@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]
        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);
        }

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

Answer 1

看看这是否有帮助。

你的阿贾克斯：

$.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]。因此，您的参数将为null。

Answer 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>

局部视图没有显示和div不工作

2 个答案: