如何使用 jquery Ajax 将两个数据模型从视图传递到控制器

Question

我正在使用 MVC 开发 Web 应用程序。在一种情况下，我将使用 jquery ajax 方法从我的视图中调用服务器端操作。我必须将两个模型对象作为 ajax 的数据传递，但每次传递空值时。我推荐 Proper way to use AJAX Post in jquery to pass model from strongly typed MVC3 view 来解决我的问题，但并不满意。那么如何使用 jquery ajax 传递模型对象？

Jquery 调用 Action

的代码

 $("#btnAddAjax").click(function(e){
                e.preventDefault();


                var usermodel = {
                    US_FirstName:$("#txtFirstName").val(),
                    US_LaststName:$("#txtFirstName").val()
                };
                var citydatemodel = {
                    date:$("#SignDate").val(),
                    city: $("#selectCity").val()
                };


                $.ajax({
                    url:'@Url.Action("AllLandLord")',
                    contentType:'application/json; charset=utf-8',

                    data: JSON.stringify({User: usermodel, testM: citydatemodel}),
                    UpdateTargetId: "dvLandLord3",
                    type:'POST',
                    success:function(data){
                        $("#dvLandLord3").html(data);
                    },
                    error:function(){
                        alert('Something Wrong !!!');
                    }
                });
            });

我有两个模型，为此我从 viewModel 调用它

    public class User_Master
    {
      [Required(ErrorMessage = "* Please Enter First Name For Tenant")]
       public string TN_FirstName { get; set; }

      [Required(ErrorMessage = "* Please Enter Last Name For Tenant")]
       public string TN_LastName { get; set; }  
    }


public partial class CityDate
{
    [Required(ErrorMessage = "* Please Select Your City.")]
    public string PR_City { get; set; }

    [Required(ErrorMessage = "* Please Select Date")]
    public Nullable<System.DateTime> CM_AgreementSignDate { get; set; }
}

最后，我将使用 jquery ajax.

调用以下操作（用于部分视图）

[HttpPost]
    public PartialViewResult AllLandLord(User_Master usermaster, CityDate citydate)
    {
        List<User_Master> allLandLord = new List<User_Master>();
        if (ModelState.IsValid)
        {
            allLandLord = agreementnewBAL.AllLandLordUsers();
            return PartialView("LoadLandLord", allLandLord);
        }
        else
        {
            return PartialView("LoadLandLord", allLandLord);
        }
    }

Answer 1

我整理了一个快速演示：

一个基本动作：

[HttpPost]
public ActionResult TestMethod(userModel User, testModel testM)
{
    return View();
}

模特：

public class testModel
{
    public string UserType { get; set; }
}

 public class userModel
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
}

我的 javqascript:

 <script type="text/javascript">
    $("#myButton").click(function () {
        var usermodel = {
            FirstName: 'testfn',
            LastName: 'testln'
        }

        var testmodel = {
            UserType: 'test'
        }

        $.ajax({
            url: '@Url.Action("TestMethod")',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify({User: usermodel, testM: testmodel}), 
            type: "POST",
            success:function(data){
                alert("success");
            },
            error: function(){
                alert("error");
            }
        });
    });
</script>

调用该 JS 会导致我分配的数据正确传递给操作。

您应该能够只更新我的 JS 代码以使其在您的项目中运行。

编辑：数据：您 ajax 调用的组件需要与您的控制器相匹配

data: JSON.stringify({User: usermodel, testM: testmodel}),

从我的例子变成

data: JSON.stringify({usermaster: usermodel, citydata: citydatamodel}),

编辑 2：

您还需要确保您的 js 模型与您的 MVC 模型匹配：

var usermodel = {
   US_FirstName:$("#txtFirstName").val(),
   US_LaststName:$("#txtFirstName").val()
};
var citydatemodel = {
    date:$("#SignDate").val(),
    city: $("#selectCity").val()
};

这些与您的 MVC 模型不匹配。

var usermodel = {
   TN_FirstName:$("#txtFirstName").val(),
   TN_LaststName:$("#txtFirstName").val()
};
var citydatemodel = {
    CM_AgreementSignData:$("#SignDate").val(),
    PR_City: $("#selectCity").val()
};

如何使用 jquery Ajax 将两个数据模型从视图传递到控制器

How to pass two data model from view to controller using jquery Ajax

jquery

ajax

model-view-controller

ajaxform