частичный вид не отображается, а div не работает

У меня есть представление, которое в настоящее время выглядит примерно так: введите здесь описание изображения

то, что я пытаюсь сделать, это отобразить новый частичный вид, когда выбран параметр выпадающего списка

вот мой взгляд

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

Не знаю, почему мой скрипт не работает...даже кнопки не прячутся. Любые предложения о том, что я делаю неправильно?


jquery asp.net-mvc asp.net-mvc-4 http-get partial-views
person Cybercop    schedule 10.07.2013    source источник
comment
Можете ли вы подтвердить, что ваше событие клика запускается правильно? Если вы поместите точку останова в действие GetModulePropertyName, попадет ли оно в отладчик?   -  person Matt Houser    schedule 11.07.2013
comment
Одна проблема, которую я вижу, не уверен, что это основная проблема, заключается в том, что ваш <div> имеет `id=#partialDiv, где перед ним не должно быть символа #. Я замечаю это и в других местах.   -  person Matt Houser    schedule 11.07.2013
comment
@MattHouser да, это была проблема, но мой параметр [HttpGet] GetModulePropertyName имеет значение null, когда я выбираю какой-либо элемент. Странный....   -  person Cybercop    schedule 11.07.2013

Ответы (2)


arrow_upward
0
arrow_downward

Посмотрите, поможет ли это.

Ваш аякс:

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

В вашем контроллере:

public ActionResult GetModulePropertyName(string moduleTypeValue)

Измените id в вашем ajax на moduleTypeValue. И используйте $.post, если вы не хотите, чтобы страница кэшировалась.

Извините за точное представление, но я считаю, что когда вы запрашиваете подобное действие, вы передаете /Module/GetModulePropertyName?id=[selected], когда он ожидает /Module/GetModulePropertyName?moduleTypeValue=[selected]. Таким образом, ваш параметр будет нулевым.

person Psych0Mantis    schedule 10.07.2013

arrow_upward
0
arrow_downward

измените свое событие 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>
person Amin Saqi    schedule 31.07.2013