MVC4:将子部分视图值发送到控制器?

时间:2014-01-27 12:19:52

标签: asp.net-mvc-4 partial-views

首先,我必须说这是我对MVC4的新手并开发此应用程序并同时学习MVC4。)。

在这个应用程序中, 下面是父视图,其中还呈现了3个部分视图,还有一个按钮:

[code]
 <td id="track">@Html.Partial("_Track",Model)</td><br>
<td id="tech">
 <div id="Technologies"> @Html.Partial("_Technology",Model)
</div></td></tr> 
..
[some code]
..

<td class="subtopic">
 <div class="subtopiclist" id="subque">@Html.Partial("_Subtopics",Model)</div><br>
 <input type="Submit" value="Fetch Interview Questions" name="Fetch" id="Fetch" />
           </td>

部分View1(包含下拉列表):

@model MvcApplication3.Models.CommonWrapper

@using (Ajax.BeginForm("SelectTrack", "Home", new AjaxOptions { UpdateTargetId = "Technologies" }))
{ 
    @Html.DropDownListFor(
            m=>m.SelectedTrackId,
            new SelectList(Model.track, "TrackId", "TrackName"),
           string.Empty
        )
}
  <script type="text/javascript">
    $('#SelectedTrackId').change(function () {
        $(this).parents('form').submit();
    });
</script>

Parital View2(包含下拉列表):

@model MvcApplication3.Models.CommonWrapper
@if (Model.tech != null && Model.tech.Count() > 0)
{
    using (Ajax.BeginForm("SelectTechnology", "Home", new AjaxOptions { UpdateTargetId = "subque" }))
    { 
     @Html.HiddenFor(m => m.SelectedTrackId)
     @Html.DropDownListFor(
            m => m.SelectedTechId,
            new SelectList(Model.tech, "TechId", "TechName"),
            string.Empty
            )
    }
}

  <script type="text/javascript">
    $(document).on('change', '#SelectedTechId', function () {
        $(this).parents('form').submit();
    });

</script>

部分视图3(它包含多个复选框):

@if (Model.subtopic != null && Model.subtopic.Count() > 0)
{
<table>
@for (int i = 0; i < Model.subtopic.Count; i++)
{
 <tr><td>
    @Html.CheckBoxFor(m => m.subtopic[i].IsSelected, new { id = "subTopic_" + i })
    @Html.HiddenFor(m => m.subtopic[i].SubtopicName)
    @Html.DisplayFor(m => m.subtopic[i].SubtopicName)
     <td>
     </tr>   
}
</table>

}

现在在父视图中,我想从这三个局部视图中获取值。另外,我需要将这些获取的值发送到控制器。
这该怎么做 ?请有人帮我这个。
提前致谢

添加了控制器代码:

[HttpPost]
        public ActionResult SelectTrack(int? selectedTrackId)
        {
            CommonWrapper wrapper = new CommonWrapper();
            wrapper.tech = new List<TechModel>();

            if (selectedTrackId.HasValue)
            {
                wrapper.tech = (from s in CommonWrapper.GetTechnology()
                                where s.TrackId == selectedTrackId
                                orderby s.TechName
                                select s).ToList();
            }

            return PartialView("_Technology", wrapper);

        }

        [HttpPost]
        public ActionResult SelectTechnology(int? selectedTechId)
        {
            CommonWrapper wrapper = new CommonWrapper();
            wrapper.subtopic = new List<SubtopicsModel>();

            if (selectedTechId.HasValue)
            {
                wrapper.subtopic = (from s in CommonWrapper.GetSubtopics()
                                           where s.TechId == selectedTechId
                                           orderby s.SubtopicName
                                           select s).ToList();
            }

            return PartialView("_Subtopics", wrapper);

        }

2 个答案:

答案 0 :(得分:1)

尝试更改ajax表单,只需使用jquery发布到所需的控制器操作即可。然后,这会将您的部分视图与要求更新目标分开。

您可以为调用不同控制器操作的每个下拉列表应用此方法。

删除您的Ajax.BeginForm和相应的jquery代码,并将其替换为以下内容。

家长视图

<script type="text/javascript">
    $(function ()
    {
        $("#SelectedTrackId").change(function ()
        {
            var selectedValue = $(this).val();
            $.ajax(
            {
                type: "post",
                data: selectedValue,
                url: url,
                success: function (data)
                {
                    // data contains your partial view
                    $("#some-container-id").html(data);
                }
            });
        });
    });
</script>

答案 1 :(得分:-1)

我将ViewModel放在一起并将其放入[HttpPost]控制器操作

希望这有帮助

基督教