[asp.net-mvc]javascript 单击功能不工作在 asp.net mvc 中

发布时间: 2017/3/25 10:39:28
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我有以下 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>


    }

视图上方有两个按钮称为重置的小册子创建小册子

一旦其明确该视图中的表都将重置宣传册点击,一旦我选择创建小册子其重定向到另一个视图。

以前这两个函数工作很好,但我不明白这不是给任何响应,一旦单击这些按钮。

解决方法 1:

因为你想要将重定向到另一种方法 (通过在表中的窗体控件的值) 就没有理由使用 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> 元素和其关联的脚本。这现在将 GET 调用到你 public ActionResult Create_Brochure(IEnumerable<ProductsPropertiesVM> model) 方法

然而这还将创建一个 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 根据你选择的复选框

赞助商