Javascript点击功能在asp.net mvc中不工作

javascript click function not working in asp.net mvc

本文关键字：mvc 工作 net asp 功能 Javascript      更新时间：2023-09-26

我有以下asp.net mvc 5 web应用程序视图页面，以前它工作得很好。

@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>

    }

上面的视图有两个按钮叫做重置宣传册和创建宣传册

一旦我点击重置宣传册按钮，它将清除该视图中的表，一旦我选择创建宣传册它将重定向到另一个视图。

以前这两个功能工作得很好，但我不能理解这是不给任何响应，一旦我点击这些按钮

由于您希望重定向到另一个方法(在表中传递表单控件的值)，因此没有理由使用ajax，相反，您应该执行普通的提交。

将<form id="brochureform">元素替换为

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

并删除<button id="createborchure" ...>Create Brochure</button>元素及其相关脚本。这将对你的public ActionResult Create_Brochure(IEnumerable<ProductsPropertiesVM> model)方法进行GET调用

然而，这也会创建一个非常丑陋的url，并且有超过查询字符串限制并抛出异常的风险。一般来说，GET方法的参数不应该是集合。

从你在聊天中提供的DotNetFiddle，它不清楚你如何使用你传递给方法的数据(你创建一个变量string ids，但从来没有实际使用它。假设在该方法中返回的视图确实需要它，我建议添加另一个POST方法来避免上述问题。

[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 });
}
并将Create_Brochure()方法更改为 
public ActionResult Create_Brochure(string id)
{
    ....
}
最后将BeginForm()修改为 
@using (Html.BeginForm("Initialize_Brochure", "Brochure", FormMethod.Post))

这意味着您的url将简单地像/Brochure/Initialize_Brochure/2,4,5取决于你选择的复选框

相关文章：