通过模型为了使用Jquery / Ajax控制器 [英] Pass Model To Controller using Jquery/Ajax

问题描述

我想我的模型传递到使用JQuery / Ajax的控制器，我不知道如何正确地做到这一点。到目前为止，我已经尝试使用 Url.Action ，但该模型是空白的。

注：没有计算器上重复线程似乎解决使用ASP.NET MVC 5 6

。

查看：

  $（＃inpDateCompleted）。改变（函数（）{
        VAR URL ='@（Url.Action（IndexPartial，仪表板，型号为null））';
        $（＃DailyInvoiceItems），负载（URL）;
}）;
 

控制器：

  [HTTPGET]
 公共PartialViewResult IndexPartial（DashBoardViewModel米）
 {
      //做的东西与我的模型
      返回PartialView（_ IndexPartial）;
 }
 

解决方案

看起来像你的 IndexPartial 操作方法有一个参数，它是一个复杂的对象。如果你是路过一大把的数据（复杂的对象），这可能是一个好主意，你的操作方法转换为 HttpPost 操作方法，并使用jQuery 后发布的数据来表示。 GET对查询字符串值的限制。

  [HttpPost]
公共PartialViewResult IndexPartial（DashboardViewModel米）
{
   //可能要张贴的模式传递给parial看法？
   返回PartialView（_ IndexPartial）;
}
 

您的脚本应该是

  VAR URL =@ Url.Action（IndexPartial，YourControllerName）;VAR模型= {名称：Shyju，地点：底特律};$。员额（URL，型号，功能（RES）{
   //资源包含了由局部视图返回的标记
   //你可能想的设置为某个事业部。
   $（＃SomeDivToShowTheResult）HTML（RES）;
}）;
 

假设名称和位置是你的 DashboardViewModel 类和 SomeDivToShowTheResult 是要加载从partialview来的内容在页面中一个div的id。

发送复杂的对象？

如果您愿意，您可以建立JS更复杂的对象。作为你的结构视图模型类匹配模型绑定将只要工作

  VAR模型= {名称：Shyju
              位置：底特律，
              兴趣爱好：[code，咖啡，＃1]
            };$阿贾克斯（{
    键入：POST，
    数据：JSON.stringify（模型），
    网址：网址，
    的contentType：应用/ JSON
}）。完成（功能（RES）{
    $（＃SomeDivToShowTheResult）HTML（RES）;
}）;
 

对于上面的js模型转化为你的方法参数，您的视图模型应该是这样的。

 公共类DashboardViewModel
{
  公共字符串名称{集;获取;}
  公共字符串位置{集;获取;}
  公开名单＆LT;串GT;兴趣爱好{集;获取;}
}
 

而在你的操作方法，指定[FromBody]

  [HttpPost]
公共PartialViewResult IndexPartial（[FromBody] DashboardViewModel米）
{
    返回PartialView（_ IndexPartial，米）;
}
 

I am trying to pass my model to a controller using JQuery/Ajax, I'm not sure how to do this correctly. So far I have tried using Url.Action but the model is blank.

Note: none of the duplicate threads on stackoverflow seem to address using ASP.NET 5 MVC 6.

View:

$("#inpDateCompleted").change(function () {
        var url = '@(Url.Action("IndexPartial", "DashBoard", Model, null))';
        $("#DailyInvoiceItems").load(url);
});

Controller:

 [HttpGet]
 public PartialViewResult IndexPartial(DashBoardViewModel m)
 {
      // Do stuff with my model
      return PartialView("_IndexPartial");
 }

解决方案

Looks like your IndexPartial action method has an argument which is a complex object. If you are passing a a lot of data (complex object), It might be a good idea to convert your action method to a HttpPost action method and use jQuery post to post data to that. GET has limitation on the query string value.

[HttpPost]
public PartialViewResult IndexPartial(DashboardViewModel m)
{
   //May be you want to pass the posted model to the parial view ?
   return PartialView("_IndexPartial");
}

Your script should be

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);
});

Assuming Name and Location are properties of your DashboardViewModel class and SomeDivToShowTheResult is the id of a div in your page where you want to load the content coming from the partialview.

Sending complex objects ?

You can build more complex object in js if you want. Model binding will work as long as your structure matches with the viewmodel class

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);
});

For the above js model to be transformed to your method parameter, Your View Model should be like this.

public class DashboardViewModel
{
  public string Name {set;get;}
  public string Location {set;get;}
  public List<string> Interests {set;get;}
}

And in your action method ,specify [FromBody]

[HttpPost]
public PartialViewResult IndexPartial([FromBody] DashboardViewModel m)
{
    return PartialView("_IndexPartial",m);
}

这篇关于通过模型为了使用Jquery / Ajax控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！