0

I'm pretty new to these more complex views with partial views and child viewmodels.

I have a main view which holds three partial views and viewmodels of the same type. Each of these partial views also holds another partial view with its' own viewmodel.

Like this (simplified):
public class GrantProjectViewModel
{
    public GrantProjectCountryGroupViewModel CountryGroupCategory1 { get; set; }
    public GrantProjectCountryGroupViewModel CountryGroupCategory2 { get; set; }
    public GrantProjectCountryGroupViewModel CountryGroupCategory3 { get; set; }
}
public class GrantProjectCountryGroupViewModel

    public AssignGrantProjectCountryGroupCountryViewModel AssignGrantProjectCountryGroupCountryViewModel;
}
public class AssignGrantProjectCountryGroupCountryViewModel
{
    public IEnumerable<int> CountryIDs { get; set; }
}

Create.cshtml (this holds the main form):

model GrantProjectViewModel

<div class="container-fluid">

        <section class="panel panel-default">
            <div class="panel-heading">
                <h2 class="panel-title">@SL.labelmobGrantProjectEconomyAndCountryCategorisation</h2>
            </div>
            <div class="panel-body">

                <div class="row">
                <div class="col-md-4">

                        @{  ViewData.TemplateInfo.HtmlFieldPrefix = "CountryGroupCategory1";
                            Html.RenderPartial("PartialViews/HandleGrantProjectCountryGroup", Model.CountryGroupCategory1);
                            ViewData.TemplateInfo.HtmlFieldPrefix = "";
                        }
                    </div>
                    <div class="col-md-4">
                        @{
                            ViewData.TemplateInfo.HtmlFieldPrefix = "CountryGroupCategory2";
                            Html.RenderPartial("PartialViews/HandleGrantProjectCountryGroup", Model.CountryGroupCategory2);
                            ViewData.TemplateInfo.HtmlFieldPrefix = "";
                        }
                    </div>
                    <div class="col-md-4">
                        @{
                            ViewData.TemplateInfo.HtmlFieldPrefix = "CountryGroupCategory3";
                            Html.RenderPartial("PartialViews/HandleGrantProjectCountryGroup", Model.CountryGroupCategory3);
                            ViewData.TemplateInfo.HtmlFieldPrefix = "";

                        }
                    </div>

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

HandleGrantProjectCountryGroup.cshtml

@model GrantProjectCountryGroupViewModel
<section class="panel panel-default panel-sm">

    <div class="panel-body">
        <div class="col-md-8">
            @{
                var viewDataForCountryAssign = new ViewDataDictionary {{"GrantProjectCountryGroup", Model.GrantProjectCountryGroupID}, {"CategoryNumber", Model.CategoryNumber}};
            }
            @Html.Partial("PartialViews/AssignCountriesToCountryGroup", Model.AssignGrantProjectCountryGroupCountryViewModel, viewDataForCountryAssign)

            <ul class="list-group" id="countries"></ul>

        </div>

    </div>
</section>

This is about as far I have come with AssignCountriesToCountryGroup.cshtml and the javascript part. (this is where I'm stuck)

@model AssignGrantProjectCountryGroupCountryViewModel

<div id="[email protected]">
    @Html.EditorFor(x => x.CountryID)
</div>
<div class="list-group" id="[email protected]"></div>


<script id='[email protected]' type='text/html'>
    <span class="label label-info label-country">__country_name__ &nbsp<i data-country-id='__country_id__' class="fa fa-remove button-remove-country"></i></span>
</script>


<script type="text/javascript">

    $(function () {
        var selectedCountryIDs = {};
        $('#[email protected] input[name=CountryID]').change(function () {
            var countryID = $(this).val();

            // Check that we have a valid personID
            if (!$.isNumeric(countryID)) {
                return;
            }

            var countryName = $('#[email protected] #CountryID_autoCompleteSelector').val();

            if (!selectedCountryIDs.hasOwnProperty(countryID)) {
                var selectedCountriesTemplate = $('#[email protected]')
                    .text()
                    .replace(/__country_name__/gi, countryName)
                    .replace(/__country_id__/gi, countryID)
                    .trim();

                $('#[email protected]')
                    .append(selectedCountriesTemplate);

                selectedCountryIDs[countryID] = true;
            }

            // Remove the personid and empty the input box
            $(this).val('');
            $('#[email protected] #CountryID_autoCompleteSelector').val('');
        });

        $("#[email protected]").on("click", ".button-remove-country", function () {
                var countryID = $(this).data("country-id");
                $(this).parents("span:first").remove();
                delete selectedCountryIDs[countryID];
        });

        $(".btn-submit-project").click(function () {
            var countryIDsArray = new Array();
            for (var countryID in selectedCountryIDs) {
                countryIDsArray.push(countryID);
            }

            var errorMessage = '';
            if (countryIDsArray.length === 0) {
                errorMessage += '@String.Format(SL.labelAlertErrorYouHaveToSelectAtLeastX, SL.labelPerson)';
            }
            if (errorMessage) {
                alerts.error(errorMessage);
                return;
            }


            var model = {
                CountryIDs: countryIDsArray,
            };

The partialView for AssignGrantProjectCountryGroupCountryViewModel has javascript for autocompleting a search of countries and adding multiple to a javascript array. The functionality is to add a set of countries to each of these three GrantProjectCountryGroupViewModel.AssignGrantProjectCountryGroupViewModel and then post the entire GrantProjectViewModel to the Post-action in the controller.

But when I do that all of the AssignGrantProjectCountryGroupViewModel-s are null. I'm pretty stuck and don't really know how I'm supposed to get the javascript-country data to stick to my GrantProjectViewModel when posting the main form.

(Other solutions tell me to post the javascript array to another controller action, which I am able to do. The problem then is that I don't know how to bind it to the parent GrantProjectViewModel properly.)

5
  • 1
    You should not be using partial views. You should be using EditorTemplates. And what javascript are you referring to (you have not posted any scripts) And you dont even have a { get; set; } of AssignGrantProjectCountryGroupCountryViewModel so that will never bind when you post.
    – user3559349
    Dec 2, 2015 at 9:47
  • Thank you for your answer. I'll try and look into these things and post the javascript soon as well.
    – habjo
    Dec 2, 2015 at 10:04
  • What is the point of your javascript? Why are you not just posting back your model. Hard to understand what your trying to do.
    – user3559349
    Dec 3, 2015 at 23:49
  • I understand that it is hard to understand. I am somewhat confused myself and find this kind of hard. :) Essentially, what I am trying to do is to get the data of a javascript array (a bunch of ids) to a List in the AssignGrantProjectCountryGroupCountryViewModel when I post. I have now rewritten my code so it uses EditorFors instead of PartialViews, and I am able to post the form with all the submodels and everything, I am just having a problem with getting the javascript data to the C# list/array/whatever I should use on that side.
    – habjo
    Dec 4, 2015 at 9:37
  • I have looked into this solution, not quite managed yet though. stackoverflow.com/questions/29962306/…
    – habjo
    Dec 4, 2015 at 9:37

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.