@model project_name.Models.SearchBrochureVM

​

@{

    ViewBag.Title = "Brochure_Create";

    Layout = "~/Views/Shared/_Layout.cshtml";

}

​

<h4>Product Brochure Generation</h4>

​

​

@using (Html.BeginForm())

{

​

    @Html.AntiForgeryToken()

    @Html.ValidationSummary(true, "", new { @class = "text-danger" })

​

    <div class="form-group"></div>

​

​

    <div class="row">

​

        <div class="col-xs-6">

            <div class="form-group">

                @Html.LabelFor(m => m.Type, htmlAttributes: new { @class = "control-label col-md-2" })

                <div class="col-md-10">

                    @Html.DropDownListFor(m => m.Type, Model.TypeList, "Select the type", new { @class = "form-control" })

                    @Html.ValidationMessageFor(model => model.Type, "", new { @class = "text-danger" })

                </div>

            </div>

        </div>

​

        <div class="col-xs-6">

            <div class="form-group">

                @Html.LabelFor(m => m.Category, htmlAttributes: new { @class = "control-label col-md-2" })

                <div class="col-md-10">

                    @Html.DropDownListFor(m => m.Category, Model.CategoryList, "Select the category", new { @class = "form-control" })

                    @Html.ValidationMessageFor(model => model.Category, "", new { @class = "text-danger" })

                </div>

            </div>

        </div>

​

    </div>

​

    <div>

    </div>

​

    <div class="row">

​

        <div class="col-xs-6">

            <div class="form-group">

                @Html.LabelFor(m => m.Country, htmlAttributes: new { @class = "control-label col-md-2" })

                <div class="col-md-10">

                    @Html.DropDownListFor(m => m.Country, Model.CountryList, "Select the country", new { @class = "form-control" })

                    @Html.ValidationMessageFor(model => model.Country, "", new { @class = "text-danger" })

                </div>

            </div>

        </div>

​

        <div class="col-xs-6">

            <div class="form-group">

                @Html.LabelFor(m => m.Product, htmlAttributes: new { @class = "control-label col-md-2" })

                <div class="col-md-10">

                    @Html.DropDownListFor(m => m.Product, Model.ProductList, "Select the subsidary", new { @class = "form-control" })

                    @Html.ValidationMessageFor(model => model.Product, "", new { @class = "text-danger" })

                </div>

            </div>

        </div>

    </div>

​

    <div>

    </div>

​

    <div class="row">

        <div class="form-group">

            <div class="col-md-offset-2 col-md-10">

                <button id="search" type="button" class="btn btn-success submit">Select Information</button>

            </div>

        </div>

    </div>

​

}

​

@using (Html.BeginForm("Create_Brochure", "Brochure", FormMethod.Get))

{

    <table class="table">

        <thead>

            <tr>

                <th>Property_ID</th>

                <th>IsChecked</th>

                <th>Property Tile</th>

                <th>Property Value</th>

            </tr>

        </thead>

        <tbody id="table"></tbody>

    </table>

​

    <div style="width:50%; float:right;text-align:right"> <input type="submit" class="btn btn-danger submit" value="Create Brochure" />  </div>

}

​

​

        <table id="template" class="table" style="display: none;">

            <tr>

                <td>

                    <span></span>

                    <input type="hidden" name="[#].Property_ID" />

                </td>

                <td>

                    <input type="checkbox" name="[#].IsChecked" value="true" />

                    <input type="hidden" name="[#].IsChecked" value="false" />

                </td>

                <td>

                    <span></span>

                    <input type="hidden" name="[#].Property_Title" />

                </td>

                <td>

                    <span></span>

                    <input type="hidden" name="[#].Property_Value" />

                </td>

            </tr>

​

​

        </table>

        <div style="width:50%; float:left;text-align:left"><button id="resetborchure" type="button" class="btn btn-warning submit">Reset Brochure</button> </div>

​

​

        @section Scripts {

            @Scripts.Render("~/bundles/jqueryval")

            @Scripts.Render("~/bundles/jqueryui")

​

            <script type="text/javascript">

​

​

                var type = $('#Type');

                var category = $('#Category');

                var country = $('#Country');

                var product = $('#Product');

                var table = $('#table');

​

                $('#search').click(function () {

​

                    var url = '@Url.Action("FetchProductProperties")';

                    table.empty();

                    $.getJSON(url, { type: type.val(), category: category.val(), country: country.val(), product: product.val() }, function (data) {

                        $.each(data, function (index, item) {

                            var clone = $('#template').clone();

                            clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']'));

                            var cells = clone.find('td');

                            cells.eq(0).children('span').text(item.ID);

                            cells.eq(0).children('input').val(item.ID);

                            cells.eq(1).children('input').first().prop('checked', item.CheckOrNot)

                            cells.eq(2).children('span').text(item.Name);

                            cells.eq(2).children('input').val(item.Name);

                            cells.eq(3).children('span').text(item.PropertyValue);

                            cells.eq(3).children('input').val(item.PropertyValue);

                            $('#table').append(clone.find('tr'));

                        });

                    });

                });

​

​

                $('#resetborchure').click(function () {

                    table.empty();

                });

​

            </script>

        }

​