使用 Jquery/Ajax 将模型传递给控制器

Posted 2023-03-09

【中文标题】使用 Jquery/Ajax 将模型传递给控制器

【英文标题】：Pass Model To Controller using Jquery/Ajax

【发布时间】：2016-03-01 02:16:46

【问题描述】：

我正在尝试使用 JQuery/Ajax 将我的模型传递给控制器​​，但我不确定如何正确执行此操作。到目前为止，我已经尝试使用Url.Action，但模型是空白的。

注意：*** 上的重复线程似乎都没有使用 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");
 

【问题讨论】：

有点不清楚你想做什么。 Url.Action() 的第三个参数将是您第一次生成视图时的原始模型，如果您的模型包含任何复杂对象或集合的属性，它无论如何都会失败。

那只会通过原始模型（Url.Action() 是在发送到视图之前在服务器上解析的剃须刀代码）。如果您只想将所选日期发送给方法，请使用 $("#DailyInvoiceItems").load('@(Url.Action("IndexPartial", "DashBoard")', date: $(yourdatecontrol).val()); ); 并将方法更改为具有 DateTime date 参数。

您可以使用$('form').serialize() 序列化表单中的所有控件。例如$.post('@(Url.Action("IndexPartial", "DashBoard"), $('form').serialize()`, function(data) $("#DailyInvoiceItems").html(data); );

这就是$('form').serialize() 的作用。您的DashBoardViewModel m 参数将被正确绑定（假设您已正确生成表单控件）

这意味着您确实应该使用视图模型（即仅包含您在视图中需要的那些属性），但是不，您排除的任何属性将只是它们在方法中的默认值。

【参考方案1】：

看起来您的 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);
);

假设Name 和Location 是您的DashboardViewModel 类的属性，而SomeDivToShowTheResult 是您要加载来自partialview 的内容的页面中一个div 的ID。

发送复杂对象？

如果你愿意，你可以在 js 中构建更复杂的对象。只要您的结构与视图模型类匹配，模型绑定就会起作用

var model =  Name :"Shyju", 
              Location:"Detroit", 
              Interests : ["Code","Coffee","***"]
            ;

$.ajax(
    type: "POST",
    data: JSON.stringify(model),
    url: url,
    contentType: "application/json"
).done(function (res) 
    $("#SomeDivToShowTheResult").html(res);
);

上面的js模型要转换成你的方法参数，你的View Model应该是这样的。

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

【讨论】：

谢谢，关于 Post/Get，我了解，但在您的代码中显示您只是发布模型的一个参数，难道不能只传递整个模型吗？整个 DashboardVIewModel。

@Reafidy 查看下面的完整实现

@Reafidy 酷。查看***.com/a/20226220/40521，了解有关将模型发布到控制器的更详细说明。

jquery 返回后是否可以从 PartialView 中读取模型参数？例如，我想创建一个新元素并读取从控制器传回的新模型 ID 以添加额外的 dom 元素？我知道我可以将它包含在局部视图中，但是如果我想要与局部视图无关但具有该元素 id 的另一个部分的 Id 怎么办？

【参考方案2】：

使用以下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

【讨论】：

在您的代码中添加一些解释，以便其他人更可重用答案。

这项技术对我来说非常简单有效。我将 ajax 调用放在带有 javascript 的 actionlink 上，而不是放在提交按钮上。

【参考方案3】：

//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>

【讨论】：

@NEDian 感谢缩进

谢谢，使用 'var viewModel = Id : 1, MyDate:;'如何从页面上的文本框中获取一个值到 mydate 参数中？

对不起，我的意思是如何从文本框中获取日期到 viewModel 参数中？

很好，很抱歉 - 最后一个问题，我如何将 ajax 查询的结果加载到“#DailyInvoiceItems”DIV 中？

希望你能看到代码的变化以及你如何处理ajax调用成功的结果

【参考方案4】：

正如其他答案中所建议的，将表单数据“发布”到控制器可能是最简单的。如果您需要传递整个模型/表单，您可以使用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)