通过ajax加载partialView不起作用 [英] Loading partialView through ajax not working
问题描述
我正在尝试通过部分View和ajax显示订单摘要.请求将发送到服务器，但我的Showsummary的操作方法从未命中.我想通过局部视图来总结订单.
i am trying to show order Summary through partial View and ajax.Request is going to server but my action method of Showsummary never hits. i want to summary of order through partial view.
[HttpPost]
public PartialViewResult Showsummary(OrderViewModel model)
{
try
{
var p = model.Packages.SelectMany(x => x.Packages).Select(y => new OrderPackagesViewModel()
{
PkgName = y.PkgName,
pkg_Id = y.id,
Ser_Id = y.Ser_Id,
Quantity = y.Quantity,
price = (y.TotalPrice - (y.DiscountPercent / 100 * y.TotalPrice)) * y.Quantity
}).ToList();
model.OrderPackages = p;
return PartialView("OrderSummary", model);
}
catch
{
return PartialView("OrderSummary", model);
}
}
我的Ajax
$("#summary").click(function () {
console.log("calling summary");
event.preventDefault();
$.ajax({
type: "POST",
url: "/Order/Showsummary",
data: $("form.signup-form").serialize(),
success: function (data) {
console.log(data)
$('#page_2').hide();
$('#page_3').show();
$('#page_3').html(data);
},
failure: function (response) {
console.log(response.responseText);
},
error: function (response) {
console.log(response.responseText);
}
});
})
//HTML代码
<div id="page_1">
<input asp-for="cus_name" placeholder="First Name" >
<input asp-for="Email" placeholder="Email" >
<select asp-for="Country" class="ui search dropdown">
<option value="">Select Country</option>
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
</select>
<input asp-for="cus_phone" placeholder="Phone Number"/>
<select asp-for="FirstPreferences" class="custom-select mr-sm-2"
asp-items="@(newSelectList(Preferences))">
<option value="">Select</option>
</select>
<select asp-for="FirstPreferedTimeStart" class="menu">
<option value="">HH:MM</option>
<option value="00:00:00">00:00</option>
<option value="01:00:00">01:00</option>
</select>
<textarea asp-for="Message" class="form-control"> </textarea>
</div>
//Page2可用软件包的详细信息.它是GroupByServices的列表，其中包含字段ser_id Ser_Name和ServicePackages列表.
//Page2 details of packages available. It is list of GroupByServices which contain fields ser_id Ser_Name and List of ServicePackages.
<div id="page_2" style="display:none">
<div>
<h1 id="heading">Choose a Package!</h1>
</div>
<div class="buttons">
@foreach (var services in Model.Packages)
{
<a href="#service_@services.Ser_Id"><div class="logo-p">
<h2>@services.Ser_Name</h2></div></a>
}
</div>
<!-- packages -->
@for (int i = 0; i < Model.Packages.Count; i++)
{
<div class="packages" id="service_@Model.Packages[i].Ser_Id">
<h1 id="custom-website-design">
@Model.Packages[i].Ser_Name
</h1>
<div class="packs-content">
@for (int j = 0; j < Model.Packages[i].Packages.Count(); j++)
{
<div class="pack1">
<div class="pack-price">
<div>
<input asp-for="@Model.Packages[i].Packages[j].id" hidden />
<input asp-for="@Model.Packages[i].Packages[j].PkgName" hidden />
<input asp-for="@Model.Packages[i].Packages[j].Ser_Id" hidden />
<input asp-for="@Model.Packages[i].Packages[j].Ser_Name" hidden />
<h1>@Model.Packages[i].Packages[j].PkgName</h1>
<p>@Model.Packages[i].Packages[j].Ser_Name PACKAGE</p>
</div>
<p>$@Model.Packages[i].Packages[j].TotalPrice</p>
<input asp-for="@Model.Packages[i].Packages[j].TotalPrice" hidden />
</div>
<div class="pack-features">
<div class=""></div>
@foreach (var features in Model.Packages[i].Packages[j].Description)
{
<h2>@features</h2>
}
</div>
<div class="pack-order">
<div class="row-1">
@{
double discount = (Model.Packages[i].Packages[j].DiscountPercent / 100 * Model.Packages[i].Packages[j].TotalPrice);
double PriceAfterDiscount = Model.Packages[i].Packages[j].TotalPrice - discount;
}
<p>SPECIAL DISCOUNT</p>
<P>-$@discount</P>
</div>
<div class="row-2">
<p>FINAL PRICE FOR LIMITED TIME</p>
</div>
<div class="row-3">
<a asp-controller="Packages" asp-action="Detail" asp-route-id="@Model.Packages[i].Packages[j].id" target="_blank">view details</a>
<h1>$@PriceAfterDiscount</h1>
<input asp-for="@Model.Packages[i].Packages[j].DiscountPercent" hidden />
</div>
<div class="row-4">
<h4>Add To Buying List</h4>
<div class="input-group mb-3 order-btn-pack">
<div class="input-group-prepend">
<div class="input-group-text">
<input asp-for="@Model.Packages[i].Packages[j].is_selected" aria-label="Checkbox for following text input">
</div>
</div>
<input asp-for="@Model.Packages[i].Packages[j].Quantity" value="1" min="1" required placeholder="Quantity" class="form-control" aria-label="Text input with checkbox">
</div>
</div>
<div class="row-5">
<p>Discuss this offer with expert</p>
<div class="discuss">
<p>12345467889</p>
<p id="chat-btn_10">Live Chat</p>
</div>
</div>
</div>
</div>
}
<input asp-for="HoldPackage" hidden/>
</div>
</div>
}
<div>
<button type="button" class="btn btn-danger px-2 btn-lg" onclick="PageBack(this.parentElement.parentElement)">Back</button>
<button type="button" class="btn btn-danger px-2 btn-lg" id="summary">Summary!</button>
</div>
</div>
编辑！！！！我已经在ajax中更改了此行，现在它开始命中我的控制器操作，但是仍然所有表单值都是空的，似乎模型绑定无法识别我的字段
Edit!!!! i have changed this line in ajax now it start hitting my controller action but still all form values are empty seems model binding is unable to recognize my fields
**const model= $("form").serialize()**
console.log(model); //data is there thats fine
和在ajax中
数据:{模型}，我的模型有一个称为包"的字段，它是一些字段的列表，并且在其中有另一个列表.
and in ajax
data: { model },
my model have field called packages which is list of some fields and inside it there is one another list.
一件事很清楚.$("form").serialize()在我的情况下无法正常工作，它给了我 415不支持的媒体类型客户端错误响应.我认为问题是由于嵌套列表所致
One thing is clear. $("form").serialize() is not working in my case its giving me 415 Unsupported Media Type client error response. I think problem is due to nested List
推荐答案
我已经用一个简单的OrderViewModel对象检查了您的代码，它运行良好.我建议您可以尝试在操作方法中添加"[FromBody]"，如下所示:
....
修改
根据您的描述，似乎您使用的是嵌套列表，并且在使用[FromBody]时遇到415错误.我已经修改了示例代码，在action方法中，它没有使用[FromBody]属性，在JQuery Ajax方法中，不需要使用JSON.stringify方法来更改JavaScript对象.更多详细信息，请检查以下代码:
According your description, it seems that you are using the Nested List and meet 415 error when using the [FromBody]. I have modified the sample code, in the action method, it's not using the [FromBody] attribute and in the JQuery Ajax method, there is no need to use the JSON.stringify method to change the JavaScript object. More detail information, please check the following code:
模型类(假设OrderViewModel包含一个列表):
Model Class (Suppose the OrderViewModel contain a List):
public class OrderViewModel
{
public int OrderId { get; set; }
public string OrderName { get; set; }
public List<Package> Packages { get; set; }
}
public class Package
{
public int Pid { get; set; }
public string PackageTitle { get; set; }
}
控制器中的代码:
/// <summary>
/// //display the order
/// </summary>
/// <returns></returns>
public IActionResult ShowOrder()
{
OrderViewModel ovm = new OrderViewModel()
{
OrderId = 1001,
OrderName = "order 1",
Packages = new List<Package>()
{
new Package(){ Pid=101, PackageTitle="first Package"},
new Package(){ Pid=102, PackageTitle="second package"}
}
};
return View(ovm);
}
/// <summary>
/// JQuery ajax post method
/// </summary>
/// <param name="model"></param>
/// <returns></returns>
[HttpPost]
public PartialViewResult Showsummary(OrderViewModel model)
{
try
{
//...
return PartialView("OrderSummary", model);
}
catch
{
return PartialView("OrderSummary", model);
}
}
ShowOrder.cshtml:
ShowOrder.cshtml:
@model MVCSample.Models.OrderViewModel
@{
ViewData["Title"] = "ShowOrder";
}
<div class="row">
<div class="col-md-4">
<form asp-action="Showsummary" asp-controller="Home" method="post" class="signup-form">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="OrderId" class="control-label"></label>
<input asp-for="OrderId" class="form-control" />
<span asp-validation-for="OrderId" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="OrderName" class="control-label"></label>
<input asp-for="OrderName" class="form-control" />
<span asp-validation-for="OrderName" class="text-danger"></span>
</div>
<div id="packages">
@for (int i = 0; i < Model.Packages.Count; i++)
{
<div class="form-group">
<label asp-for="@Model.Packages[i].Pid" class="control-label"></label>
<input asp-for="@Model.Packages[i].Pid" class="form-control" />
<span asp-validation-for="@Model.Packages[i].Pid" class="text-danger"></span>
<br />
<label asp-for="@Model.Packages[i].PackageTitle" class="control-label"></label>
<input asp-for="@Model.Packages[i].PackageTitle" class="form-control" />
<span asp-validation-for="@Model.Packages[i].PackageTitle" class="text-danger"></span>
</div>
}
</div>
@*<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
</div>*@
</form>
</div>
</div>
<div>
<input type="button" id="summary" value="Summary" />
<div id="page_3">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function () {
$("#summary").click(function () {
console.log("calling summary");
event.preventDefault();
//create a object to store the entered value.
var OrderViewModel = {};
//using jquery to get the entered value.
OrderViewModel.OrderId = $("input[name='OrderId']").val();
OrderViewModel.OrderName = $("input[name='OrderName']").val();
var packages = [];
//var count = $("#packages>.form-group").length; //you could use it to check the package count
$("#packages>.form-group").each(function (index, item) {
var package = {}
package.Pid = $(item).find("input[name='Packages[" + index + "].Pid']").val();
package.PackageTitle = $(item).find("input[name='Packages[" + index + "].PackageTitle']").val();
packages.push(package);
});
OrderViewModel.Packages = packages;
$.ajax({
type: "POST",
url: "/Home/Showsummary", //remember change the controller to your owns.
data: OrderViewModel,
success: function (data) {
console.log(data)
$('#page_3').html(data);
},
failure: function (response) {
console.log(response.responseText);
},
error: function (response) {
console.log(response.responseText);
}
});
});
});
</script>
然后输出如下:
此外，我还发现通过使用以上示例，如果我只是将 data:OrderViewModel 更改为 data:$("form.signup-form").serialize((在Ajax方法中)，我也可以在action方法中获得OrderViewModel和Packages.
Besides, I also found that by using the above sample, if I just change the data: OrderViewModel to data: $("form.signup-form").serialize() (in the Ajax method), I could also get the OrderViewModel and the Packages in the action method.
这篇关于通过ajax加载partialView不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
