我正在尝试使用JQuery / Ajax将我的模型传递给控制器，但我不确定如何正确操作。到目前为止，我尝试使用Url.Action，但模型为空。
注意：stackoverflow上的重复线程似乎都没有涉及到ASP.NET 5 MVC 6的使用。
视图：
$("#inpDateCompleted").change(function () {
var url = '@(Url.Action("IndexPartial", "DashBoard", Model, null))';
$("#DailyInvoiceItems").load(url);
});
控制器：
[HttpGet]
public PartialViewResult IndexPartial(DashBoardViewModel m)
{
// Do stuff with my model
return PartialView("_IndexPartial");
}
看起来你的IndexPartial操作方法有一个复杂对象参数。如果你正在传递大量数据（复杂对象），将操作方法转换为HttpPost操作方法，并使用jQuery的post方法将数据提交可能是个好主意。GET在查询字符串值方面有限制。
[HttpPost]
public PartialViewResult IndexPartial(DashboardViewModel m)
{
//May be you want to pass the posted model to the parial view?
return PartialView("_IndexPartial");
}
你的脚本应该是
var url = "@Url.Action("IndexPartial","YourControllerName")";
var model = { Name :"Shyju", Location:"Detroit"};
$.post(url, model, function(res){
//res contains the markup returned by the partial view
//You probably want to set that to some Div.
$("#SomeDivToShowTheResult").html(res);
});
假设您的 DashboardViewModel 类具有属性 Name 和 Location，并且 SomeDivToShowTheResult 是页面上一个 div 的 id，您想要在其中加载来自 partialview 的内容。
如果需要，您可以在 js 中构建更复杂的对象。只要结构与视图模型类匹配，模型绑定就会起作用。
var model = { Name :"Shyju",
Location:"Detroit",
Interests : ["Code","Coffee","Stackoverflow"]
};
$.ajax({
type: "POST",
data: JSON.stringify(model),
url: url,
contentType: "application/json"
}).done(function (res) {
$("#SomeDivToShowTheResult").html(res);
});
为了将上述js模型转换为您的方法参数，您的视图模型应该像这样。
public class DashboardViewModel
{
public string Name {set;get;}
public string Location {set;get;}
public List<string> Interests {set;get;}
}
在您的操作方法中，指定 [FromBody]
[HttpPost]
public PartialViewResult IndexPartial([FromBody] DashboardViewModel m)
{
return PartialView("_IndexPartial",m);
}
使用以下JS代码：
$(document).ready(function () {
$("#btnsubmit").click(function () {
$.ajax({
type: "POST",
url: '/Plan/PlanManage', //your action
data: $('#PlanForm').serialize(), //your form name.it takes all the values of model
dataType: 'json',
success: function (result) {
console.log(result);
}
})
return false;
});
});
在你的控制器中添加以下代码：
[HttpPost]
public string PlanManage(Plan objplan) //model plan
{
}
如其他答案所建议的那样，最简单的方法可能是将表单数据“POST”到控制器。如果您需要传递整个模型/表单，您可以轻松使用 serialize() 完成这项工作，例如：
$('#myform').on('submit', function(e){
e.preventDefault();
var formData = $(this).serialize();
$.post('/student/update', formData, function(response){
//Do something with response
});
});
因此，您的控制器可以将视图模型作为参数，例如：
[HttpPost]
public JsonResult Update(StudentViewModel studentViewModel)
{}
或者，如果您只想发布一些特定的值，可以执行以下操作：
$('#myform').on('submit', function(e){
e.preventDefault();
var studentId = $(this).find('#Student_StudentId');
var isActive = $(this).find('#Student_IsActive');
$.post('/my/url', {studentId : studentId, isActive : isActive}, function(response){
//Do something with response
});
});
使用这样的控制器：
[HttpPost]
public JsonResult Update(int studentId, bool isActive)
{}
//C# class
public class DashBoardViewModel
{
public int Id { get; set;}
public decimal TotalSales { get; set;}
public string Url { get; set;}
public string MyDate{ get; set;}
}
//JavaScript file
//Create dashboard.js file
$(document).ready(function () {
// See the html on the View below
$('.dashboardUrl').on('click', function(){
var url = $(this).attr("href");
});
$("#inpDateCompleted").change(function () {
// Construct your view model to send to the controller
// Pass viewModel to ajax function
// Date
var myDate = $('.myDate').val();
// IF YOU USE @Html.EditorFor(), the myDate is as below
var myDate = $('#MyDate').val();
var viewModel = { Id : 1, TotalSales: 50, Url: url, MyDate: myDate };
$.ajax({
type: 'GET',
dataType: 'json',
cache: false,
url: '/Dashboard/IndexPartial',
data: viewModel ,
success: function (data, textStatus, jqXHR) {
//Do Stuff
$("#DailyInvoiceItems").html(data.Id);
},
error: function (jqXHR, textStatus, errorThrown) {
//Do Stuff or Nothing
}
});
});
});
//ASP.NET 5 MVC 6 Controller
public class DashboardController {
[HttpGet]
public IActionResult IndexPartial(DashBoardViewModel viewModel )
{
// Do stuff with my model
var model = new DashBoardViewModel { Id = 23 /* Some more results here*/ };
return Json(model);
}
}
// MVC View
// Include jQuerylibrary
// Include dashboard.js
<script src="~/Scripts/jquery-2.1.3.js"></script>
<script src="~/Scripts/dashboard.js"></script>
// If you want to capture your URL dynamically
<div>
<a class="dashboardUrl" href ="@Url.Action("IndexPartial","Dashboard")"> LinkText </a>
</div>
<div>
<input class="myDate" type="text"/>
//OR
@Html.EditorFor(model => model.MyDate)
</div>
Url.Action()是服务器端解析后发送到视图的 Razor 代码)。如果你只想将所选日期发送到方法，请使用$("#DailyInvoiceItems").load('@(Url.Action("IndexPartial", "DashBoard"))', { date: $(yourdatecontrol).val() });并且更改方法来带有一个DateTime date参数。 - user3559349$('form').serialize()来序列化你表单中的所有控件。例如：$.post('@(Url.Action("IndexPartial", "DashBoard"),$('form').serialize(), function(data) { $("#DailyInvoiceItems").html(data); });- user3559349$（'form'）.serialize（）的作用。假设您已经正确生成了表单控件，您的DashBoardViewModel m参数将被正确绑定。 - user3559349