javascript click function not working in asp.net mvc

Question

I'm having following asp.net mvc 5 web application view page , Prevously its worked very well.

@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>
        &nbsp;
    </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>
        &nbsp;
    </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>

}
<form id="brochureform">
    <table class="table">
        <thead>
            <tr>
                <th>Property_ID</th>
                <th>IsChecked</th>
                <th>Property Tile</th>
            </tr>
        </thead>
        <tbody id="table"></tbody>
    </table>
</form>

    <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>
            </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>
    <div style="width:50%; float:left;text-align:right"><button id="createborchure" type="button" class="btn btn-danger submit">Create Brochure</button> </div>

    <script type="text/javascript">

    </script>

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

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

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

                $.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);
                        $('#table').append(clone.find('tr'));
                    });
                });
            });

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

                var data = $('#brochureform').serialize();
                var url = '@Url.Action("Create_Brochure", "Brochure")';

                //$.get(url, data, function (result) {
                //    window.location = url;
                //});

               $.ajax({
                    url: url,                   
                    type: 'GET',                    
                    data: data
                })
                    .success(function (response) {
                     });

            });



            $('#resetborchure').click(function () {              
                table.empty();
            });

</script>


    }

Above view have two buttons called Reset Brochure and Create Brochure

Once I click Reset Brochure button its clear the table in that view and once I select Create Brochure its redirect to another view.

previously these two functions worked very well , but I cannot understand this isn't give any response once I click these buttons.

Answer 1

Since your wanting to redirect to another method (passing the values of the form controls in the table) there is no reason to use ajax, and instead you should just do a normal submit.

Replace the <form id="brochureform"> element with

@using (Html.BeginForm("Create_Brochure", "Brochure", FormMethod.Get))
{
    <table class="table">
        <thead>
            ....
        </thead>
        <tbody id="table"></tbody>
    </table>
    <input type="submit" value="CreateBrochure" />
}

and remove the <button id="createborchure" ...>Create Brochure</button> element and its associated script. This will now make a GET call to your public ActionResult Create_Brochure(IEnumerable<ProductsPropertiesVM> model) method

However this will also create a really ugly url and there is a risk that you will exceed the query string limit and throw an exception. In general GET methods should never have parameters which are collections.

From the DotNetFiddle you provided in chat, its unclear how your using the data you pass to the method (your create a variable string ids but then never actually use it. Assuming you do actually need it for the view you return in that method, I would suggest adding another POST method to avoid the issues above.

[HttpPost]
public ActionResult Initialize_Brochure(IEnumerable<ProductsPropertiesVM> model)
{
    IEnumerable<int> selectedIDs = model.Where(x => x.IsChecked).Select(x => x.Property_ID);
    string ids = string.Join(",", selectedIDs);
    return RedirectToAction("Create_Brochure", new { id = ids });
}

and change the Create_Brochure() method to

public ActionResult Create_Brochure(string id)
{
    ....
}

and finally modify the BeginForm() to

@using (Html.BeginForm("Initialize_Brochure", "Brochure", FormMethod.Post))

This means you url will simply be something like /Brochure/Initialize_Brochure/2,4,5 depending on the checkboxes you select