Javascript点击功能在asp.net mvc中不工作
本文关键字:mvc 工作 net asp 功能 Javascript | 更新日期: 2023-09-27 18:18:12
我有以下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>
</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>
}
<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
取决于你选择的复选框