Cannot get the Partialview Model in Parent Controller

Question

I am creating a DataEntry Screen which have a three dropdownlist at the top which is cascaded using ajax . And A partial view is also rendered using Ajax which will show all the items against that selection user made on the dropdowns. The partialview consist of a table with multiple rolls.

I am not able to get the collection of data selected by the user in the partial view (table )in my controller.

My Controller

[HttpGet]
    public ActionResult ApproveLaysheet()
    {
        LaySheetShortageViewModel mdl = new LaySheetShortageViewModel();
        ViewBag.AtcID = new SelectList(db.AtcMasters.Where(o => o.IsClosed == "N"), "AtcId", "AtcNum");
        return View(mdl);
    }
      [HttpGet]
    public PartialViewResult GetRollView(decimal[] SelectedOurStyle)
    {
        LaySheetShortageViewModel model = new LaySheetShortageViewModel();        
        LaysheetRollRepository lyipores = new LaysheetRollRepository();
        model.rolldetailcollection= lyipores.getlaysheetRollData(SelectedOurStyle);
        return PartialView("LaySheetRollView",model);
    }
[HttpPost]
    public ActionResult ApproveLaysheet(LaySheetShortageViewModel Model)
    {      // not gretting the value of rolldetailcollection here
        return View();
    }

My View

    @model ArtWebApp.Areas.ArtMVC.Models.ViewModel.LaySheetShortageViewModel
<script type="text/javascript">
    $(document).ready(function () {      
        $("#Show").click(function (e, params) {          
            debugger;
            var SelectedOurStyle = new Array();
            SelectedOurStyle = $("#LaySheetID").chosen().val();            
            if (SelectedOurStyle != null)
            {
            $.ajax({
                    url: "@Url.Action("GetRollView", "ApproveLaysheet")",
                    traditional: true,
                    data: { 'SelectedOurStyle': SelectedOurStyle },
                    type: "GET",
                    success: function (fooBarHTML) {
                        $("#output").html(fooBarHTML);
                    },
                    error: function (xhr, status, errorThrown) {
                        //...
                    }
                });          

         }

        });

    });

</script>
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>SampCutReqMaster</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            <div class="row">
                <div  class="col-md-2">
                    @Html.Label("Atcc#", new { @class = "control-label col-md-2" });
                </div>
                <div class="col-md-10">
                    @Html.DropDownList("AtcID", null, htmlAttributes: new { @class = "chosen-select form-control" })                
                </div>
            </div>         

        </div>


        <div class="form-group">
            <div class="row">
                <div class="col-md-2">
                    @Html.Label("OurStyle#", new { @class = "control-label col-md-2" });
                </div>
                <div class="col-md-10">
                    @Html.DropDownList("OurStyleID", new MultiSelectList(string.Empty, "Value", "Text") , null, htmlAttributes: new { @class = "chosen-select form-control", @multiple = "multiple" } )

                </div>

            </div>         

        </div>

        <div class="form-group">
            <div class="row">
                <div class="col-md-2">
                    @Html.Label("LaySheet#", new { @class = "control-label col-md-2" });
                </div>
                <div class="col-md-10">
                    @Html.DropDownList("LaySheetID", new MultiSelectList(string.Empty, "Value", "Text"), null, htmlAttributes: new { @class = "chosen-select form-control", @multiple = "multiple" })

                </div>
            </div>
        </div>

        <div id='output' class="">
            <!-- Partialview Comes here -->
        </div>


</div>
}

My Partial View

@using HtmlHelpers.BeginCollectionItem
@model ArtWebApp.Areas.ArtMVC.Models.ViewModel.LaySheetShortageViewModel
<script src="~/JQuery/GridJQuery.js"></script>
<script>

</script>
<div class="container">

    <table class="table table-bordered table-striped table-responsive">
        <tr>
            <th>
                @Html.CheckBox("SelectAll")
            </th>
            <th>
                @Html.DisplayNameFor(model => model.approvelaysheetModel.LaySheetDet_PK)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.approvelaysheetModel.LayCutNum)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.approvelaysheetModel.RollNum)
            </th>          
     </tr>
        @if (Model != null)
        {
        for (int i = 0; i < Model.rolldetailcollection.Count; i++)
            {
                using (Html.BeginCollectionItem("rolldata"))
                {
                <tr>
                    <td>
                        @Html.EditorFor(modelItem => Model.rolldetailcollection[i].IsSelected, new { @onclick = "Check_ClickNew(this)" })
                    </td>
                    <td>
                        @Html.EditorFor(modelItem => Model.rolldetailcollection[i].LaySheetDet_PK)
                        @Html.HiddenFor(model => Model.rolldetailcollection[i].LaySheetDet_PK, new { htmlAttributes = new { @class = "form-control" } })
                   </td>
                    <td>
                        @Html.DisplayFor(modelItem => Model.rolldetailcollection[i].LayCutNum)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => Model.rolldetailcollection[i].RollNum)
                    </td>                  
                  </tr>
                }
            }

        }
       </table>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input id="Submit" type="submit" value="Submit Fabric request" class="btn btn-default show" />
        </div>
    </div>
</div>

My viewModals

 public class ApprovelaysheetModel
    { 
        public Decimal ApprovelaysheetModelID { get; set; }

        [Display(Name ="ID")]
        public Decimal LaySheetDet_PK { get; set; }
        public Boolean IsSelected { get; set; }
        public Decimal LaySheet_PK { get; set; }
     }

    public class LaySheetShortageViewModel
    {
        [Key]
        [Display(Name = "ID")]
        public Decimal ShortageID { get; set; }
        public int Location_pk { get; set; }
        public int Atcid { get; set; }
        public int OurstyleID { get; set; }        }
        public List<ApprovelaysheetModel> rolldetailcollection { get; set; }
    }

Can anyone suggest whats my mistake or any better method for doing this dataentry as Iam new to MVC

Answer 1

Your use of BeginCollectionItem() inside the for loop is prefixing your name attributes so that they no longer relate to your models properties. Instead of generating

<input type="checkbox" name="rolldetailcollection[0].IsSelected" ... />

your now generating

<input type="checkbox" name="rolldata[####].rolldetailcollection[0].IsSelected" ... />

where #### is a Guid .

Remove the BeginCollectionItem() code so that your loop is

for (int i = 0; i < Model.rolldetailcollection.Count; i++)
{
    <tr>
        <td>
            @Html.EditorFor(m => m.rolldetailcollection[i].IsSelected, new { @onclick = "Check_ClickNew(this)" })
         </td>
         <td>
             @Html.EditorFor(m => m.rolldetailcollection[i].LaySheetDet_PK) 
             // Note there is no point adding html attributes for a hidden input
             @Html.HiddenFor(m => m.rolldetailcollection[i].LaySheetDet_PK)
         </td>
         ....                 
    </tr>
}

Note that the BeginCollectionItem() method is used when you want to dynamically add and remove items from a collection in the view in conjunction with javascript/ajax (refer this answer for an example). If you do want to do that, then you need to create a partial view (say) _ApprovelaysheetModel.cshtml for the model

@model ApprovelaysheetModel
// Note the name needs to match the collection property name
@using (Html.BeginCollectionItem("rolldetailcollection"))
{
    ....
    @Html.EditorFor(m => m.LaySheetDet_PK)
    ....
}

and then in the main view you use a foreach loop

@foreach(var item in Model.rolldetailcollection)
{
    @Html.Partial("_ApprovelaysheetModel", item)
}